HTML5 의미 론적 요소(HTML5 Semantic Elements)

Semantics is the study of the meanings of words and phrases in a language.

시맨틱 스 (semantics)는 언어로 된 단어와 어구의 의미에 대한 연구입니다.

Semantic elements = elements with a meaning.

의미 론적 요소 = 의미가있는 요소.

---

What are Semantic Elements?

의미 론적 요소 란 무엇인가?

A semantic element clearly describes its meaning to both the browser and the developer.

의미 론적 요소는 브라우저와 개발자 모두에게 의미를 명확하게 설명합니다.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

비 의미 론적 요소의 예 : <div>and <span>- 내용에 관해 아무것도 말하지 않는다.

Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

의미 론적 요소의 예 : <form>,, <table>및 <article>- 내용을 명확하게 정의합니다.

---

Browser Support

브라우저 지원

Yes	Yes	Yes	Yes	Yes

HTML5 semantic elements are supported in all modern browsers.

HTML5 의미 론적 요소는 모든 최신 브라우저에서 지원됩니다.

In addition, you can "teach" older browsers how to handle "unknown elements".

또한 구형 브라우저에 "알 수없는 요소"를 처리하는 방법을 "가르 칠"수 있습니다.

Read about it in HTML5 Browser Support.

HTML5 브라우저 지원 에서 읽어보십시오 .

---

New Semantic Elements in HTML5

Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div id="footer">

to indicate navigation, header, and footer.

많은 웹 사이트에는 탐색, 머리말 및 꼬리말을 나타내는 <div id = "nav"> <div class = "header"> <div id = "footer">와 같은 HTML 코드가 포함되어 있습니다 .

HTML5 offers new semantic elements to define different parts of a web page:  

HTML5는 웹 페이지의 다른 부분을 정의하는 새로운 의미 요소를 제공합니다.  

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

---

HTML5 <section> Element

HTML5 <section> 요소

The <section> element defines a section in a document.

<section>요소는 문서의 섹션을 정의합니다.

According to W3C's HTML5 documentation: "A section is a thematic grouping of content, typically with a heading."

W3C의 HTML5 문서에 따르면 "섹션은 일반적으로 제목이 붙은 주제별 그룹화입니다."

A home page could normally be split into sections for introduction, content, and contact information.

홈 페이지는 일반적으로 소개, 내용 및 연락처 정보를 위해 섹션으로 나눌 수 있습니다.

Example

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

Try it Yourself »

---

HTML5 <article> Element

HTML5 <article> 요소

The <article> element specifies independent, self-contained content.

이 <article>요소는 독립적이고 독립적 인 콘텐츠를 지정합니다.

An article should make sense on its own, and it should be possible to read it independently from the rest of the web site.

기사는 독자적으로 이해해야하며 나머지 웹 사이트와 독립적으로 기사를 읽을 수 있어야합니다.

Examples of where an <article> element can be used:

<article>요소를 사용할 수있는 위치의 예 :

• 포럼 게시물(Forum post)
• 블로그 게시물(Blog post)
• 신문 기사(Newspaper article)

Example

<article>
  <h1>What Does WWF Do?</h1>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

Try it Yourself »

---

Nesting <article> in <section> or Vice Versa?

<section> 또는 그 반대의 <article> 중첩

The<article> element specifies independent, self-contained content.

이 <article> 요소는 독립적이고 독립적 인 콘텐츠를 지정합니다.

The <section> element defines section in a document.

<section>요소는 문서의 섹션을 정의합니다.

Can we use the definitions to decide how to nest those elements? No, we cannot!

정의를 사용하여 요소를 중첩하는 방법을 결정할 수 있습니까? 아니야 우리는 할 수 없어!

So, on the Internet, you will find HTML pages with <section> elements containing <article> elements, and <article> elements containing <section> elements.

그래서, 인터넷에서, 당신과 함께 HTML 페이지 찾을 <section>포함하는 요소 <article>요소 및 <article>요소를 포함한 <section>요소.

You will also find pages with <section> elements containing <section> elements, and <article> elements containing <article> elements.

또한 포함 된 페이지 찾을 <section>포함하는 요소 <section> 요소 및 <article>요소를 포함한 <article>요소.

Example for a newspaper: The sport <article> in the sport section, may have a technical section in each <article>.

신문에 대한 예 : <article>스포츠 섹션 의 스포츠 에는 각각 기술 섹션 이있을 수 있습니다 <article>.

---

HTML5 <header> Element

HTML5 <header> 요소

The <header> element specifies a header for a document or section.

<header>요소는 문서 또는 섹션 헤더를 지정한다.

The <header> element should be used as a container for introductory content.

<header>요소는 입문 콘텐츠에 대한 컨테이너로 사용되어야한다.

You can have several <header> elements in one document.

<header>하나의 문서에 여러 요소 가있을 수 있습니다 .

The following example defines a header for an article:

