HTML을 작성할 때div,span태그만으로 사용하게 된다면 명시되지 않은 영역을 알기 위해 많은 어려움이 생기게 됩니다. 그렇기 때문에 각 요소의 정의가 명확한 Semantic 태그를 사용하여 HTML을 작성하는 것이 권장됩니다.
Semantic Elements
시멘틱 요소는 요소 자체가 사용자와 브라우저에게 사용되는 의미를 전달하고자 할 때 사용됩니다. 다음은 HTML5에서 사용되는 시멘틱 요소입니다.
자주 사용되는 시멘틱 요소
<Header>
HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 나타낼 때 사용합니다.
<nav>
HTML 문서 사이를 탐색할 수 있는 링크(link)의 집합을 나타낼 때 사용합니다.
ex) GNB 내의 메뉴
<main>
HTML 문서의 주요 콘텐츠(content)를 정의합니다.
<aside>
HTML 문서에서 페이지 부분 이외의 컨텐츠(content)를 나타낼 때 사용합니다.
<article>
HTML 문서에서 내용의 컨텐츠 중에 독립적인 하나의 글 부분을 나타낼 때 사용합니다.
<section>
HTML 문서에서 섹션 단위로 내용의 컨텐츠를 나타낼 때 사용합니다.
<hgroup>
HTML 문서에서 제목을 표시할 때 사용하는 요소로, <h1> ~ <h6> 요소가 <hgroup>입니다.
<footer>
페이지나 요소의 최하단에 위치하는 꼬릿말 영역을 정의합니다.
알아두면 좋은 시멘틱 요소
<figure>
HTML 문서에서 그래픽과 비디오 등의 독립적인 컨텐츠를 나타낼 때 사용됩니다.
<figcaption>
figure 요소를 위한 캡션을 나타낼 때 사용합니다.
<bdi>
기본 출력방향과는 다른 방향으로 출력되는 텍스트를 나타낼 때 사용합니다.
<mark>
하이라이팅된 텍스트를 정의합니다.
<details>
사용자가 보거나 숨길 수 있는 추가적인 설명문을 나타낼 때 사용합니다.
<summary>
details 요소에 나타날 내용을 정의합니다.
<dialog>
다이얼로그(dialog) 박스나 다이얼로그 윈도우를 정의합니다.
<menuitem>
사용자가 팝업을 통해 선택할 수 있는 아이템을 나타낼 때 사용합니다.
<meter>
정해진 범위 내의 스칼라 치수를 나타낼 때 사용합니다.
<html>
<head>
<title>HTML meter 예제</title>
</head>
<body>
<h1>예제 샘플입니다.</h1>
<p>
그래프:
<meter value="81" min="0" max="100" low="30" high="70" optimum="100">
A+
</meter>
</p>
</body>
<html></html>
</html>
<progress>
작업에 대한 진행 정도를 나타낼 때 사용합니다.
<ruby>
루비(ruby) 문자를 나타낼 때 사용합니다.
루비란? 임의의 문자(보통은 한자)에 대해 읽는 법을 알려주는 문자
<rt>
본문 위에 나타낼 문자를 나타낼 때 사용합니다.
<rp>
루비 문자를 지원하지 않는 브라우저에만 나타날 내용을 나타낼 때 사용합니다.
<time>
날짜와 시간을 의미합니다.
<wbr>
br 요소와는 달리 긴 단어가 화면의 맨 끝에 오면 상황에 따라 줄 바꿈 할 곳을 미리 나타낼 때 사용합니다.