[CS]Semantic Markup

JH Cho·2022년 12월 15일
0

CS

목록 보기
9/12

시맨틱 마크업이란?

  • 시맨틱 마크업은 콘텐츠를 시각적으로 표시하는 방식이 아니라 콘텐츠의 구조적 의미 또는 의미를 설명하기 위해 HTML을 작성하고 구조화하는 방법

시맨틱 마크업의 태그 종류

  • header : 웹페이지 소개 컨텐츠
  • nav : 탐색 메뉴 링크
  • main : 한 페이지에 하나
  • article : 웹페이지의 독립적 기사(게시물)
  • section : 유사한 주제 컨텐츠 그룹화
  • aside : 덜 중요한 컨텐츠 (사이드바)
  • footer : 연락처,사이트 정보, 일부 사이트 탐색 등.

예시


출처 )https://medium.com/codex/what-is-semantic-markup-and-why-you-should-use-it-44777543c29c

시맨틱 마크업을 사용하는 이유

접근성

  • 모든 사용자가 웹 페이지의 컨텐츠를 시각적으로 보는 것 불가
  • 시각 장애인들이 접근하기엔 시맨틱 태그가 중요(음성 판독기..)
  • 사용자와 컴퓨터 모두 컨텐츠 구조, 페이지 요소 간의 관계 및 컨텐츠 특성 이해 가능.

검색 엔진 최적화

  • 검색 엔진 크롤러는 웹페이지의 SEO를 고려할 때 가장 중요한 부분
  • 시맨틱 마크업이 도움 됨.

유지보수성

  • 논리적으로 정리한 명확한 코드로 다른 개발자들이 보기에도 쉽게 유지 관리 가능.

참고한 글

https://medium.com/codex/what-is-semantic-markup-and-why-you-should-use-it-44777543c29c

profile
주먹구구식은 버리고 Why & How를 고민하며 프로그래밍 하는 개발자가 되자!

0개의 댓글