HTML을 한 마디로 HyperText Markup Language의 약자다. semantic이란 뜻이 붙으면, 의미를 명확하게 설명하는 HTML이 된다.(의역을 하자면..) 예를 들면, <form>, <table>, <article>, <header> 등이 있고, 웹페이지에서 다양한 부분들을 정의할 때 각 의미에 맞는 태그들로 구성을 해야한다는 뜻이다.
semantic 태그를 사용해야 되는 이유는 뭘까?
- 검색 엔진과 기타 기술로 사이트 콘텐츠의 구조와 목적을 이해하는데 도움된다.
- 웹을 이용해 검색하는 유저들이 콘텐츠의 더 쉽게 접근 가능하다.
- 각 요소의 목적이 명확하기 때문에 코드를 유지보수하기 쉽다.
- 시각장애인이 웹페이지를 볼 때, 모든 태그가 div, span들로 가득 찼다면 어떤게 제목이고, 어떤게 메인이고, 어떤게 어떤 것인지 알 수 없다.
각 태그마다의 이유
Header
일반적으로 기본 제목이나 로고, 탐색링크 및 사이트의 모든 페이지에 공통되는 기타 요소를 포함하기 때문에 웹페이지의 상단 섹션을 마크업하는데 사용된다. 페이지의 헤더와 기본 콘텐츠를 명확하게 구분할 수 있어 사용자가 웹사이트를 더 쉽게 이해하고 탐색할 수 있다.
nav
탐색 링크가 포함된 웹페이지 섹션을 마크업하는데 사용된다. 그래서 사용자와 검색 엔진에게 알리게 되서 유용한다.
main
웹페이지의 주요 콘텐츠 영역을 마크업하는데 사용된다. 페이지의 어느 부분에 주요 콘텐츠가 포함되어 있는지 사용자와 검색 엔진 모두에게 명확히 알릴 수 있다.
article
블로그 게시뮬, 뉴스기사, 제품 리뷰 등 독립형 콘텐츠를 나타내는데 사용된다.
aside
웹페이지의 주요 콘텐츠와 관련되어 있지만, 보충 정보, 광고 또는 관련 기사등을 포함시킬 때 쓰는 태그이다.
section
주제별로 그룹화된 웹페이지 섹션을 마크업하는데 사용된다. 긴 기사의 한 페이지나 섹션 등이 포함될 수 있다.
footer
웹페이지의 하단 섹션을 마크업하는데 사용된다. 저작권 정보, 연락처 세부정보, 소셜 미디어 프로필 링크 등이 포함될 수 있다.
details 및 summary
접을 수 있는 콘텐츠 섹션을 마크업하는데 사용된다. summary태그는 섹션의 제목을 마크업하고, details태그는 내용 자체를 마크업하는데 사용된다.
figure 및 figcaption
웹페이지의 기본 컨텐츠에서 참조되는 독립적인 콘텐츠를 마크업하는데 사용된다. figure태그는 콘텐츠 자체를 마크업하고, figcaption태그는 콘텐츠에 대한 캡션이나 설명을 마크업하는데 사용된다.
mark
어떤 이유로 강조 표시된 텍스트를 마크업하는데 사용된다. 검색 결과나 강조표시한 텍스트 등이 포함된다.
time
날짜나 시간을 표시하는데 사용된다. 태그를 사용하면 검색엔진 및 기타 기술이 페이지 콘텐츠의 의미를 더 쉽게 이해할 수 있다.
progress
진행률 표시줄을 표시하는데 사용된다. 사용자 작업 진행 상황을 더 쉽게 이해할 수 있다.
참조사이트
Writing Semantic HTML - cs.fyi
If you’re new to web development, you may have heard the term “Semantic HTML” and wondered what it means. Simply put, Semantic HTML refers to the use of HTML markup to convey the meaning of the content on a web page, rather than just its appearance.
cs.fyi
'Frontend' 카테고리의 다른 글
| CSS 정리 (0) | 2023.09.24 |
|---|---|
| 웹 접근성 (0) | 2023.09.17 |
| What is DNS? (0) | 2023.09.08 |
| What is DomainName? (0) | 2023.09.08 |
| What is HTTP? (0) | 2023.09.04 |