HTML5 구조 및 시맨틱 요소 알아보기

HTML4때 까지는 div태그에 id나 클래스이름으로 보여주는 화면의 부분을 나누어 사용했으나 이로인해 검색엔진은 웹페이지를 제대로 식별하지 못했습니다.그것을 보안하고자 의미적 요소의 태그들이 HTML5에 등장한 것입니다.

<header>
<nav>
<section>			<aside>
<article>
<footer>

이런 식의 구조로 만들면 스크린 리더나 웹 소스를 보면 태그만 보아도 이부분이 어디에 위치하며 무슨 의미를 정의하고 있는지 바로 알 수 있습니다.

Semantic Elements in HTML5

<header></header>

제목, 로고(아이콘), 저자 정보 등을 포함합니다.

<nav></nav>

탐색 링크를 정의합니다.

<section></section>

콘텐츠를 주제별로 묶고 싶을 경우 사용

<article></article>

독립적으로 사용할 수 있는 내용을 정의합니다.

<aside></aside>

사이드 바 부분에 메인 내용과 상관없는 광고나 내용들을 정의합니다.

<footer></footer>

웹페이지의 가장 아래부분에 속하며 저자, 저작권, 연락처, 사이트 맵, 위로가기 링크, 관련된 문서등을 정의합니다.

<detalis></details>

추가 세부 정보를 정의하고 싶을 경우 사용합니다. 그리고 기본적으로 보여지는 머리글은 <summary></summary>태그를 이용하여 정의합니다.

<figcaption></figcaption>

<figure></figure> 태그안에 사용하며 이미지에 제목이나 머리말을 정의하고 싶을 경우 사용합니다.

<main></main>

article, aside, footer, header, nav 의 자식으로 들어갈 수 없지만 모두 포함은 가능합니다. 내용은 반복되는 내용이 아닌 무선의 주요한 고유 내용을 포함해야하며, 하나 이상이어서도 안됩니다.

<mark></mark>

텍스트에 형광펜 효과를 주고싶을 경우

<time></time>

time 태그를 이용하여 스크린리더나 검색엔진에서 시간이라고 알려주고 싶을 경우 사용합니다.