HTML5 의미 요소
의미 요소(semantic element)
의미 요소(semantic element)란 그 자체로 의미를 가지고 있는 요소를 가리킵니다.
즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미합니다.
의미 요소가 아닌 div 요소나 span 요소 등은 해당 요소가 무슨 목적으로 사용되었는지 코드를 살펴봐야 알 수 있습니다.
하지만 의미 요소인 table 요소는 코드를 보지 않아도 해당 요소가 표를 만드는 데 사용되었다는 것을 이름만 살펴봐도 바로 알 수 있습니다.
HTML5에서 추가된 의미 요소
HTML5에서 새롭게 추가된 대표적인 의미 요소는 다음과 같습니다.
- header 요소
- nav 요소
- main 요소
- section 요소
- article 요소
- figure와 figcaption 요소
- footer 요소
header 요소
header 요소는 HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의합니다.
헤더(header)란 도입부에 해당하는 콘텐츠(content)를 가지고 있는 부분을 의미합니다.
또한, 한 문서 내에 여러 개의 header 요소가 존재할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML5 Semantic Elements</title>
</head>
<body>
<header>
<h1>전체 문서에 대한 헤더(header)입니다.</h1>
</header>
<section>
<header>
<h2>섹션 부분에 대한 헤더(header)입니다.</h2>
<p>헤더 부분에 들어간 단락입니다.</p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis sapien ut felis lacinia eleifend. Aliquam est lectus, iaculis ultrices fringilla et, sollicitudin nec risus. In pretium metus in risus elementum, sit amet lobortis velit vulputate. Sed non ipsum suscipit, condimentum augue eu, cursus lacus. Nulla mattis metus et sapien consequat euismod. Nunc luctus nibh at dapibus rhoncus. In hac habitasse platea dictumst.
</p>
</section>
</body>
</html>
nav 요소
nav 요소는 HTML 문서 사이를 탐색할 수 있는 링크(link)의 집합을 정의합니다.
nav 요소는 링크의 커다란 집합을 의미하지만, 문서 내의 모든 링크가 nav 요소에 포함되는 것은 아닙니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML5 Semantic Elements</title>
</head>
<body>
<nav>
<a href="/html/html5_element_semantic">의미 요소</a> |
<a href="/html/html5_element_form">Forms 요소</a> |
<a href="/html/html5_element_inputtype">Input 요소</a>
</nav>
<p>문서 내의 링크가 모두 nav 요소에 포함되는 것은 아니에요!</p>
<p>이 링크는 nav 요소에 포함되지 않는 <a href="/html/html5_element_inputattr">Input 요소의 속성</a>
에 관한 링크에요!</p>
</body>
</html>
section 요소
section 요소는 HTML 문서에서 섹션(section) 부분을 정의합니다.
섹션(section)이란 제목을 가지고 있으며, HTML 문서의 전체적인 내용과 관련이 있는 콘텐츠들의 집합을 의미합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML5 Semantic Elements</title>
</head>
<body>
<section>
<h2>섹션(section) 영역입니다.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis sapien ut felis lacinia eleifend. Aliquam est lectus, iaculis ultrices fringilla et, sollicitudin nec risus. In pretium metus in risus elementum, sit amet lobortis velit vulputate. Sed non ipsum suscipit, condimentum augue eu, cursus lacus. Nulla mattis metus et sapien consequat euismod. Nunc luctus nibh at dapibus rhoncus. In hac habitasse platea dictumst.
</p>
</section>
<section>
<h2>또 다른 섹션(section) 영역입니다.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis sapien ut felis lacinia eleifend. Aliquam est lectus, iaculis ultrices fringilla et, sollicitudin nec risus. In pretium metus in risus elementum, sit amet lobortis velit vulputate. Sed non ipsum suscipit, condimentum augue eu, cursus lacus. Nulla mattis metus et sapien consequat euismod. Nunc luctus nibh at dapibus rhoncus. In hac habitasse platea dictumst.
</p>
</section>
</body>
</html>
article 요소
article 요소는 HTML 문서에서 독립적인 하나의 기사(article) 부분을 정의합니다.
article 요소의 내용은 그 자체만으로도 이해가 되어야 하며, 웹 사이트의 나머지 부분과는 별도로 읽을 수 있어야 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML5 Semantic Elements</title>
</head>
<body>
<article>
<h2>기사(article) 영역입니다.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis sapien ut felis lacinia eleifend. Aliquam est lectus, iaculis ultrices fringilla et, sollicitudin nec risus. In pretium metus in risus elementum, sit amet lobortis velit vulputate. Sed non ipsum suscipit, condimentum augue eu, cursus lacus. Nulla mattis metus et sapien consequat euismod. Nunc luctus nibh at dapibus rhoncus. In hac habitasse platea dictumst.
</p>
</article>
<article>
<h2>또 다른 기사(article) 영역입니다.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis sapien ut felis lacinia eleifend. Aliquam est lectus, iaculis ultrices fringilla et, sollicitudin nec risus. In pretium metus in risus elementum, sit amet lobortis velit vulputate. Sed non ipsum suscipit, condimentum augue eu, cursus lacus. Nulla mattis metus et sapien consequat euismod. Nunc luctus nibh at dapibus rhoncus. In hac habitasse platea dictumst.
</p>
</article>
</body>
</html>
figure 요소와 figcaption 요소
책이나 신문 등에 포함되는 이미지 바로 아래에는 해당 이미지를 설명하는 캡션(caption)이 위치하게 됩니다.
HTML5에서는 위와 같은 목적을 위해 figure 요소와 figcaption 요소를 제공하고 있습니다.
figure 요소는 HTML 문서에서 그래픽과 비디오 등의 독립적인 콘텐츠(content)를 정의할 때 사용합니다.
figcaption 요소는 위와 같은 figure 요소를 위한 캡션을 정의할 때 사용합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML5 Semantic Elements</title>
</head>
<body>
<h1>figure 요소와 figcaption 요소</h1>
<figure>
<img src="img_flower.png" alt="flowers" width="350" height="263">
<figcaption>[ 그림 1. 위의 그림은 이쁜 꽃이네요! ]</figcaption>
</figure>
</body>
</html>
footer 요소
footer 요소는 HTML 문서나 섹션(section) 부분에 대한 푸터(footer)을 정의합니다.
HTML 문서의 푸터(footer)에는 일반적으로 사이트의 작성자나 그에 따른 저작권 정보, 연락처 등을 명시합니다.
또한, 한 문서 내에 여러 개의 footer 요소가 존재할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML5 Semantic Elements</title>
</head>
<body>
<footer>
<p>전체 문서에 대한 푸터(footer)입니다.</p>
<p>Copyright 2016. 지은이 all rights reserved.</p>
<p>연락처 : 02-1234-5678</p>
</footer>
</body>
</html>
'IT > Web' 카테고리의 다른 글
| HTML 멀티미디어 (0) | 2020.02.04 |
|---|---|
| HTML5 에서 추가된 input 요소의 타입 및 속성 (0) | 2020.02.04 |
| HTML5 개요 (0) | 2020.01.31 |
| HTML과 XHTML (0) | 2020.01.31 |
| HTML과 자바스크립트 (0) | 2020.01.31 |
댓글