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

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>