다음 예제에서는 아티클의 머리글을 정의합니다.

Example

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

Try it Yourself »

---

HTML5 <footer> Element

HTML5 <footer> 요소

The <footer> element specifies a footer for a document or section.

<footer>요소는 문서 나 구역의 바닥 글을 지정합니다.

A <footer> element should contain information about its containing element.

<footer>요소는 포함 된 요소에 대한 정보를 포함해야합니다.

A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.

바닥 글에는 대개 문서 작성자, 저작권 정보, 사용 약관 링크, 연락처 정보 등이 포함됩니다.

You may have several <footer> elements in one document.

<footer>한 문서에 여러 요소 가있을 수 있습니다 .

Example

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>

Try it Yourself »

---

HTML5 <nav> Element

HTML5 <nav> 요소

The <nav> element defines a set of navigation links.

이 <nav>요소는 탐색 링크 집합을 정의합니다.

Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links.

문서의 모든 링크가 <nav>요소 내부에 있어야하는 것은 아닙니다 . 이 <nav>요소는 탐색 링크의 주요 블록에만 사용됩니다.

Example

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

Try it Yourself »

---

HTML5 <aside> Element

HTML5 <aside> 요소

The <aside> element defines some content aside from the content it is placed in (like a sidebar).

이 <aside>요소는 사이드 바처럼 배치 된 내용을 제외하고 일부 내용을 정의합니다.

The <aside> content should be related to the surrounding content.

<aside>콘텐츠는 주위의 내용과 관련되어야한다.

Example

<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>

Try it Yourself »

---

HTML5 <figure> and <figcaption> Elements

HTML5 <figure> 및 <figcaption> 요소

The purpose of a figure caption is to add a visual explanation to an image.

그림 캡션의 목적은 이미지에 시각적 인 설명을 추가하는 것입니다.

In HTML5, an image and a caption can be grouped together in a <figure> element:

HTML5에서 요소에 이미지와 캡션을 함께 그룹화 할 수 있습니다 <figure> .

Example

<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>

Try it Yourself »

The <img> element defines the image, the <figcaption> element defines the caption.

<img>요소는 이미지를 정의하는 <figcaption> 요소는 캡션을 정의한다.

---

Why Semantic Elements?

왜 의미 론적 요소인가?

With HTML4, developers used their own id/class names to style elements: header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, etc.

HTML4에서는 개발자가 머리글, 위쪽, 아래쪽, 꼬리말, 메뉴, 탐색, 기본, 컨테이너, 내용, 기사, 사이드 바, topnav 등의 요소 스타일에 고유 한 ID / 클래스 이름을 사용했습니다.

This made it impossible for search engines to identify the correct web page content.

이로 인해 검색 엔진이 올바른 웹 페이지 콘텐츠를 식별 할 수 없었습니다.

With the new HTML5 elements (<header> <footer> <nav> <section> <article>), this will become easier.

새로운 HTML5 요소 ( <header> <footer> <nav> <section> <article>)를 사용하면이 작업이 더욱 쉬워집니다.

According to the W3C, a Semantic Web: "Allows data to be shared and reused across applications, enterprises, and communities."

W3C에 따르면 시맨틱 웹 (Semantic Web)은 "응용 프로그램, 기업 및 커뮤니티에서 데이터를 공유하고 재사용 할 수 있습니다."

---

Semantic Elements in HTML5

HTML5의 의미 론적 요소들

Below is an alphabetical list of the new semantic elements in HTML5.

다음은 HTML5의 새로운 의미 요소 알파벳순 목록입니다.

The links go to our complete HTML5 Reference.

링크는 Google의 전체 HTML5 참조 로 이동합니다 .

Tag	Description
<article>	Defines an article 기사 정의
<aside>	Defines content aside from the page content 페이지 콘텐츠를 제외하고 콘텐츠를 정의합니다.
<details>	Defines additional details that the user can view or hide 사용자가 보거나 숨길 수있는 추가 세부 정보를 정의합니다.
<figcaption>	Defines a caption for a <figure> element <figure> 요소에 대한 캡션을 정의합니다.
<figure>	Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함 된 콘텐츠를 지정합니다.
<footer>	Defines a footer for a document or section 문서 또는 섹션에 대한 바닥 글을 정의합니다.
<header>	Specifies a header for a document or section 문서 또는 섹션의 헤더를 지정합니다.
<main>	Specifies the main content of a document 문서의 주요 내용을 지정합니다.
<mark>	Defines marked/highlighted text 강조 표시된 텍스트를 정의합니다.
<nav>	Defines navigation links 탐색 링크 정의
<section>	Defines a section in a document 문서의 섹션을 정의합니다.
<summary>	Defines a visible heading for a <details> element <details> 요소에 대한 눈에 보이는 제목을 정의합니다.
<time>	Defines a date/time 날짜 / 시간을 정의합니다.

---

출처 : https://www.w3schools.com/html/html5_semantic_elements.asp