２.HTMLタグ

サイトを構成する上で最も基本的な言語。
大きく分けてオブジェクトを指定するもの（文字・画像・リンクなど）と、パーツを指定するもの（オブジェクトのひとまとまり）を指定するものがり、ほとんどが終了タグを必要とします。

タグを全て覚える必要はありませんが、最低限ここで挙げるタグを覚えておけばサイト構築は可能かと思います。

ちなみに各タグの説明部分に「インライン要素」や「ブロック要素」、「インラインブロック要素」という記載がありますが、これについては後で解説します。

文字用タグ

ヘディングタグ<h1>～</h1>、<h2>～</h2>・・・<h6></h6>

サイト名やタイトルを意味する見出し用タグ。
重要度の順番に１～６まで設置することができます。

[html] <h1>ウィズのホームページへようこそ！</h1> ・ ・ ・ <h2>このサイトについて</h2> [/html]

改行タグ<br>

文章に改行を入れるタグ。
終了タグはありません。

[html] ようこそウィズへ！<br> このサイトは、船橋市にあるホームページ制作会社ウィズのサイトになります。<br> [/html]

pタグ<p>～</p>

文字列を指定する際に使用する汎用的なタグ。
ブログの文面など、主に長い文章の指定に用います。

あとこれは原則ではありませんが、段落をあける場合などは<br>を連続して書くのではなく、pタグで段落を分ける方がメンテナンスの観点などから良いとされています。

[html] <p> ようこそウィズへ！<br> このサイトは、船橋市にあるホームページ制作会社ウィズのサイトになります。 </p> <p> 当社ではホームページ制作から、チラシや名刺など紙媒体のデザインまで、様々な案件にご対応いたします！<br> またサイトのリニューアルやバナー作成など、新規構築以外のお仕事も承りますので、お気軽にご相談ください！ </p> [/html]

spanタグ<span>～</span>

主に文中にある一部の文字列に装飾を加えたい場合などに用います。
例えば文中で強調したい部分を赤文字で表示したい時などに使用します。（要CSS指定）

[html] <p> ようこそウィズへ！<br> このサイトは、<span class=”red”>船橋市にある</span>ホームページ制作会社ウィズのサイトになります。 </p> [/html]

画像用タグ

imgタグ<img src=”” alt=””　>

src=””に画像のディレクトリ/ファイル名（URL）を指定、alt=””に画像の説明を入れます。
altは必須ではないがSEOに必要な要素です。

[html] <img src="img/sample.jpg" alt="サンプル画像"> [/html]

リンク用タグ

aタグ<a href=”” >～</a>

文字や画像など、クリックした際にリンクで飛ばしたい箇所を囲みます。

[html] <a href="check.html">詳細はコチラ！</a> <a href="check.html"><img src="img/button.jpg" alt="リンクボタン"></a> [/html]

レイアウトタグ

divタグ<div>～</div>

オブジェクト単位で区切る際に使用する汎用的なタグ。

[html] <div> <h2>時代やニーズに合わせたサービスを</h2> <p> ホームページ制作においてゴールはないと考えております。<br> なぜなら公開している限り常に進化し続けるからです。 </p> </div> [/html]

headerタグ<header>～</header>

ヘッダー（サイト名やメニューなどが入るサイト上部）を指定するタグ。

[html] <header> <img src="img/logo.jpg" alt="株式会社ウィズ"> <h1>船橋市にあるホームページ制作会社ウィズ</h1> </header> [/html]

navタグ<nav>～</nav>

メニューなどナビゲーションを指定するタグ。

[html] <nav> <ul> <li><a href="index.html">トップページ</a></li> <li><a href="website.html">ウェブ制作</a></li> <li><a href="flow.html">制作のながれ</a></li> <li><a href="info.html">お問い合わせ</a></li> </ul> </nav> [/html]

asideタグ<aside>～</aside>

補足情報のセクションであることを示すタグ。
一般的にサイドバーなどを指定します。

[html] <aside> サイドバー </aside> [/html]

footerタグ<footer>～</footer>

フッター（サイト名や住所・電話番号などが入るサイト下部）を指定するタグ。

[html] <footer> With Design<br> 〒275-0016 千葉県習志野市津田沼 5-14-10-101<br> TEL:047-437-8006 </footer> [/html]

表・リスト作成タグ

tableタグtable/thead/tbody/tfoot/tr/th/td

tableは行と列で組む表を作成するタグです。
エクセルなど表計算ソフトで表を作る感覚で使用します。

table内では、その行がどんな役割（場所）なのかを明示するためのタグがあります。 ヘッダ部分はthead、本体部分はtbody、フッタ部分はtfootがそれぞれの該当タグになり、役割に合わせたタグで囲います。

レイアウトについては１行毎にtrで囲み、th（タイトル要素）/td（データ要素）で列を区切っていきます。

[html] <table> <thead> <tr> <th></th> <th>売り上げ</th> <th>原価</th> <th>粗利</th> </tr> </thead> <tbody> <tr> <th>ハンバーグ</th> <td>800円</td> <td>300円</td> <td>500円</td> </tr> <tr> <th>スパゲティ</th> <td>600円</td> <td>200円</td> <td>400円</td> </tr> </tbody> <tfoot> <tr> <th>合計</th> <td>1400円</td> <td>500円</td> <td>900円</td> </tr> </tfoot> </table> [/html]

