現在、HTML文書は主にdiv要素を使用して構造化されています。これらのコンテナのフォーマットと配置は通常CSSで行われます。スクリーンリーダーなどのソフトウェアにとって、これは意味のあるコンテンツを認識できないため、無用です。これは新しい構造化要素によって変わることになります。
ここで重要な新要素の2つは、sectionとarticleであり、このチュートリアルでは重点的に取り上げます。
記事をマークアップする
article要素を使用すると、テキスト（フォーラムの投稿、新聞記事など）を記事としてマークアップできます。次の例は、典型的な記事の定義を示しています。
<article> <h1>Web-Apps erstellen (Teil 09): jQuery mobile (1)</h1> <p>jQueryは疑いなく最も有名なJavaScriptフレームワークの1つです。したがって、「伝統的な」ウェブサイトではjQueryが既に何千回も使用されています ...</p> ... </article>
article要素のおかげで、コンテンツを意味論的に構造化することができます。
これがどのように見えるかは、ブログの例を見ればよくわかります。
<article>
<header>
<h1>Web-Apps erstellen (Teil 09): jQuery mobile (1)</h1>
<p>Veröffentlicht am: <time pubdate="pubdate">24.05.2014</time></p>
</header>
<p>jQueryは疑いなく最も有名なJavaScriptフレームワークの1つです。したがって、「伝統的な」ウェブサイトではjQueryが既に何千回も使用されています ...</p>
...
<footer>
<p><small>Copyright by PSD-Tutorials.de</small></p>
</footer>
</article>
この例では、article要素の内部で典型的なヘッダー、メイン、フッター構造が作成されています。この種の構造はブログで非常によく見られるものです。
セクションを作成する
section要素に進んでいきます。section要素はページをさまざまなセクションに分割します。これにはセクション、章、タブなどが含まれます。sectionを使用すると、導入および最新情報のようなエリアを論理的に分離することができます。sectionは実際のコンテンツ上の違いに基づいてコンテンツを分割します。sectionとdivの違いについては、このチュートリアルの最後で改めて説明します。
次の例は典型的なブログ構造を示しています。ただし、この構造には多くのブログで実際に必要とされる要素が含まれています。それは、コメントセクションです。このコメントセクションはsection要素内で定義されています。そして、section領域内の個々のコメントはそれぞれarticle要素で囲まれています。
<article>
<header>
<h1>Web-Apps erstellen (Teil 09): jQuery mobile (1)</h1>
<p>Veröffentlicht am: <time pubdate="pubdate">24.05.2014</time></p>
</header>
<p>jQueryは疑いなく最も有名なJavaScriptフレームワークの1つです。したがって、「伝統的な」ウェブサイトではjQueryが既に何千回も使用されています...</p>
...
<section>
<h2>Kommentare</h2>
<article>
<header>
<h3>Kommentiert von: Newsfriend</h3>
<p><time pubdate datetime="2024-10-05T20:10-07:00">Vor einer Stunde</time></p>
</header>
<p>Danke für das Tutorial!</p>
</article>
<article>
<header>
<h3>Kommentiert von: Becker</h3>
<p><time pubdate datetime="2024-10-05T20:10-07:00">Vor zwei Stunden</time></p>
</header>
<p>Spitze! Das hilft mir weiter.</p>
</article>
</section>
</article>ここでもう一度注意しますが、header、footerなどの要素については、この場でも最後まで詳しく説明します。こうした要素により、コンテンツをヘッダーとフッターに分割することが可能になり、ドキュメントをより論理的に構造化できます。
別の例では、articleおよびsection要素の組み合わせをさらに明確にしています。section要素を使用して、記事を論理的なコンテンツ領域に分割し、各々に独自の見出しを持たせることが可能です。
<article>
<h1>App-Entwicklung</h1>
<p>Hier erfahrt ihr, wie sich Web-Apps erstellen lassen.</p>
<section>
<h2>Web-Apps erstellen (Teil 09): jQuery mobile (1)</h2>
<p>jQueryは疑いなく最も有名なJavaScriptフレームワークの1つです。</p>
</section>
<section>
<h2>Web-Apps erstellen (Teil 08): Der Schnelleinstieg in jQuery</h2>
<p>JavaScriptはウェブサイトにとって便利なものであり、そこから様々な興味深いことができます。</p>
</section>
</article>
また、section要素の内部でarticle要素を定義することもできます。これは、先に示したようなコメントセクションであるなど、一般的な例です。ブログで扱われるトピック領域にセクションを細分化することも考えられます。
これについても適切な例を示します：
<section>
<h1>アプリ開発</h1>
<article>
<h2>Webアプリの作成（Part 09）：jQuery mobile（1）</h2>
<p>jQueryは間違いなく最も有名なJavaScriptフレームワークの1つです。</p>
</article>
<article>
<h2>Webアプリの作成（Part 08）：jQueryのクイックスタート</h2>
<p>JavaScriptはウェブページにとって素晴らしいものです。なぜなら、さまざまな面白いことができるからです。</p>
</article>
</section>
また、セクション要素内に他のsection要素を含めることが可能です。ネストも許可されています。以下に例を示します：
<section>
<h1>PSD-Tutorials.de</h1>
<section>
<h2>ようこそ</h2>
<p>私たちは喜んでいます...</p>
</section>
<section>
<h2>チュートリアル</h2>
<p>こちらが最新のチュートリアルです...</p>
</section>
<aside>
<p>連絡先</p>
</aside>
</section>
<footer>
<p>(c) 2014 PSD-Tutorials.de</p>
</footer>
このようなセクションの入れ子構造は、次の構造を作成します：
1. PSD-Tutorials.de
1.1 ようこそ
1.2 チュートリアル
1.3 連絡先
- (c) 2014 PSD-Tutorials.de
このような構造化は可能です。
div, articleおよびsectionの違い
div, articleおよびsectionの区別を理解するのは確かに簡単ではありません。実際、article要素は主にブログポストの構造化に使用されるよう定義されています。section要素は基本的にarticleの下のレベルに配置されています。さらに、section要素内では常に見出しを定義する必要があります。実際に見出しが定義されていなくても、当該要素内で理論的には見出しを指定できるべきです。div要素はHTML5でも決して非推奨ではなく、引き続き使用されるべきです。たとえば、要素をまとめる必要がある場合には常に役立ちます。
最後に、ここまで紹介した要素の視覚的影響に関する注意も再度付け加えます。実際、対応するフォーマットにはCSSが必要です。なぜならば、示された要素を通常使用してもブラウザには何の効果も及ぼさないからです。ここでは基本的にコンテンツを意味論的に構造化しています。見た目に関連するすべてはスタイルシートで管理する必要があります。
