それでは、まずはブロックレベル要素から解説します。
ブロックレベル要素は非常に種類が多く、よく使うタグからあまり使わないタグまで用意されています。
全て覚えることができれば完璧なのですが、実際にそれら全てを使う機会はあまりありません。
そこで、この記事ではよく使うタグや、使う頻度は少なくても覚えておくべきタグに絞って説明していきます。
絞ると言っても、HTMLを構築するために必要な部分はほとんどカバーできるよう解説しています。
ブロックレベル要素
div要素
<div id="main" class="left-contents"> <!-- この中に様々な要素を詰め込み、ひとまとまりの区画として定義します。 --> </div>
div要素とは、大きな範囲をひとまとまりの区画として指定する要素です。
「div」とは「division」の略で、区画を意味します。
このdiv要素で囲んだ部分を大きな区画として定義します。
div要素という大きなブロックを基盤として、ページ全体を構成していきます。
h1～h6要素
<h1>ウェブサイトの作り方</h1> <h2>HTMLの書き方</h2> <h3>ブロックレベル要素について</h3> <h3>インライン要素について</h3> <h2>CSSの書き方</h2>
h1要素、h2要素、h3要素、h4要素、h5要素、h6要素とは、見出しを指定する要素です。
h1要素は大見出し、h2要素は中見出し、h3要素は小見出し、と数字の順番に大きい見出しとして扱っていきます。
見出しの使い方について、明確な使い方のルールは決まっておりません。
「絶対にこう書かなければいけない」というものはないので、分かりやすいように使ってください。
簡単な決まり事としては、「h1要素から始める」「途中の見出しレベルを飛ばさない」ということがあるので、順番に書いていけば問題ありません。
例のように、途中から前の見出しレベルに戻っても、その後また数字の順番に書いていけばエラーは出ません。
p要素
<h2>HTMLの書き方</h2> <p>HTMLの詳しい書き方について解説していきます。<br /> まずはメモ帳を開いてみましょう。</p>
p要素とは、段落を指定する要素です。
国語の教科書の段落を思い出すと分かりやすいでしょうか。
段落はひとかたまりの文章のことですので、まとまった文章をp要素で囲みます。
段落内で改行したい場合は、br要素というインライン要素を使います。
インライン要素については、次の記事で詳しく説明します。
blockquote要素
<h3>マークアップの参考</h3> <p>p要素を記述するには、他サイト様の下記解説を参考にしてみてください。</p> <blockquote cite="http://www.example.com/test.html"> <p>p要素はひとまとまりの段落を指定します。</p> </blockquote>
この要素は、引用文として指定する文章を囲みます。
他のサイト等から文章を引用する場合はこの要素で囲み、cite属性に引用元のURLを記載します。
blockquote要素はあくまでも引用範囲を指定するものなので、中身はしっかりとp要素などでマークアップしてください。
順不同リスト
<h3>ブロックレベル要素</h3> <p>以下にブロックレベル要素を列挙します。</p> <ul> <li>div要素</li> <li>h1～h6要素</li> <li>p要素</li> <li>blockquote要素</li> </ul>
ul要素とli要素を使って、順不同のリストを指定します。
特に順番が決まっていないものを列挙する際に使用します。
まずはul要素で全体を囲み、各項目をli要素で記載します。
li要素の中に更にul要素（リスト）を入れて、入れ子で記載することもできます。
順序リスト
<h2>HTMLの記載の手順</h2> <ol> <li>メモ帳を開く</li> <li>ソースコードを記載する</li> <li>文字コードをUTF-8に指定し、拡張子をhtmlとして保存する</li> </ol>
ol要素とli要素を使って、順序リストを指定します。
こちらは、順番が決まっているものを列挙する際に使用します。
順不同リストとの記載の違いは、ul要素かol要素かの違いのみです。
定義リスト
<dl> <dt>h1～h6要素</dt> <dd>見出しの項目を指定します。</dd> <dt>p要素</dt> <dd>ひとまとまりの段落を指定します。</dd> <dl>
定義リストでは、「用語」と「説明」をそれぞれセットで記載します。
まずは全体をdl要素で囲み、「用語」をdt要素で記載し、「説明」をdd要素で記載します。
必ずしも用語の説明だけに使うのではなく、それぞれが関係する項目の場合にも使うことができます。（役職と名前など）
一覧表
<table summary="各要素の説明表です。"> <tr><!-- ここが1行目 --> <th>要素名</th><th>要素の説明</th> </tr> <tr><!-- ここが2行目 --> <td>h1～h6要素</td><td>各種見出し</td> </tr> <tr><!-- ここが3行目 --> <td>p要素</td><td>ひとまとまりの段落</td> </tr> </table>
場合によっては、文字の羅列よりも一覧表としてまとめたほうが見やすいコンテンツもあります。
その際に、table要素を使って表として定義します。
表の各項目のことを「セル」と呼びます。
table要素で全体を囲み、tr要素で横方向の行、th要素やtd要素でセルを記載します。
th要素は「見出しセル」、td要素は「通常セル」として扱われます。
table要素のsummary属性には、その表の概要文を記載します。
より詳細に分類する書き方もありますが、そちらは更に複雑な書き方になります。
まずは基本的な表のマークアップを覚えてからの方が良いでしょう。
hr要素
<p>この下に水平線を表示</p> <hr /><!-- この部分が水平線 --> <p>この上に水平線を表示</p>
hr要素は、その部分に区切りを示す水平線を表示します。
基本的に、区切ったり線を表示したりするデザインの部分はCSSで対応する部分ですが、汎用的にこのタグを利用する場合もあります。
div要素などで範囲を決めていけば、おのずと区切りが明確になってくるので、しっかりと構造を組み立てていけばあまり利用する機会はないかもしれません。
address要素
<address>Copyright © 2010-2015 サイト名 All Rights Reserved.</address>
このaddress要素には、フッター用の著作権表示を記入します。
サイト名ではなく、所有者や制作者の氏名を記入する場合もあります。
この表示は、サイト内の全てのコンテンツの著作権は、そのサイト（もしくは人）に帰属するという意味です。
これで大まかなブロックレベル要素は終わりです。
次回は、メールフォームやお問い合わせフォームなどの、フォーム作成用のタグについて解説していきます。
フォーム作成用のタグもブロックレベル要素、インライン要素があるのですが、フォーム用はフォーム用としてまとめた方が分かりやすいと思いますので、専用の記事でまとめます。
