/ HTML

시맨틱 태그?

HTML은 다음과 같이 구성되어 있습니다.




이번 글에서는 시맨틱태그(Semantic Tag)에 대해서 정리해보겠습니다.

시맨틱 태그?


시맨틱 태그라는 것은 의미를 가진 태그라는 의미입니다.
예를 들어, “<h1>“태그는 제목태그라는 의미를 가지고 있는 것이고, “<header>“태그는 헤더의 의미를 가지고 있는 것입니다.


사실 이런 태그를 사용하지 않고도 “<div>“태그만으로 영역을 나누어서 스타일링해도 충분히 웹사이트를 만들 수 있습니다. 그러면 왜 시맨틱 태그를 사용해야 할까요?


시맨틱태그는 일단 개발자가 더 편하게 웹사이트를 유지보수하는데 도움을 줍니다. 단순하게 “<div>“태그 투성이인 것보다, 태그에 의미를 가지고 있다면 한눈에 파악하기도 좋을 것입니다. 그리고 SEO(검색 엔진 최적화)에 도움을 줍니다.

일반적인 구조


  • “<header>” : 웹사이트 페이지의 제목이나 소개, 로고와 같은 것을 포함합니다.
  • “<nav>” : “<header>“안에 만약 여러가지 메뉴가 있을 때 보통 “<nav>“를 사용합니다.
  • “<main>” : 메인 컨텐츠가 담기는 곳에 사용합니다.
  • “<aside>” : main안에서 직접적으로 관련이 없는 경우에 사용합니다.
  • “<section>, <article>” : “<section>, <article>“을 사용하여 main안의 컨텐츠를 구분합니다.
  • “<footer>” : 웹사이트의 맨 밑부분의 부가적인 정보 등에 사용합니다.

<section>과 <article>의 차이?


article태그는 신문기사에서 기사 하나하나를 의미합니다. 그 자체로 독립적입니다. 그리고 section은 서로 연관된 부분을 묶어줄 때 보통 사용합니다. 한개의 페이지에 여러 내용들이 있다면 하나의 section안에 여러 article들이 있을 것입니다.

시맨틱 마크업의 특징


시맨틱 마크업이란 시맨틱하게, 의미를 잘 전달할 수 있도록 HTML문서를 작성하는 것을 말합니다. 시맨틱 마크업은 다음과 같은 특징이 있습니다.

  • 검색엔진이 시맨틱태그를 중요 키워드라고 판단하므로 SEO에 유리함
  • 단순하게 div와 같은 태그를 사용하는 것보다 가독성이 좋아 의미를 파악하기 쉽습니다.

End.