HTML5 태그(요소)

미분류

새로운 HTML5 요소

  • 시맨틱 웹 – HTML5는 더 나은 문서 구조에 대한 새로운 요소를 제공.
  • <div id=”nav”> <div class=”header”> <div id=”footer”>: 대부분의 웹 사이트는 같은 HTML 코드를 포함 navigation, header과 footer 글을 표시 할 수 있습니다.
  • HTML5 웹 페이지의 다른 부분을 정의하기위한 새로운 시맨틱 요소를 제공
    • <article>
    • <aside>
    • <details>
    • <figcaption>
    • <figure>
    • <footer>
    • <header>
    • <main>
    • <mark>
    • <nav>
    • <section>
    • <summary>
    • <time>
    HTML5 시맨틱 요소

<header> 요소

  • 문서 나 섹션 헤더를 지정.

    <body>
  <header>
    <h1>Document Heading - LOGO</h1>
  </header>
</body>
  • <section>
  <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>
</section>

<footer> 요소

  • 문서 나 구역에 대한 바닥 글.
    문서의 저작권 정보의 작성자를 포함 등에 이용 약관, 연락처 정보에 대한 링크등이 올수있다.

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

<nav> 요소

  • 탐색 링크가 있는 섹션.

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

<section> 요소

  • 관계 있는 문서를 분리하는 역할을 함.
    주로, 문서를 다른 주제로 구분짓기 위해 사용됨

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

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

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