HTML Semantics

이 글은 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다.

문제가 있거나 수정이 필요한 부분은 댓글로 알려주시면 감사하겠습니다.

---

HTML Semantics

semantic이란 코드 조각의 의미입니다. 다시 말해 해당 코드의 목적이나 역할을 뜻합니다.

Semantic Element를 사용하여 HTML을 작성하면 아래와 같은 이점이 있습니다.

• SEO 최적화 - 검색엔진이 중요한 태그(ex. header)를 알기 쉽다.
• 접근성 강화 - 시각장애인이 화면 판독기로 페이지 탐색 시, 화면 판독기가 마크업을 푯말로 사용할 수 있다.
• 디버깅 용이성 증가 - 코드의 의미를 이해하기 쉽다.

Semantic Element 종류

<header>

문서 혹은 본문 내부의 제목이나 로고, 저작 정보 등 메타 정보를 표기합니다.

<!-- 문서의 header -->
<header>
	<h1>HTML Semantic Study</h1>
	<img src="semantic_logo.svg" alt="semantic logo">
</header>

<!-- 본문 내부의 header -->
<article>
	<header>
		<h1>Why use HTML Semantics?</h1>
	</header>
	<p>somthing good contents...</p>
</article>

<nav>

페이지 전환, 로그인 등 사이트의 공통 기능을 갖는 영역입니다. ex) 메뉴, 목차

 

<footer>

가장 가까운 section의 정보, 혹은 페이지에 관련한 회사 정보, 작성자 정보, 저작권 정보 등 부가 정보를 표기합니다.

 

<main>

문서의 본문으로 주요 내용을 표기합니다.

문서 당 1개만 최상위에 작성합니다(article, aside, header, footer 등의 하위 요소로 작성하지 않습니다).

 

<article>

문서 내부에 독립적으로 구분할 수 있는 파트입니다.

 

<section>

문서 내부에서 구획을 구분하는 파트로 이것 이외에 적절한 semantic이 없을 경우 사용합니다.

일반적으로 제목을 포함합니다.

 

→ 구획을 나누는 용도에는 기본적으로 section을 사용하고, 만약 나눠진 구역이 외부와 독립되는 것이 나은 구획이라면 article을 고민해 볼 수 있습니다. section 내부에 article을 넣거나, 반대로 article 내부에 section을 넣을 수 있습니다.

 

<aside>

본문과 간접적으로 연관된 내용을 포함합니다.

인용문, 사이드바, 광고 등 주요 내용과 직접적인 연관이 없는 경우에 사용합니다.

 

<dialog> [참고]

dialog box나 상호작용하는 컴포넌트에 사용합니다.

form 태그의 method="dialog"를 사용하면 submit시 close 되는 고급 기능이 제공됩니다.

 

이외에도 details, summary, figure, figcaption, time, form 등이 있습니다.

---

참고자료

• HTML elements reference
• [HTML 바로 알기] Semantic Web을 위한 Semantic Elements
• HTML 5.1 2nd Edition