Why use Semantic HTML?
SEO(검색엔진 최적화) 웹 접근성 가독성
웹페이지를 구성할때 적절한 위치에 적합한 요소를 활용하여 의미를 가진 하나의 구조로 만들어야 사용자에게 정확한 정보를 제공할 수 있다.
Non-semantic
<div>,<span> 로만 구성된 코드
Semantic Elements
<header> <footer>
header 도입부, 헤딩, 목차, 검색, 소개 및 탐색에 도움을 주는 콘텐츠
footer 저작권, 연락처 정보, 이용약관, 사이트 맵, 링크 참조
<section> <article>
section 주제별 컨텐츠 그룹, 섹션(구획)을 형성하는 요소
article 페이지 안에서 독립적으로 구분해도 의미가 통하는 구획
<main>
- 문서 또는 애플리케이션 body 요소의 주요 콘텐츠
- 섹션 요소가 아니며, 하나 이상 존재하지 않는다. (나머지 hidden 처리)
<nav>
- 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 링크를 포함하는 섹션 요소
<aside>
- 웹 사이트의 사이드바에 해당되는 부수적 콘텐츠(메인 콘텐츠와 분리된) 섹션
+++
<details> "열림" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성한다.
<figure> 독립적인 콘텐츠를 표현, figcaption 태그를 사용해 설명을 붙일 수 있다.
<figcaption> 부모 태그 figure가 포함하는 다른 콘텐츠에 대한 설명 혹은 범례를 나타낸다.
<mark> 현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분을 나타낸다.
<details> 요소의 공개 상자에 대한 요약, 캡션 또는 범례 지정을 나타낸다.
<time> 시간의 특정 지점 또는 구간을 나타낸다.
Frontend