시맨틱(Semantic) 태그는 의미가 있는 태그란 뜻입니다. HTML 태그를 통해 웹 문서를 작성할 때 좀 더 의미 있는 태그를 사용함으로써 정확하게 정보를 전달하고 웹 문서의 구조를 쉽게 파악할 수 있도록 합니다. 또한, 검색 엔진은 웹 사이트의 HTML 태그들을 분석하여 사용자가 원하는 정보를 노출시키기 때문에 시맨틱 마크업은 중요합니다. 그렇다면 시맨틱 태그는 어떤 것이 있는지 알아보겠습니다.
아래 그림은 시맨틱 태그를 활용하여 웹 문서의 레이아웃을 잡은 것입니다. 각 태그가 어떤 의미를 갖고있는지 살펴보겠습니다.
▶ <header> : 보통 웹 문서의 소개 및 탐색을 위해 사용됩니다. 제목, 로고, 검색, 내비게이션 등을 포함시킬 수 있습니다.
▶ <nav> : 현재 페이지에서 다른 페이지의 탐색을 돕는 내비게이션 역할을 합니다.
▶ <section> : 웹 문서 내의 구획을 나눠 콘테츠를 작성할 때 사용됩니다. MDN에서는 더 적합한 의미를 갖는 요소가 없을 때 사용한다고 합니다.
▶ <article> : <section>은 구획을 나눌 때 사용된다면 <article>은 실제 콘텐츠를 담습니다.
▶ <aside> : 본문의 내용과 간접적으로 연관된 내용을 담거나 본문 이외의 내용을 담기도 합니다.
▶ <footer> : 웹 문서의 가장 아래에 작성자, 저작권 정보, 연락처, 주소 등을 담습니다.
아직 웹 페이지를 분석할 때 어떤 방식으로 접근해야하는지 어렵지만 시맨틱 태그를 참고하여 box를 치면서 분석하다 보면 좀 더 수월한 것 같습니다. 앞으로 HTML로 레이아웃을 만들 때 반드시 시맨틱 태그를 사용하여 더 의미 있게 작성하도록 해야겠습니다.
※ 공부를 시작한지 얼마 되지 않아 정보가 정확하지 않을 수 있습니다. 오류가 있으면 답글로 알려주시면 감사하겠습니다.
'WEB' 카테고리의 다른 글
| [CSS] flex box를 위한 속성들 (0) | 2021.01.11 |
|---|---|
| [CSS] flex 이해하기 (0) | 2021.01.10 |
| [CSS] Box Model 이해하기 (0) | 2021.01.10 |
| [CSS] position 이해하기 (0) | 2021.01.08 |
| [HTML] id와 class의 차이 (0) | 2021.01.04 |