🎩 HTML5 - 시멘틱 태그

시멘틱 태그란?

시맨틱(Semantic)은 의미의, 의미론적인이라는 뜻으로
개발자와 브라우저에게 의미있는 태그를 제공하게 된다.

HTML 요소의 의미를 명확히 해석하고 그 데이터를 활용할 수 있는 웹페이지

메타데이터를 한 가득 사용해서 잡다한 데이터 집합이었던 웹페이지를 의미와 관련성을 가지는 거대한 데이터 베이스로 구축하고자 사용하는 방법.
태그 자체가 의미를 갖고 있어서, 검색엔진에 사이트에 대한 정보를 비교적 정확히 제공할 수 있다.

시멘틱 태그 종류

header Logo, gnb, lnb, top 비주얼
nav gnb
section 본문 article을 포함하는 공간 (주제를 헤딩태그로 표현)
article section의 내용을 보조해주는 내용 (하위에 헤딩태그가 필수)
footer 저작권 정보나 저작자 정보, 서비스 제공 업체 주소나 전화번호 등을 표현하는 공간
main 페이지에서 1번 사용, 헤더에 top 비주얼을 빼는 경우 main에 넣는다.
aside 본문 이외의 내용을 담고 있는 태그로 주로 banner에 사용
figure figcaption 그림을 블록화하는 태그

<figure>
	<img src="" alt="">
    <figcaption>이미지을 시각 적으로 설명</figcaption>
</figure>

details summary 상세 정보를 나타내는 블록 태그. 화면에 핸들(▶) 나타난다. summary는 제목을 표현한다.

<details>
   <summary>Question 1</summary>
   <p>웹 개발자가 알아야 하는 언어 3 가지?</p>
</details>

mark 중요한 텍스트임을 표시
time 시간 정보임을 표시
meter 주어진 범위나 %의 데이터 양 표시
progress 작업의 진행 정도 표시