요약
시맨틱 마크업은 HTML 태그를 의미와 구조에 맞게 사용하여 문서를 작성하는 방법입니다.
특징:
- 의미 부여: 각 HTML 요소에 명확한 의미를 부여하여 웹 페이지의 내용을 이해하기 쉽게 합니다.
- 검색 엔진 최적화(SEO): 검색 엔진은 시맨틱 마크업을 통해 콘텐츠를 더 잘 이해하고 인덱싱할 수 있습니다.
- 접근성: 스크린 리더 및 보조 기술 사용자에게 웹 페이지를 더 접근 가능하게 만듭니다.
- 가독성: 코드의 가독성을 향상시켜 유지 보수를 용이하게 합니다.
- 유지 보수: 웹 페이지의 구조를 명확하게 정의하여 협업 및 유지 보수를 용이하게 합니다.
시맨틱 마크업
시맨틱(Semantic)이란 "의미론적인"의 뜻을 가지며 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말한다. 따라서, 시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것을 말한다.
특징
- 의미 부여: 시맨틱 마크업은 각 HTML 요소에 명확한 의미를 부여합니다. 이로써 웹 페이지의 구조와 내용이 더 이해하기 쉽고 의미 있는 정보로 전달됩니다.
- 검색 엔진 최적화(SEO): 검색 엔진은 시맨틱 마크업을 통해 웹 페이지의 콘텐츠를 더 잘 이해하고 인덱싱할 수 있습니다. 적절한 제목, 본문, 링크 구조는 SEO에 도움이 됩니다.
- 접근성: 시맨틱 마크업은 웹 페이지를 스크린 리더 및 보조 기술 사용자에게 더 접근 가능하게 만듭니다. 적절한 마크업은 시각, 청각 장애가 있는 사용자에게 콘텐츠를 전달하는 데 도움이 됩니다.
- 가독성: 시맨틱 마크업은 코드의 가독성을 향상시킵니다. 각 요소가 그 역할에 맞게 사용되면 코드의 의도가 명확해지며 유지 보수가 쉬워집니다.
- 유지 보수: 시맨틱 마크업은 웹 페이지의 구조를 명확하게 정의하므로, 다른 개발자들이 작업을 이어받거나 수정할 때 혼란을 방지합니다.
시멘틱 마크업을 하기 위해선 각 태그를 그 용도에 맞게 사용하여야 한다.
- <header>와 <footer> : 헤더/푸터에 사용
- <main>과 <section> : 메인 컨텐츠에 사용
- <ol>과 <li> : 순서가 있는 목록으로 사용
- <ul>과 <li> : 순서가 없는 목록으로 사용
- <article> : 독립적인 컨텐츠에 사용(이 문서에서는 시맨틱 마크업 전체 내용)
- <section> : 문서 내에서 관련된 주제로 묶는 영역 단위(이 문서에서는 시맨틱 마크업 특징, 종류 부분을 각각 section으로 나눔)
- <nav> : GNB 등 내비게이션 메뉴를 묶을 때 주로 사용
- <aside> : 문서 내 사이드바에 사용
- <h1>~<h6> : 제목의 스케일을 표시할 때 사용, <h1>가 중요도가 가장 크고 숫자가 커질수록 낮아짐
이런 식의 태그가 가지고 있는 의미에 맞게 사용하는 것인데, 이런 점 이외에도 CSS 스타일을 명시하는 태그를 사용하지 않는 것 또한 시맨틱 마크업의 한 종류이다. 즉, 태그가 가지는 의미 자체가 스타일이라면 이는 마크업 자체가 스타일을 갖는 것이기 때문에 시멘틱 마크업에 적합하지 않다.
예를 들어, 동일한 효과를 부여하는 <strong>과 <b> 태그가 있다. 둘은 동일하게 글자색을 진하게 하지만 <b> 태그의 경우는 그 자체가 "bold"의 약어이기 때문에 태그 자체가 스타일을 가진다고 할 수 있다. 하지만 <strong>의 경우에는 "그 안의 내용이 다른 내용보다 더 강조되어야 한다"라는 의미를 가지기 때문에 시맨틱 마크업에 더 적합하다.
사용 예시