文書構造を明確化する際に利用する、代表的な要素をまとめてみました。
ちなみに今はまだ、これらの要素を全て理解できなくても問題ありません。なんとなく、こんなものがあるんだな～程度でOKです。
<section>要素
見出し、段落、章など、文章の塊を示す要素です。
セクション名を表すh1～h6の見出しが必ず必要となります。
また、文書構造のための要素なのでレイアウト目的に使用することはできません。
<section>
<h1>h1テキスト</h1>
<p>テキストテキストテキストテキストテキスト</p>
</section>
<h1>h1テキスト</h1>
<p>テキストテキストテキストテキストテキスト</p>
</section>
<article>要素
例えばブログの記事のように、その文章だけが独立していても意味が通るような箇所に使用する要素です。
[使用例]<article>
<h1>h1テキスト</h1>
<p>テキストテキスト</p>
<section>
<h2>h2テキスト</h2>
<p>テキストテキストテキストテキストテキスト</p>
</section>
</article>
<nav>要素
ナビゲーションを示す要素です。例えば<li>タグを使って表示されているページのメニューや他ページへのリンクなどに使用します。主なリンクに必要であり、すべてのリンクを<nav>で囲む必要はありません。
また、セクションタイトル名（h1やh2など）は必ず必要ではありません。
[使用例]<nav>
<ul>
<li>リンクメニュー</li>
<li>リンクメニュー</li>
<li>リンクメニュー</li>
</ul>
</nav>
<ul>
<li>リンクメニュー</li>
<li>リンクメニュー</li>
<li>リンクメニュー</li>
</ul>
</nav>
<aside>要素
メインコンテンツとはあまり関係のない、もしくは重要ではない箇所を示す要素です。
例えば、サイドナビに配置した他サイトへのリンクやバナー、広告などが該当します。
<aside>
<p>ページの内容とはあまり関係のない、もしくは重要でない内容。バナーや広告、リンク、補足文などが該当します。</p>
</aside>
<p>ページの内容とはあまり関係のない、もしくは重要でない内容。バナーや広告、リンク、補足文などが該当します。</p>
</aside>
その他いろいろ
その他にも様々な要素がありますが、ここでは代表的なものだけをピックアップしてみました。
それでは、次のページでそれぞれの要素の具体的な使用方法について学習していきましょう。
覚えておきたいポイント
メリットが沢山
文書構造がキチンと構築されていると、GoogleやYahooなどの検索エンジンから好まれやすく、またソースコードを編集する際にもメンテナンスしやすくなります。
