HTML) Semantic Tags - 이름 자체에 의미가 있는 태그들

Front-end/HTML

오열매 2022. 10. 3. 22:34

태그들 중에는 input, a, img 태그 등과 같이 태그 자체에 기능이 있는 경우도 있지만,

기능은 딱히 없지만 이름으로 내용을 구분하기에 용이하게 해주는 태그들이 있다.

이를 Semantic(의미의, 의미론적인) Tag라고 한다.

기능은 div 태그와 동일하다. div는 단순 block element에 불과하다. 박스라고 보면 된다.

원래는 이러한 박스에 모든 내용들을 넣었었다. 하지만 웹사이트의 규모가 커지면서, 그 내용물을 구분하기가 힘들어졌다.

이 부근엔 어떤 내용이 있는지 짐작해야만 했다.

Semantic Tag를 이용하면, 이 태그 안에는 어떠한 내용들이 있겠구나 하는 것을 유추할 수 있다.

또한, 검색엔진 최적화와 웹 접근성 등에도 유리하다.

1. <header>: 머리말, 제목, 로고, 검색 form, 작성자 이름 등을 넣을 수 있다.

2. <nav>: 현재 페이지 내 또는 다른 페이지로의 링크를 보여주는 구획. 메뉴, 목차 등이 있다.

3. <aside>: 문서의 주요 내용과 간접적으로만 연관된 부분을 나타낸다. 사이드바 등이 있다.

4. <section>: 문서의 독립적인 구획. 주제나 카테고리 별로 구역을 나눈다.

5. <article>: 기사나 블로그 등의 텍스트 위주 페이지를 구성할 때 주로 사용한다.

7. <main>: body의 주요 콘텐츠를 나타낸다.

참고)