[HTML] Semantic Tag

Semantic Tag

- Semantic 요소는 div나 span과 달리 자체로 의미를 가지고 있는 요소

HTML5에 추가된 의미 요소

header	헤더를 정의. 헤더는 도입부에 해당하는 콘텐츠(content)를 가지고 있는 부분을 의미
nav	내비게이션을 의미. HTML 문서 사이를 탐색할 수 있는 링크(link)의 집합을 정의
main	주요 콘텐츠를 정의
aside	페이지 부분 이외의 콘텐츠 정의. 주로 사이드에 공간에 위치
section	본문의 여러 내용을 포함하는 공간을 의미. 제목을 가지고 전체적인 내용과 관련이 있는 콘텐츠들의 집합을 의미
article	독립적인 하나의 기사 부분을 정의
figure, figcaption	figure는 그래픽과 비디오 등의 독립적인 콘텐츠를 정의할 떄 사용. figcaption은 figure을 위한 캡션 정의에 사용
footer	푸터를 정의. 푸터에는 일반적으로 사이트의 작성자나 그에 따른 저작권 정보, 연락처 등을 명시

<header>	HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의
<nav>	HTML 문서 사이를 탐색할 수 있는 링크(link)의 집합을 정의
<main>	HTML 문서의 주요 콘텐츠(content)를 정의
<section>	HTML 문서에서 섹션(section) 부분을 정의
<article>	HTML 문서에서 독립적인 하나의 기사(article) 부분을 정의
<aside>	HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의
<figure>	HTML 문서에서 그래픽과 비디오 등의 독립적인 콘텐츠(content)를 정의
<figcaption>	figure 요소를 위한 캡션을 정의
<footer>	HTML 문서나 섹션(section) 부분에 대한 푸터(footer)를 정의
<bdi>	기본 출력방향과는 다른 방향으로 출력되는 텍스트를 정의
<mark>	하이라이팅된 텍스트를 정의
<details>	사용자가 보거나 숨길 수 있는 추가적인 설명문을 정의
<summary>	details 요소에 나타날 내용을 정의
<dialog>	다이얼로그(dialog) 박스나 다이얼로그 윈도우를 정의
<menuitem>	사용자가 팝업 메뉴(popup menu)를 통해 선택할 수 있는 메뉴의 아이템(menu item)을 정의
<meter>	정해진 범위 내의 스칼라 치수를 정의
<progress>	작업에 대한 진행 정도를 정의
<ruby>	루비(ruby) 문자를 선언
<rt>	본문 위에 나타날 문자를 정의
<rp>	루비(ruby) 문자를 지원하지 않는 브라우저에서만 나타날 내용을 정의
<time>	날짜와 시간을 정의
<wbr>	br 요소와는 달리 긴 단어가 화면의 맨 끝에 오면 상황에 따라 줄 바꿈 할 곳을 미리 정의