HTML5の文章構造

HTML5の文章構造を解説

HTML5では、記事、余談、ヘッダ、フッダなどを区別するために以下のタグが用意されています。

<section> …一つのセクションであることを示す。
<nav> …ナビゲーションであることを示す。
<article> … 記事であることを示す。
<aside> …余談・補足であることを示す。
<header> …ヘッダであることを示す。
<footer> …フッタであることを示す。

HTML5の文章構造のサンプルソース

HTML5では以前のHTMLとことなり以下のように文章構造を意識した記述が可能となります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<title>タイトル</title>
</head>
<body>

<!-- ページヘッダ //-->
<header>
<h1>このページのヘッダです。</h1>
<nav>
 <ul>
  <li><a href="/">TOP</a></li>
  <li><a href="/html/">HTML</a></li>
  <li><a href="/css/">CSS</a></li>
  <li><a href="/php/">PHP</a></li>
 </ul>
</nav>
</header>

<!-- 記事1 //-->
<article>
 <h1>記事1</h1>
 <p>この記事1の本文です。</p>
 <footer>
  <p>この記事1のフッタです。</p>
  <address>hogehoge@web-dou.com</address>
 </footer>
</article>

<!-- 記事2 //-->
<article>
 <h1>記事2</h1>
 <p>この記事2の本文です。</p>
 <footer>
  <p>この記事2のフッタです。</p>
  <address>hogehoge@web-dou.com</address>
 </footer>
</article>

<!-- 記事3 //-->
<article>
 <h1>記事3</h1>
 <section>
  <h1>記事3-1</h1>
  <p>この記事3-1の本文です。</p>
 </section>
 <section>
  <h1>記事3-2</h1>
  <p>この記事3-2の本文です。</p>
 </section>
 <footer>
  <p>この記事3のフッタです。</p>
  <address>hogehoge@web-dou.com</address>
 </footer>
</article>

<!-- ページフッタ //-->
<footer>
 <p>このページのフッタです。</p>
</footer>

</body>
</html>

asideタグは余談・補足であることを示します。

<p>
本文は普通に書きます。
</p>
<aside>
<p>
余談や補足は aside で囲みます。
</p>
</aside>

navタグはナビゲーションであることを示します。

<nav>
<ul>
<li><a href="/html/">HTML</a></li>
<li><a href="/css/">CSS</a></li>
<li><a href="/php/">PHP</a></li>
</ul>
</nav>

articleタグとsectionタグの使用例。

articleタグは記事であることを示し、sectionタグはセクションであることを示します。

<article>
<section>
<h1>HTML</h1>
<p>HTMLはホームページの文章を書くためのマークアップ言語です。</p>
</section>
<section>
<h1>CSS</h1>
<p>CSSを使用すれば豊かなデザインで表現ができます。</p>
</section>
</article>