시맨틱 태그는 말그대로 브라우저와 개발자에게 요소의 의미를 명확하게 전달해 준다.
우리가 쉽게 남발하게 될 수 있는 <div> 와 <span> 태그는 무슨 내용을 전달하는지 정확히 알 수 없다.
하지만 <haeder>, <nav>, <article> 등 시맨틱 태그들은 어떤 내용이 들어갈지 명확히 전달해 준다.
대표적인 장점
1. SEO (Search Engine Optimization, 검색 엔진 최적화)
시맨틱 태그로 잘 마크업 된 웹사이트는 검색 시 중요한 부분을 잘 파악하고 알맞게 추천해 주게 된다.
2. Accessibility (웹 접근성)
웹사이트를 음성으로 읽어주는 '스크린 리더'를 이용하거나 키보드만을 이용해서 웹사이트를 이용하는 경우 문제없이 잘 동작할 수 있다.
3.Maintainability (유지 보수성)
개발자 입장에서 한눈에 구조를 파악하기 쉽기 때문에 유지 보수성이 매우 높다.
대표적인 종류
| <article> | 독립적인 콘텐츠를 정의합니다. |
| <aside> | 페이지 콘텐츠 이외의 콘텐츠를 정의합니다. |
| <details> | 사용자가 보거나 숨길 수 있는 추가 세부 정보를 정의합니다. |
| <figcaption> | <Figure> 요소에 대한 캡션을 정의합니다. |
| <figure> | 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함된 콘텐츠를 지정합니다. |
| <footer> | 문서 또는 섹션의 바닥글을 정의합니다. |
| <header> | 문서 또는 섹션의 헤더를 지정합니다. |
| <main> | 문서의 주요 내용을 지정합니다. |
| <mark> | 표시/강조 표시된 텍스트를 정의합니다. |
| <nav> | 탐색 링크를 정의합니다. |
| <section> | 문서의 섹션을 정의합니다. |
| <summary> | <details> 요소에 대한 가시적 제목을 정의합니다. |
| <time> | 날짜와 시간을 정의합니다. |
<header>, <nav>, <section>, <article>, <footer> 등은 많이 사용해 봤지만 나머지는 약간은 낯설다.
앞으로는 시맨틱 태그를 잘 활용하여 더 좋은 마크업으로 웹사이트를 만들어 봐야겠다.
https://developer.mozilla.org/ko/docs/Web/HTML/Element#%EB%A9%94%EC%9D%B8_%EB%A3%A8%ED%8A%B8
HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN
이 페이지는 태그를 사용해 만들 수 있는 모든 HTML 요소의 목록을 제공합니다.
developer.mozilla.org