Semantic HTML(의미론적인 HTML)

Semantic HTML: 문서의 의미에 맞게, 어프리케이션의 의미에 맞게 HTML을 작성하는 것을 의미함

즉, 각 요소의 의미에 맞게 HTML을 작성해야 하는 것임

 

예를들어, <div>이것은 문장입니다.</div>

<p>이것은 문장입니다.</p>

이와같이, 요소의 의미를 명확하게 하는 것임

 

HTML5 Semantic Tag: 컴퓨터가 정보를 이해하고 논리적인 추론까지 할 수 있는 구조를 만들기 위해 추가된 태그

 

Semantic HTML을 위해 유용한 태그 예시

 

<header>

• 문서의 header를 나타낼 때 사용하고 사이트 로고, 글로벌 링크, 소개 등을 넣음

<nav>

• 문서의 navigation을 나타낼 때 사용하고 보통 메뉴 영역으로 사용함

• 브라우저가 네비게이션 영역을 알 수 있게되면, 검색엔진 색인에 도움을 줄 수 있음

<main>

• 해당 페이지의 main 콘텐츠를 나타냄

• main 요소는 한 페이지에서 한번만 사용 가능함

<section>

• 관심사 그룹에 따라 구획을 구분하기 위해 사용하는 요소

• section요소는 문법상 반드시 <h1>~<h6>태그를 가져야 함

• 섹션의 관심사가 무엇인지 검색로봇에 알려줌

<article>

• 관심사에 따라 글을 작성하기 위해 사용하는 요소

• article 태그 내용이 독립적으로 존재해도 되는 경우에 쓰임

• 반드시 <h1>~<h6>태그를 가져야 함

• article안에 section이 있어도 되고 그 반대도 가능함

<aside>

• 본문 전체 내용과 직접적인 연관성이 없는 분리된 내용을 담을 때 사용함

• 주로 사이드바, 배너광고, 위젯 등으로 이용함

<footer>

• 문서의 footer를 나타낼 때 사용하고 주소나 연락처, 저작권 등을 넣음

• 문서 내에서 한번만 사용되지만, 분리되어있는 section이나 article의 해당 영역에 대한 footer로 사용할 수 있음

HTML5에서 큰 레이아웃 부분을 <div class>를 대체하여 위와 같은 태그를 활용함