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 <section> 요소]

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

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

홈 페이지는 소개, 내용 및 연락처 정보를 위해 일반적으로 섹션으로 나눌 수 있습니다.
예
<섹션>
  <h1> WWF </ h1>
  <p> 세계 자연 보전 기금 (WWF)은 .... </ p>
</ section>

[HTML5 <article> 요소]

<article> 요소는 독립적이고 독립적 인 내용을 지정합니다.

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

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

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

예
<article>
  <h1> WWF는 무엇을합니까? </ h1>
  <p> WWF의 사명은 지구의 자연 환경이 악화되는 것을 막는 것입니다.
  인간이 자연과 조화를 이루며 살 수있는 미래를 건설하십시오. </ p>
</ article>
<section> 또는 그 반대의 <article> 중첩

<article> 요소는 독립적이고 독립적 인 내용을 지정합니다.

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

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

따라서 인터넷에서 <article> 요소를 포함하는 <section> 요소와 <sections> 요소를 포함하는 <article> 요소가있는 HTML 페이지를 찾을 수 있습니다.

<section> 요소를 포함하는 <section> 요소와 <article> 요소를 포함하는 <article> 요소가있는 페이지도 있습니다.

신문 기사의 예 : 스포츠 섹션의 스포츠 기사에는 각 기사의 기술 섹션이있을 수 있습니다.