HTML、CSSページレイアウト(ページレイアウト)

11555 ワード

Non-semantic Elements

<div><span>は何も教えてくれません.

Semantic Elements

<form> , <table> , <article> ... などの非占有スペースが含まれます.これらの要素は、コンテンツに関する正確な情報を提供します.

Semantic Elementレイアウトページの使用


意味要素は、ページレイアウトを意味的に記述します.また、コードの理解と整理を容易にすることもできます.

<section> Element

  • セクションでは、コンテンツのトピックに基づいてグループ化され、独立したパーティション*が表示されます.主にheadingと一緒に使います.
  • <section>
        <h2>Introduction</h2>
        <p>This document provides a guide to help with the important task of choosing the correct Apple.</p>
    </section>
    
    <section>
        <h2>Criteria</h2>
        <p>There are many different criteria to be considered when choosing an Apple — size, color, firmness, sweetness, tartness...</p>
    </section>
    タイトルは
  • (h 1,h 2...)サブアイテムとして要素を含む方法を使用して、各セッションを区切ります.
  • <section>
      <h2>Heading</h2>
      <img>some image</img>
    </section>
  • のシンプルな造形を目的としている場合は、<div>を使用することをお勧めします.
  • <header> Element

  • ドキュメントまたは一部のヘッダー
  • の1つのドキュメントの複数のタイトルを持つことができます.
  • <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>
    

    <footer> Element

  • ドキュメントまたは一部のフッター
  • は、含まれる要素に関する情報を常に含まなければならない.
  • は、主に文書作成者、著作権情報、使用リンク、連絡先情報などの
  • を含む.
  • の1つのドキュメントに複数のフッターを含めることができます.
  • <footer>
    <p>Posted by: Hege Refsnes</p>
    <p>Contact information: <a href="mailto:[email protected]">
    [email protected]</a>.</p>
    </footer>

    <nav> Element

  • ナビゲーションリンク合計
  • は、すべてのドキュメントのリンクが<nav>にあるわけではありません.<nav>は、重要なブロックのナビゲーションリンクにのみ使用される.
  • <nav>
    <a href="/html/">HTML</a> |
    <a href="/css/">CSS</a> |
    <a href="/js/">JavaScript</a> |
    <a href="/jquery/">jQuery</a>
    </nav>
    

    <aside> Element

  • の位置にあるコンテンツと、他の位置にあるコンテンツ.
  • 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>