html 시맨틱 요소란?

HTML의 최신 버전인 HTML5에서는 시맨틱 웹(semantic web)이 중요시 되면서 여러 시맨틱 요소(semantic element)가 새롭게 만들어졌습니다.

시맨틱이란 ‘의미가 있는, 의미론적인'이라고 해석할 수 있습니다.

다시 말해, 의미를 가진 요소를 사용하는 방식을 추구하기 시작했습니다.

최상위 제목(top level heading)을 표현할 때 사용하는 요소인 <h1> 요소를 사용할 경우, 브라우저가 큰 폰트 사이즈를 적용할 뿐 아니라, 위아래로 간격을 주어 제목처럼 보이도록 합니다.

이와 같은 효과는 <div> 요소, <span> 요소에 CSS 속성을 추가하여 <h1> 요소와 똑같이 보이도록 할 수 있습니다.

그러나 div나 span태그에는 특별한 의미가 담겨있는 태그는 아니기 때문에 시멘틱 태그는 아닙니다

시멘틱 태그는 즉 태그에 의미가 있는 요소들을 시멘틱 태그라고 합니다

시맨틱 요소를 사용해야 하는 이유

시멘틱 태그를 사용해야 하는 이유는 태그들마다 각각의 의미들이 있어 개발자들이 보기에 가독성이 좋아집니다

또한 검색 엔진 효율이 좋아집니다.

네이버, 구글 등은 모두 고유한 검색엔진을 보유하고 있습니다.

키워드를 입력하고 검색을 하면 각 웹 페이지를 방문하여 그 키워드를 포함하고 있는지 확인하여 결과를 보여 줍니다.

그런데 검색 엔진이 웹페이지들을 방문할 때, 시맨틱 요소를 중요한 키워드로 고려합니다.

시맨틱 요소에 담긴 의미에 따라 검색 결과가 상위 노출이 결정될 수 있습니다

예시)

<header>태그 = 페이지나 섹션의 가장 윗부분에 위치하며 보통은 사이트 제목이 들어갑니다

<footer>태그 = 페이지나 해당 파트의 가장 아랫부분에 위치하며 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용합니다.

HTML5에 추가된 시멘틱 요소

시멘틱 요소설명

<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 요소와는 달리 긴 단어가 화면의 맨 끝에 오면 상황에 따라 줄 바꿈 할 곳을 미리 나타낼 때 사용한다.

header 요소

header 요소는 HTML 페이지나 섹션(section) 부분에 대한 헤더(header)를 정의합니다.

헤더(header)란? 일반적으로 어떤 것에 앞에 나오는 것으로서, 각 페이지의 맨 위에 출력되는 텍스트나 이미지등의 조합입니다.

한 페이지 내에 여러 개의 header 요소가 존재할 수 있습니다

<header>
    <h1>전체 문서에 대한 헤더(header)입니다.</h1>
</header>
...
<section>
    <header>
        <h2>섹션 부분에 대한 헤더(header)입니다.</h2>
        <p>헤더 부분에 들어간 단락입니다.</p>
    </header>
</section>

nav 요소

nav 요소는 HTML 문서 사이를 탐색할 수 있는 링크(link)의 집합을 정의합니다

nav 요소는 링크의 커다란 집합을 의미하지만, 문서 내의 모든 링크가 nav 요소에 포함되는 것은 아닙니다

<nav>
    <a href="/html/html5_element_semantic">의미 요소</a> |
    <a href="/htmlhtml5_element_form/">Forms 요소</a> |
    <a href="/html/html5_element_inputtype">Input 요소</a>
</nav>
...
<p>이 링크는 nav 요소에 포함되지 않는 <a href="/html/html5_element_inputattr">Input 속성</a>에 관한 링크에요!</p>

section 요소

section 요소는 HTML 문서에서 섹션(section) 부분을 정의합니다

섹션(section)이란 제목을 가지고 있으며, HTML 문서의 전체적인 내용과 관련이 있는 콘텐츠들의 집합을 의미합니다

<section>
    <h2>섹션(section) 영역입니다.</h2>
    <p>Lorem ipsum</p>
</section>

article 요소

article 요소는 HTML 문서에서 독립적인 하나의 기사(article) 부분을 정의합니다

.article 요소의 내용은 그 자체만으로도 이해가 되어야 하며, 웹 사이트의 나머지 부분과는 별도로 읽을 수 있어야 합니다

<article>
    <h2>기사(article) 영역입니다.</h2>
    <p>Lorem ipsum</p>
</article>

위의 두 예제를 살펴보면 section 요소와 article 요소 간의 별다른 차이점을 발견할 수 없습니다

실제로도 두 요소 간의 쓰임에 있어 큰 차이를 보이지는 않습니다

.
대체로 section 요소는 HTML 문서의 전체적인 내용에 포함되며, article 요소는 문서의 전체적인 내용과는 별도의 독립적인 내용이 들어갈 때 사용하면 됩니다

figure 요소와 figcaption 요소

책이나 신문 등에 포함되는 이미지 바로 아래에는 해당 이미지를 설명하는 캡션(caption)이 위치하게 됩니다

HTML5에서는 위와 같은 목적을 위해 figure 요소와 figcaption 요소를 제공하고 있습니다

figure 요소는 HTML 문서에서 그래픽과 비디오 등의 독립적인 콘텐츠(content)를 정의할 때 사용합니다

figcaption 요소는 위와 같은 figure 요소를 위한 캡션을 정의할 때 사용합니다

<figure>
    <img src="/examples/images/img_flower.png" alt="flowers" width="350" height="263">
    <figcaption>[ 그림 1. 위의 그림은 이쁜 꽃이네요! ]</figcaption>
</figure>

footer 요소

footer 요소는 HTML 문서나 섹션(section) 부분에 대한 푸터(footer)을 정의합니다

HTML 문서의 푸터(footer)에는 일반적으로 사이트의 작성자나 그에 따른 저작권 정보, 연락처 등을 명시합니다
또한, 한 문서 내에 여러 개의 footer 요소가 존재할 수 있습니다.

예제

<footer>
    <p>전체 문서에 대한 푸터(footer)입니다.</p>
    <p>Copyright 2016. 지은이 all rights reserved.</p>
    <p>연락처 : 02-1234-5678</p>
</footer>