ul/liタグ<ul>～</ul><li>～</li>

１つの要素を縦組みの箇条書きで表示するタグです。
初期状態ではli先頭に「・」が付きますがcssの「list-style-type」で消すこともできます。

単に縦組みリストを作るだけではなく、cssの指定で横組みにすることでヘッダー部のナビゲーションに利用したりなど応用がきくので、リスト系では比較的使用頻度の高いタグです。

[html] <style> ul li{ display: inline; list-style-type: none; } </style> <ul> <li><a href="index.html">トップページ</a></li> <li><a href="website.html">ウェブ制作</a></li> <li><a href="flow.html">制作のながれ</a></li> <li><a href="info.html">お問い合わせ</a></li> </ul> [/html]

dl/dt/ddタグ<dl>～</dl><dt>～</dt><dd>～</dd>

２つの要素（言葉・説明）でリストを作成するタグです。
dlでリストを囲みその中にdtで定義する言葉を、ddで定義の説明をそれぞれ囲んで記述します。 尚、初期状態ではddの前にインデント（余白）ができます。

例えばサイトの更新情報（日付/タイトル）、Q&Aリスト（質問/回答）などによく使われます。

[html] <dl> <dt>2016/09/05</dt> <dd>サイトをリニューアルについて</dd> <dt>2016/09/06</dt> <dd>お待たせしました！新商品入荷しました！</dd> </dl> [/html]

「インライン」「ブロック」「インラインブロック」要素について

さて、これまで挙げてきたタグにそれぞれ要素のマークを付けてきました。
「インライン」「ブロック」「インラインブロック」各要素は、レイアウトするにあたってそれぞれ重要な特長があります。

インライン要素

インライン要素は主に文字を装飾するタグに付与されています。
今回挙げた<span>の他に、文字を強調する時の<strong>や小さくする時に使う<small>なども同じくインライン要素です。
またリンクを張る<a>もインライン要素の仲間です。

インライン要素の特徴

• 続けて記述すると横並びになる
• 幅・高さを持たない（width/height指定が無効になる）
• 上下の余白を作れない（margin/paddingが左右しか効かない）

このような特性からインライン要素は基本的に「文字の間に挟む要素」になり、記述の流れのまま横に並んでいきます。

ブロック要素

ブロック要素は主にレイアウトに使用する要素で、囲われた部分は縦に並んでいきます。
文字を装飾するタグ以外はほぼブロック要素になります。

ブロック要素の特徴

• 要素が縦並びになる。
• 幅・高さを持つ（width/height指定が有効）
• 上下の余白を作れる（margin/paddingが有効）

ブロック要素はwidthを指定しないと横幅が100%になります。
ちなみに横幅を小さくして画面内に並ぶサイズにしても、cssで指定しない限り横には並びません。

インラインブロック要素

インライン要素のように横に並び、ブロック要素のように幅・高さ・余白を持てる特殊な要素です。
今回挙げた<img>タグの他に<input>や<texarea>などもこの要素を持ちます。

インラインブロック要素の特徴

• 続けて記述すると横並びになる
• 幅・高さを持つ（width/height指定が有効）
• 上下の余白を作れる（margin/paddingが有効）

このようにインライン要素とブロック要素の中間的な立ち位置の要素になります。
本来この要素を持っているタグ以外にも、ul/liで横並びのメニューを作成する時に「display:inline-block」とインライン要素にして使ったりします。

ただブロック要素のようにレイアウトに組み込む使い方をする際にいくつか注意点があります。

インラインブロック要素の注意点

• ブロック要素を中央揃えにする「margin:0 auto」が機能しない
• 行間を指定する「line-height」の影響を受ける

この特性の影響で「画像を中央揃えにしたいけどできない」や「画像の下に謎の余白ができる」など、意図しない表示になってしまうこともあるので注意です。

まとめ

以上、ざっくりですがHTMLで使用するタグと要素の説明でした！
他にもたくさんHTMLタグはありますし、今回の説明だけでは用例もイメージできないと思うので書籍やサイトなどを見て学習してみてください。

オススメは実際に人が組んだサイトのコード（ソース）を見てどこにどのタグが使われどのように作用しているかを見て、そのタグがどういう意味かをリファレンスで確認する事です。
さらにそのタグで実際にサンプルを組んで表示してみると、より理解が深まります。

ブラウザでソースを見るときは下記の操作で行います。

• IE･･･サイト背景にマウスを置いて「右クリック→要素を検査orソースの表示」
• chrome･･･サイト背景にマウスを置いて「右クリック→検証orページのソースを表示」
• FireFox･･･サイト背景にマウスを置いて「右クリック→要素を調査orページのソースを表示」

現状サイト構築において装飾はほぼ全てCSSに指定するためHTMLタグはおざなりになりがちですが、サイトの基礎になる大事な要素なのでしっかり覚えておきましょう！