よく使うHTMLタグのまとめ
文書をマークアップするときに、よく使うHTMLタグについて
おさらいの意味もこめてまとめてみました。
見出し（heading）要素
見出し（heading）要素は、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>と6つあり、
見出しの重要度で使い分けをしています。
見出し要素は、見出しの拾い読みでも、本文のツリー構造が分かるように重要度を設定します。
<body>タグの直下には、通常、一番重要な見出しである<h1>があります。
そして、<h1>の直下には、通常、<p>があります。
段落（paragraph）要素
段落要素は、本文の中の意味的なまとまりを表します。
段落は、<p>タグを使ってマークアップします
<p>タグでマークアップした段落ブロックの下は、必ず１行分の空きができます。
<body>タグ直下で一番最初の<p>の内容はSEO対策の面でとても大切です。
段落は、可読性を考慮して、1行が40字程度で、行数は4行程度を一段落とするのが良い。
箇条書き
箇条書きは、順番不問の箇条書き、順番必須の箇条書き、定義型の箇条書きの3種類があります。
<ul>（unordered list）
<ul>は順番不問の箇条書きで、順序が置き換わっても意味が伝わる並列な内容に使います。
- <ul>はナビゲーションなどで使われることが多いです。
- <ul>は、<ul>タグで箇条書き範囲を示し、<li>タグで箇条書きの各項目を示します。
- 行頭マークは「黒丸」です。
記述例
<h6>カレーの材料</h6> <ul> <li>カレー・ルー</li> <li>豚肉</li> <li>じゃがいも</li> <li>たまねぎ</li> <li>にんじん</li> </ul>
ブラウザの表示
カレーの材料
- カレー・ルー
- 豚肉
- じゃがいも
- たまねぎ
- にんじん
<ol>（ordered list）
<ol>は順番必須の箇条書きで、順序が置き換わっては意味が伝わらない、順序が意味をもつ内容に使います。
- <ol>は手順やランキングで使われることが多いです。
- <ol>は、<ol>タグで箇条書き範囲を示し、<li>タグで箇条書きの各項目を示します。
- 行頭は数字です。
記述例
<h6>カップラーメンの作り方</h6> <ol> <li>お湯を沸かす</li> <li>蓋を半分まではがし、熱湯を内側の線まで注ぐ</li> <li>蓋をして3分待つ</li> <li>3分経ったら蓋を開けて出来上がり</li> </ol>
ブラウザの表示
カップラーメンの作り方
- お湯を沸かす
- 蓋を半分まではがし、熱湯を内側の線まで注ぐ
- 蓋をして3分待つ
- 3分経ったら蓋を開けて出来上がり
<dl>（definition list）
<dl>は定義型の箇条書きで、「名称（用語）」と「その説明文（定義）」をセットにしてリスト化するときに使います。
定義型の箇条書きは、次の要素で構成されています。
- リスト全体に対する dl要素：definition list
- 名称(用語)に対する dt要素：definition term
- 説明文(定義)に対する dd要素：definition description
「語句と語句説明」、「質問と解答」、「日付けと出来事」の様に組み合わせて使います
記述例
<h6>くだもの</h6> <dl> <dt>りんご</dt> <dd>赤い色をした丸い果物。</dd> <dt>バナナ</dt> <dd>黄色い色をした細長い果物。</dd> </dl>
ブラウザの表示
くだもの
- りんご
- 赤い色をした丸い果物。
- バナナ
- 黄色い色をした細長い果物。
表組について
HTMLにおける表はtable要素を使って表現します。
表の中には1つ以上の「行」があり、その行の中にはまた1つ以上の「セル」があるという考え方で表示します。
「行」をtr要素（Table Row）、「セル」をtd要素（Table Data）で表します。
セルが見出しとなる場合は、td要素の代わりにth要素（Table Header）で表します
図表を示す場合、普通はその内容を簡潔に示した説明文（キャプション）を用意します。
caption要素は、対象となるtable要素の、開始タグの直後に記述します。
記述例
<table border="1"> <caption>歓迎会出欠表</caption> <tr> <th>氏名</th> <th>出欠</th> </tr> <tr> <td>山田</td> <td>出席</td> </tr> <tr> <td>鈴木</td> <td>欠席</td> </tr> <tr> <td>田中</td> <td>出席</td> </tr> </table>
※文字と枠の修飾は「CSS」でおこないます。
しかし、枠線が見えないと表組みが確認できないため、便宜上「border="1"」を指定します。
ブラウザの表示
| 氏名 | 出欠 |
|---|---|
| 山田 | 出席 |
| 鈴木 | 欠席 |
| 田中 | 出席 |
画像の挿入について
HTMLドキュメントに画像を挿入する場合、
画像を別のファイルとして用意し、img要素を使って画像ファイルのある場所を指定します。
記述例
<img src="画像の置いてある場所" width="幅" height="高さ" alt="代替え文字"> ※img：imageの略、src：sourceの略 現在では、必然性がなければ、width="幅" height="高さ" は、不要です。。
img要素には、alt属性が必須。
alt属性には、その画像に対する具体的なキャプションを書きます。それが画像検索で役に立ちます。
なお、説明する必要のないイメージ画像などの場合は、alt属性の値を空にします
リンクについて
HTMLでは、本文中のリンク情報は、<a>要素で表現します
<a>はアンカー（Anchor）の略で「錨」のことです。
文書のある場所から別の場所へのリンクを、文書と文書をつなぐ錨として表しています。
記述例
テキストリンク
<a href="移動先のアドレス">◎◎◎のページへ移動</a> ※href：hyper reference 別ウィンドウで開く場合には、target属性を使用し値を「_blank」とします <a href="移動先のアドレス" target="_blank">◎◎◎のページへ移動</a>
ページ内でリンクをする場合は、移動先の要素にid属性を設定して、id属性を移動先のアドレスに指定します。
画像リンク
<a href="移動先のアドレス"><img src="画像の住所" width="幅" height="高さ" alt="代替え文字"></a>
メールリンク
<a href="xxx@xxx.net">お問い合わせ（メールソフトが起動します）</a>
このリンクは、メーラーを起動するためのリンク
メールアドレスをソースコード上に記述することから、
セキュリティ上、好ましくないため現在ではほぼ利用することはない。
small要素について
small要素は、免責・警告・法的規制・著作権・ライセンス要件などの注釈や細目を表す際に使用します。
small要素によって、小さめの文字サイズで表示されますが、重要性の強弱を表わさないため、
そこには弱めるといった意味は存在しません。
語句を強調する要素について
大事な語句を強調する場合は、<em> または <strong>要素を使用します。
span要素について
span要素は、それ自身に意味を持っていないが、span要素で囲まれた範囲をひとかたまりとして、スタイルを適用するために使用します。
