前回の【ホームページ制作の基礎】HTMLの基本タグ（１）に引き続き、今回は【ホームページ制作の基礎】HTMLの基本タグ（２）と題して、前回紹介しきれなかった基本のタグをご紹介していきます。

前回は見出しのHタグ・段落のPタグ・改行のbrタグ・リンク（アンカータグ）・画像のIMGタグ・spanタグ・divタグの６個のタグをご紹介しました。
HTMLの基本タグ（１）の記事を見られていない方は、基本構造についても説明しているので、ぜひ（１）から読んでみてください。

そして今回は
・<ul> 箇条書きのリスト表示のタグ
・<ol>番号順のリストタグ
・<dl>定義の説明を表すタグ
・<nav>ナビゲーションのタグ
・<article>独立した記事のまとまりを表すタグ
・<section>ウェブページ内のその部分が、一つのセクションであることを示すタグ
・class属性 複数の要素を一つのグループにまとめ、共通の識別子（クラス名）を与えるもの。
・id属性
についてそれぞれわかりやすくご紹介します。

ulタグ（箇条書きのリスト表示のタグ）

ulタグとは「Unordered List」の略で、順不同リストという意味です。順番の関係ない箇条書きのリストなどに使われます。
大枠を<ul>タグで囲み、中の1つ1つのリストを<li>タグで囲むという使い方をします。
<ul></ul>で順不同リストであることを定義し、<li>タグが、その項目を表します。

ulタグを使用すると、項目に黒丸（disc）が標準で付きます。
これは、CSSで消したり変更することができます。

<ul>タグの中には<li>タグで囲んだものしか配置できないので注意が必要です!

<ul>
<li>ホームページ</li>
<li>Webサイト</li>
<li>ブログ</li>
</ul>

・ホームページ
・Webサイト
・ブログ

この様に表示されます。

olタグ（番号順のリストタグ）

olタグは「順序付きリスト」で、リストの項目に順番を付ける必要がある場合に使用します。
例えば、大会の結果を表すリストを作成するとします。
すると、1番から順に表示しなければなりません。

そのような場合は、olタグを使用します。
使いかたはulタグと同じで、<ul>を<ol>に変えるだけです。

<ol>タグの中にも<li>タグで囲んだものしか配置できないので注意しましょう。

<ol>
<li>太郎</li>
<li>花子</li>
<li>二郎</li>
<ol>

1.太郎
2.花子
3.二郎

この様に表示されます。

dlタグ（定義の説明を表すタグ）

「DL」とは「definition list（定義）」の略で、定義リストを表すタグです。

定義リストは<dl>タグで範囲で表し、定義する用語（Definition Term）を<dt>タグで、用語の説明（Definition Description）を<dd>タグで表します。

• dl（definition list）= 定義リスト
• dt（definition term）= 定義する言葉
• dd（definition description）= 定義の説明

しかし、html5になってからはdl・dt・ddのタグの持つ意味が「定義リスト」から「説明リスト」に変わったことで様々な用途で使用することができるようになりました。

<dl>
<dt> ソフトドリンク</dt>
<dd>一般の</dd>
<dt> お酒</dt>
<dd>アルコール入り</dd>
</dl>

dt要素とdd要素の間には、改行が入ります。
HTML4ではcompactという属性で改行させなくすることができましたが、
HTML5ではcompact属性は廃止となり、CSSで見た目を調整する作業が発生します。

navタグ(ナビゲーションのタグ)

navタグは「ナブ」または「ナビゲーション」と読みます。

「navigation」の略で、HTMLでは「ページ内の指定部分や他ページへの誘導」を意味します。

上の図のように、メニュー欄からリンクで別のページに飛ぶことができるサイトを見たことがあるでしょう。こういったサイトのナビゲーションの役割を果たすのが、navタグです。

サイトのナビゲーション部分をnavタグで囲うのが一般的です。
また、ulタグやolタグのようなリスト要素とセットで使われます。

<nav>
<ul>
<li>私たちについて</li>
<li>お知らせ</li>
<li>採用案内</li>
</ul>
</ul>

使い方は簡単で、ナビゲーションにしたい範囲をnavタグで囲うだけです。
そしてそのnavタグの中に、ulタグやliタグを使ってリストを作成します。

article (独立した記事のまとまりを表すタグ)

articleタグとは、文書の内容が独立している記事セクションであることを示す際に使うタグです。

articleタグの特徴は1ページに複数使用が可能な点です。
また、articleタグを入れ子構造にもできます。

articleタグを入れ子構造にする場合は、子要素のarticleタグは基本的に親要素のarticleタグに関係する内容にしましょう。

articleは、独立したコンテンツに使用すると覚えておきましょう！

section（ウェブページ内のその部分が、一つのセクションであることを示すタグ）

<section>タグは、ウェブページ内のその部分が、一つのセクションであることを示す際に使用します。
section要素は、HTML5から新たに追加された要素です。
セクションは意味的なひとまとまりなので、その部分の意味を表す見出しを付けることができます。

<section>タグを使用するべきかどうか迷った際には、その部分に見出しを付けることができるかを考えてみると、 セクションとしてふさわしいかどうか判断しやすくなります。

class属性 ・id属性

id属性とclass属性は、どちらもHTMLのタグに名前をつける役割を担います。class属性は、１つのページ内で1だけ利用できるのに対して、id属性は何度でも利用できるなど、両者は様々な点で役割が微妙に異なります。

<div class=”top”>・・・・・・</div>
<div id=”main”>・・・・・・</div>

上記のようにコーディングすることで、単なるdivタグを「top」「main」のようにそれぞれを指定できるようになります。そうすることで、命名した部分だけにCSSを適用できるようになりデザインの幅を広げることが可能になるのです。

id属性は何回でも使えるのに対して、class属性は１ページに１だけ利用できます。

それがそのページ内で一意の存在であればid属性を用いて命名するのに対して、ある程度大まかなまとまりとしてとらえるのであれば、class属性を用いて命名する、と理解しておくといいと思います。

まとめ

今回はHTMLの基本タグについてご紹介させていただきました。

最後まで読んでいただきありがとうございました。

それぞれのタグの役割や使い方はなんとなくでもおわかりいただけましたでしょうか。
（２）から読まれた方は、ぜひ（１）も合わせて読んでみてください。

HTMLの基本タグについては、（１）（２）でご紹介しましたので、CSSについて触れた記事も
書いていく予定です！

ホームページ制作に関するお問い合わせはこちら