読者です 読者をやめる 読者になる 読者になる

0からはじめるWebサイト制作の勉強|知行合一

2015年6月より求職者支援訓練でWebサイト制作を学んでいます。学んだことの要点や実践での備忘録を記録して、一歩ずつ成長に努めます。

よく使うHTMLタグのまとめ

文書をマークアップするときに、よく使うHTMLタグについて
おさらいの意味もこめてまとめてみました。

見出し(heading)要素

見出し(heading)要素は、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>と6つあり、
見出しの重要度で使い分けをしています。

見出し要素は、見出しの拾い読みでも、本文のツリー構造が分かるように重要度を設定します。

<body>タグの直下には、通常、一番重要な見出しである<h1>があります。
そして、<h1>の直下には、通常、<p>があります。

段落(paragraph)要素

段落要素は、本文の中の意味的なまとまりを表します。
段落は、<p>タグを使ってマークアップします
<p>タグでマークアップした段落ブロックの下は、必ず1行分の空きができます。

<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>
ブラウザの表示
カップラーメンの作り方
  1. お湯を沸かす
  2. 蓋を半分まではがし、熱湯を内側の線まで注ぐ
  3. 蓋をして3分待つ
  4. 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要素で囲まれた範囲をひとかたまりとして、スタイルを適用するために使用します。