HTML 기본 layout

 

HTML5의 새로운 의미 요소

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

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

 

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

 

HTML5 <section> 요소

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

W3C의 HTML5 문서에 따르면 : "섹션은 일반적으로 제목이있는 주제별 콘텐츠 그룹입니다."

홈페이지는 일반적으로 소개, 컨텐츠 및 연락처 정보를 위해 섹션으로 분할 될 수 있습니다.

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

 

HTML5 <article> 요소

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

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

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

• 포럼 게시물
• 블로그 포스트
• 신문 기사

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

 

HTML5 <header> 요소

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

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

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

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

 

HTML5 <footer> 요소

이 <footer>요소는 문서 또는 섹션의 바닥 글을 지정합니다.

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

바닥 글에는 일반적으로 문서 작성자, 저작권 정보, 이용 약관 링크, 연락처 정보 등이 포함됩니다.

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

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

 

HTML5 <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>요소가 (a 사이드 등)에 저장되는 내용을 제외하고 어떤 콘텐츠를 정의한다.

<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> 요소 로 그룹화 할 수 있습니다 .

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

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

 

의미 요소가 필요한 이유

HTML4에서는 개발자가 고유 한 ID / 클래스 이름을 사용하여 머리글, 상단, 하단, 바닥 글, 메뉴, 탐색, 기본, 컨테이너, 내용, 기사, 사이드 바, 상단 탐색 등의 요소를 스타일링했습니다.

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

새로운 HTML5 요소 ( <header> <footer> <nav> <section> <article>)를 사용하면 더 쉬워 질 것입니다.

W3C에 따르면 시맨틱 웹 (Semantic Web)은 "애플리케이션, 기업 및 커뮤니티에서 데이터를 공유하고 재사용 할 수있다"고 말했다.

 

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

HTML5 Semantic Elements