HTML을 작성할 때
div,span태그만으로 사용하게 된다면 명시되지 않은 영역을 알기 위해 많은 어려움이 생기게 됩니다. 그렇기 때문에 각 요소의 정의가 명확한 Semantic 태그를 사용하여 HTML을 작성하는 것이 권장됩니다.
Semantic Elements
시멘틱 요소는 요소 자체가 사용자와 브라우저에게 사용되는 의미를 전달하고자 할 때 사용됩니다. 다음은 HTML5에서 사용되는 시멘틱 요소입니다.
자주 사용되는 시멘틱 요소
HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 나타낼 때 사용합니다.<Header>
HTML 문서 사이를 탐색할 수 있는 링크(link)의 집합을 나타낼 때 사용합니다.<nav>
ex) GNB 내의 메뉴
HTML 문서의 주요 콘텐츠(content)를 정의합니다.<main>
HTML 문서에서 페이지 부분 이외의 컨텐츠(content)를 나타낼 때 사용합니다.<aside>
HTML 문서에서 내용의 컨텐츠 중에 독립적인 하나의 글 부분을 나타낼 때 사용합니다.<article>
HTML 문서에서 섹션 단위로 내용의 컨텐츠를 나타낼 때 사용합니다.<section>
HTML 문서에서 제목을 표시할 때 사용하는 요소로,<hgroup><h1>~<h6>요소가<hgroup>입니다.
페이지나 요소의 최하단에 위치하는 꼬릿말 영역을 정의합니다.<footer>
알아두면 좋은 시멘틱 요소
HTML 문서에서 그래픽과 비디오 등의 독립적인 컨텐츠를 나타낼 때 사용됩니다.<figure>
figure 요소를 위한 캡션을 나타낼 때 사용합니다.<figcaption>
기본 출력방향과는 다른 방향으로 출력되는 텍스트를 나타낼 때 사용합니다.<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>
br 요소와는 달리 긴 단어가 화면의 맨 끝에 오면 상황에 따라 줄 바꿈 할 곳을 미리 나타낼 때 사용합니다.<wbr>
