HTML5 의 의미 있는 요소
- 이전 페이지 HTML 컴퓨터 코드
- 다음 페이지 HTML5 코드 규약
의미학(고대 그리스에서 비롯)은 언어 의미를 연구하는 것으로 정의됩니다.
의미 요소는 의미를 가진 요소입니다.
의미 요소는 무엇인가요?
의미 요소는 브라우저와 개발자에게 의미를 명확히 설명합니다.
비의미요소 예시: <div> 및 <span> - 내용에 대한 정보를 제공할 수 없습니다.
의미요소 예시: <form>、<table> 및 <img> - 내용을 명확히 정의합니다.
브라우저 지원
| Yes | Yes | Yes | Yes | Yes |
모든 현대 브라우저는 HTML5 의미 요소를 지원합니다.
또한, 고대형 브라우저가 "알 수 없는 요소"를 처리하는 데 "도움"을 줄 수 있습니다.
이 장에서 HTML5 브라우저의 지원에 대해 더 배우세요.
HTML5의 새로운 의미 요소
많은 웹사이트는 이러한 HTML 코드를 포함하고 있습니다: <div id="nav"> <div class="header"> <div id="footer">.
HTML5는 페이지의 다른 부분을 정의하는 새로운 의미 요소를 제공합니다:
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
HTML5 의 의미 있는 요소
HTML5 <section> 요소
<section> 요소는 문서 내의 섹션을 정의합니다.
W3C의 HTML 문서에 따르면: "섹션(section)은 주제가 있는 내용 집합으로, 일반적으로 제목이 있습니다."
웹 홈페이지를 소개, 내용, 연락처 정보 등 섹션으로 나눌 수 있습니다.
예제
<section> <h1>WWF</h1> <p>World Wide Fund for Nature (WWF)는....</p> </section>
HTML5 <article> 요소
<article> 요소는 독립적인 내장 내용을 정의합니다。
문서는 자체 의미를 가지고 있으며, 웹사이트의 다른 내용과 독립적으로 읽을 수 있습니다.
<article> 요소의 적용 시나리오:
- 포럼
- 블로그
- 뉴스
예제
<article> <h1>WWF는 무엇을 합니까?</h1> <p>WWF의 임무는 우리 행성의 자연 환경의 하락을 멈추는 것입니다, 그리고 인간이 자연과 조화롭게 살 수 있는 미래를 만들어 나갑니다.</p> </article>
내장 의미 요소
HTML5 표준에서는 <article> 요소가 완전한 관련 요소 내장 블록으로 정의됩니다.
<section> 요소는 관련 요소 블록으로 정의됩니다.
이 정의를 통해 요소를 내장하는 방법을 결정할 수 있을까요? 아니요, 그렇지 않습니다!
인터넷에서는 <section> 요소가 <article> 요소를 포함한 HTML 페이지, 또한 <article> 요소가 <sections> 요소를 포함한 페이지를 발견할 수 있습니다.
또한 <section> 요소가 <section> 요소를 포함하고, <article> 요소가 <article> 요소를 포함하는 것을 발견할 수 있습니다.
HTML5 <header> 요소
<header> 요소는 문서나 부분에 대한 헤더를 정의합니다。
<header> 요소는 소개적인 내용을 담는 컨테이너로 사용되어야 합니다。
한 문서에 여러 개의 <header> 요소가 있을 수 있습니다。
다음은 한 문서에 대한 헤더를 정의한 예입니다:
예제
<article>
<header>
<h1>WWF는 무엇을 합니까?</h1>
<p>WWF의 임무:</p>
</header>
<p>WWF의 임무는 우리 행성의 자연 환경의 하락을 멈추는 것입니다,
그리고 인간이 자연과 조화롭게 살 수 있는 미래를 만들어 나갑니다.</p>
</article>
HTML5 <footer> 요소
<footer> 요소는 문서나 부분에 대한 푸터를 정의합니다。
<footer> 요소는 포함된 요소에 대한 정보를 제공해야 합니다。
푸터는 일반적으로 문서의 작성자, 저작권 정보, 이용약관 링크, 연락처 정보 등을 포함합니다。
한 문서에서 여러 개의 <footer> 요소를 사용할 수 있습니다。
예제
<footer> <p>게시자: Hege Refsnes</p> <p>연락처 정보: <a href="mailto:someone@example.com"> <a href="mailto:someone@example.com">someone@example.com</a>.</p> </footer>
HTML5 <nav> 요소
<nav> 요소는 탐색 링크 셋을 정의합니다.
<nav> 요소는 대형 탐색 링크 블록을 정의하는 데 목적이 있지만, 문서의 모든 링크가 <nav> 요소에 위치해야 하는 것은 아닙니다!
예제
<nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav>
HTML5 <aside> 요소
<aside> 요소는 페이지 주요 내용 이외의 일부 내용(예: 사이드바)입니다.
aside 내용은 주변 내용과 관련되어야 합니다.
예제
<p>My family and I visited The Epcot center this summer.</p> <aside> <h4>Epcot Center</h4> <p>The Epcot Center is a theme park in Disney World, Florida.</p> </aside>
HTML5 <figure>과 <figcaption> 요소
서적과 신문에서 이미지와 함께 사용되는 제목은 매우 일반적입니다.
제목(캡션)의 역할은 이미지에 시각적인 설명을 추가하는 것입니다.
HTML5를 통해 이미지와 제목이 결합될 수 있습니다 <figure> 요소에서:
예제
<figure> <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228"> <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption> </figure>
<img> 요소는 이미지를 정의합니다,<figcaption> 요소는 제목을 정의합니다.
왜 HTML5 요소를 사용합니까?
HTML4를 사용하는 경우, 개발자는 사이트 요소 스타일을 설정하는 데 자신이 좋아하는 속성 이름을 사용합니다:
헤더, 상단, 하단, 푸터, 메뉴, 탐색, 메인, 컨테이너, 컨텐트, 기사, 사이드바, 상단 탐색, ...
그렇다면, 브라우저는 올바른 웹 페이지 내용을 인식할 수 없습니다.
그리고 HTML5 요소를 통해 <header> <footer> <nav> <section> <article>와 같이 이 문제를 해결할 수 있습니다.
W3C에 따르면, 의미 네트워크:
“애플리케이션, 기업, 그룹 간 데이터 공유 및 재사용을 허용합니다.”
HTML5 의미 있는 요소
아래는 알파벳順으로 정리된 HTML5 새로운 의미 있는 요소들입니다.
이 링크들은 완전한 HTML 참조 매뉴얼을 가리킵니다.
| 태그 | 설명 |
|---|---|
| <article> | 기사를 정의합니다. |
| <aside> | 페이지 내용 이외의 내용을 정의합니다. |
| <details> | 사용자가 확인하거나 숨기는 추가 상세 정보를 정의합니다. |
| <figcaption> | <figure> 요소의 제목을 정의합니다. |
| <figure> | 그래픽, 차트, 사진, 코드 목록 등을 포함한 내용을 정의합니다. |
| <footer> | 문서나 섹션의 푸터를 정의합니다. |
| <header> | 문서나 섹션의 헤더를 정의합니다. |
| <main> | 문서의 주 내용을 정의합니다. |
| <mark> | 중요하거나 강조된 텍스트를 정의합니다. |
| <nav> | 나ビ게이션 링크를 정의합니다. |
| <section> | 문서에서의 섹션을 정의합니다. |
| <summary> | <details> 요소의 보이는 제목을 정의합니다. |
| <time> | 날짜/시간을 정의합니다. |
- 이전 페이지 HTML 컴퓨터 코드
- 다음 페이지 HTML5 코드 규약
