시맨틱 태그(Semantic Tag)는 왜 필요하고 어떻게 사용할까? 핵심만 간단하게.

Semanti Tag란 '의미가 있는 태그'를 뜻한다.
시맨틱 태그가 없었던 HTML4 버전까지는 모든 컨테이너를 div 태그를 활용해서 제작했으나, 이제는 header aside main 등 각종 의미가 있는 태그를 활용하여 컨테이너를 만들고 웹을 구성해야 한다.

이런 시맨틱 태그를 사용해야 하는 이유는 크게 세가지로 나눌 수 있다.
1. 직관적이기 때문에 웹 유지보수가 편리하다.
2. 검색 엔진에 노출될 확률이 올라간다.
3. 접근성이 좋아진다. (화상 키보드 입력, 내래이션 기능 등) -> 이건 웹 표준과 관계된 내용이므로 2번에도 영향을 미친다.

종합해보면 시맨틱 태그를 똑바로 사용하지 않으면 검색 엔진에 노출되지 않아 홍보 비용으로 이중 지출, 그리고 전임자가 만들어놓은 웹 유지보수하다가 직원들이 도망가서 삼중 지출하게 된다는 것이다.

따라서 <div>나 <span>을 남발하기 전에 정말 이게 div와 span 말고는 들어갈 수 있는 친구가 없는지 곰곰히 생각해보아야 한다.
모든 시맨틱 태그를 열거해봤자 그걸 다 활용할 사람은 이 글을 볼 필요가 없기 때문에 주로 사용하는 것들만 정리했다.
다양한 태그들을 보고 싶다면 여기로.

header	웹 로고 등 머리말 영역.
main	페이지의 주 내용이 담기는 영역.
aside	광고 등 페이지의 주 내용과 관계가 없으며 사이드에서 정보를 전달하는 창에 주로 사용한다.
nav	'navigation' 일반적으로 메뉴바에 ul, lu와 많이 사용한다.
article	독립적인 정보를 담은 영역. (main 없이 따로 존재 가능하다.)
section	여러 정보를 묶어놓은 영역.
footer	페이지 가장 밑에 표시되는 영역으로 주로 회사 정보 연락처 등이 담긴다.

 

** 주의 : 단순 이해를 돕기 위해 임의로 지정한 태그일 뿐 시맨틱 태그를 어떻게 사용할 것인지 정해진 것은 없습니다.
특히나 section, article태그는 단순하게 표현한 것이며 실제 활용은 차이가 있습니다. 정확한 정보를 알고 싶다면 MDN 등 신뢰성 있는 사이트를 참고해주세요 **

대략적으로 위와 같이 사용할 수 있다.
다른 것들은 사실 어떤 사람이라도 한 두번 직접 만들어보면 어떻게 써야할지 감이 올 텐데, section과 article 태그가 헷갈릴 수 있다. 열심히 구글링을 해봐도 정확히 section을 언제 쓰는 게 진짜 적재적소에 활용하는 것인지 속 시원하게 찾아볼 수가 없다.
헷갈리면 그냥 section을 사용하지 않는 것도 사실 하나의 방법이다.. 왜냐면 article 태그는 웹 접근성에 전혀 도움이 되지 않는 태그라고 한다. 자세한 내용은 여기를 참고하고 개개인이 판단해서 사용하도록 하자.