これだけは知っておきたいHTMLタグ
Webプログラミングでは、サイトコンテンツとしてHTMLを表示することになるため、HTMLタグの知識が必須となります。このページでは、Web開発で必要不可欠と言える範囲の前提知識を習得しやすいように、目的ごとに説明します。
目次
Webサイトで使われるHTMLタグとは
HTMLタグとは、文章構造を指定したり、機能化を行なうためのマークアップ言語です。テキストファイルで作成することができ、文字コードは主にUTF-8で記述されます。Webサイトは、HTML文書を表示することで構築されています。
HTMLにはバージョンがあり、現在はHTML5が主流となっています。最新のブラウザであれば、HTML5に対応済みなので、古いバージョンの記述方法を覚える必要はありません。※古いページを更新するタスクがある場合は別。
HTMLはまず仕様が策定され、その標準仕様に合わせてブラウザが作られています。そのためブラウザによって表示状態が異なったり、未対応のタグが存在します。細かな表示状態の調節、統一化はスタイルシートによって行えます。
HTMLタグの記述方法
HTMLは、<と>でタグ名、属性を囲むかたちで記述されます。タグにはテキストを開始タグ、閉じタグで囲むタイプのものと、単独で機能するタイプのものがあります。閉じタグは、</タグ名>で構成されます。
<!-- コメントは通常画面には表示されない -->
<!-- 開始タグと閉じタグで囲むタイプ -->
<title>Webページのタイトル</title>
<!-- 閉じタグが不要なタイプ -->
<meta name="description" content="ページの内容を紹介する文章を記述する。検索エンジンに表示される箇所。">
Webページの基本構造
HTMLは、Webページ情報を設定する<head></head>と、実際に表示するコンテンツを配置する<body></body>に分かれます。headには、ブラウザやスマホの表示状態の制御や、ページタイトル、ページの概要、ページのスタイルを記述することになります。
bodyには、Webページに表示するコンテンツを記述することになります。通常はレイアウトを決めてから、適切なタグを配置し、id属性やclass属性を割り振って、スタイルシートで見え方を調節します。
下記は一般的なHTML5でのWebサイト構成を記述したものです。テンプレートとして利用できるようにコメントは載せず、下部でポイントとしてまとめました。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<header></header>
<div id="contents">
<main></main>
<div id="sidebar"></div>
</div>
<footer></footer>
<script src="script.js"></script>
<script>
</script>
</body>
</html>
押さえておきたいポイント
・DOCTYPE html でHTML5文書であるというDOCTYPE宣言 ・meta charset="" で文書の文字コードを指定 ・meta name="viewport" でスマホでの表示サイズを指定 ・meta http-equiv="X-UA-Compatible" でIEでの表示方法を指定 ・titleタグ でページのタイトルを設定 ・meta name="description" でページの概要を記述 ・link rel="stylesheet" でスタイルシートの外部ファイルを指定 ・styleタグ でスタイルシートを記述 ・headerタグ をヘッダー部として設置 ・div id="contents" をコンテンツのレイアウト用に設置 ・mainタグ に記事などを記述する ・div id="sidebar" をサイドバーとして設置 ・footerタグ をフッター部として設置 ・script src="" でjavascriptの外部ファイルを指定 ・scriptタグ でjavascriptを記述
headerやfooterは、ページ内に複数配置できる要素ですが、上ではヘッダー、フッターとして利用しています。使用するタグは、cssでスタイルを変えたり、javascriptで特定していくことが前提として想定されています。そのためHTML内に複数回出現し得るタグを利用すると、デザイン上の仕様（変更時に理解が必要となる項目）になります。
上の例では、headerタグ、footerタグのレイアウト利用、mainタグとsidebar要素をスタイルシートで横に並べることがデザイン上の仕様になっています。
また一般的にブラウザの表示速度を高めるため、スタイルシートはhead内に、javascriptはHTML文書の最後、/body 近くに配置します。
タイトル、サブタイトルを表示したい時
タイトルやサブタイトルは、SEOで重視される項目となります。h1は、通常Webページに1つだけ配置して、そのページのタイトルを設定します。h2以降は、文書のまとまりを階層的に分けて、その階層の表題を設定します。この表題に含まれる単語などが検索エンジンのキーワードに採用されやすいようです。
<!-- ページタイトル head内 -->
<title>ブラウザのタブにも表示される</title>
<!-- コンテンツタイトル body内 -->
<!-- サブタイトル、見出し -->
<h1>記事タイトル</h1>
<h2>第一章</h2>
<h3>第一節</h3>
<h4>第一項</h4>
<h5>第一</h5>
<h6>一</h6>
リストを表示したい時
一連の項目を並べる場合などに使うことができます。コンテンツの目次やパンくずリスト、サイトのメニューなどに利用されることが多いです。
<!-- 順序のないリストを並べる -->
<ul>
<li>りんご</li>
<li>みかん</li>
</ul>
<!-- 順序のあるリストを並べる -->
<ol>
<li>プラン</li>
<li>実行</li>
<li>チェック</li>
<li>改善</li>
</ol>
<!-- 定義や説明を並べる -->
<dl>
<dt>プラン</dt>
<dd>道筋を決める</dd>
<dt>実行</dt>
<dd>実際にやってみる</dd>
<dt>チェック</dt>
<dd>評価、解析を行なう</dd>
<dt>改善</dt>
<dd>チェック時の発見を吸収、更新</dd>
</dl>
リンクを表示したい時
別のページやページ内の特定の位置に移動できるリンクを設置します。
<!-- リンク先を現在のウィンドウに開く -->
<a href="URL">
リンク文字列
</a>
<!-- リンク先を別タブで開く -->
<a href="URL" target="_blank">
リンク文字列
</a>
<!-- ページ内の要素へ移動するリンク -->
<a href="#id1">
リンク文字列
</a>
段落分けや改行をしたい時
ブログなどの記事内で段落分けや改行を行いたい時のタグです。Webプログラム側で、改行コードと改行タグを置換したりすることもあるため、改行方法は知っておく必要があります。
<!-- 段落を分ける -->
<p>
文章を内容のまとまりごとに分けたい場合があります。
</p>
<p>
pタグを使うと、余白ができて段落分けができます。
</p>
<!-- 改行する -->
<p>
余白はスタイルシートで調節可能です。
テキストファイル内で改行をしてもWebページ上は反映されません。<br>
brタグで改行を指定します。
</p>
テキストの一部を強調したい時
文章コンテンツ内で単語や一節を強調表示したい場合に利用できるタグです。
<!-- 一部を強調する strong 太字になる -->
読み手に重要なポイントを伝えるための手段として、文章内の一部を<strong>強調する方法</strong>があります。
<!-- 一部を強勢する em イタリック体になる -->
強調する方法は複数ありますが、どれを使っても<em>SEO的</em>には影響は無いようです。
<!-- 太字にする b -->
タグには用途の違いがありますが、bタグとstrongタグの<b>表示上の機能</b>には違いはなく、太字になるだけです。
<!-- イタリック体にする i -->
太字やイタリック体で表示する方法は他にもあり、<i>スタイルシート</i>で指定することもできます。
表・テーブルを表示したい時
行と列で構成されるデータをWebページ上に綺麗に表示したい場合などに利用されます。trタグで、レコード単位となる行を表現し、thタグとtdタグでカラムとなる列を表現します。thは、主に見出しとなるカラム名で利用され、太字になります。
標準の機能では実現できませんが、javascriptを利用することで、レコードを並び替えることが出来ます。
<!-- 表を表示する -->
<table>
<!-- 表のヘッダ、カラム名など -->
<thead>
<tr>
<th>順位</th>
<th>都道府県</th>
<th>人口密度</th>
</tr>
</thead>
<!-- 表データ -->
<tbody>
<tr>
<th>1</th>
<td>東京都</td>
<td>6,263.97</td>
</tr>
<tr>
<th>2</th>
<td>大阪府</td>
<td>4,635.69</td>
</tr>
<tr>
<th>3</th>
<td>神奈川県</td>
<td>3,791.60</td>
</tr>
<tr>
<th>4</th>
<td>埼玉県</td>
<td>1,924.19</td>
</tr>
<tr>
<th>5</th>
<td>愛知県</td>
<td>1,455.06</td>
</tr>
</tbody>
<!-- 表のフッタ、カラム名など -->
<tfoot>
<th>順位</th>
<th>都道府県</th>
<th>人口密度</th>
</tfoot>
</table>
入力フォームを表示したい時
Webサイトを訪れたユーザーからの入力を受け取るには、サイト上にフォームを設置する必要があります。下記は一般的に利用されるフォーム要素です。HTML5では、他にもさまざまな入力方法が追加されています。
<!-- 入力フォームを設置する -->
<form method="post">
<!-- 一行テキスト欄 -->
<input type="text" name="text" placeholder="初期表示の文字列">
<!-- 一つだけ選択できるラジオボタン -->
<label>
<input type="radio" name="gender" value="1">男性
</label>
<label>
<input type="radio" name="gender" value="2">女性
</label>
<!-- 一つだけ選択できるセレクトボックス -->
<select name="select">
<option value="">未選択</option>
<option value="A">選択肢A</option>
<option value="B">選択肢B</option>
</select>
<!-- 複数行の入力欄 -->
<textarea name="notes"></textarea>
<!-- 複数選択できるチェックボックス -->
<label>
<input type="checkbox" name="check" value="1">利用規約に同意します
</label>
<label>
<input type="checkbox" name="check" value="2">メールマガジンに登録します
</label>
<!-- フォームを初期化できるボタン -->
<input type="reset" value="リセット">
<!-- 送信を実行するボタン -->
<input type="submit" value="送信">
</form>
<!-- ファイルを送信させる場合 -->
<form method="post" enctype="multipart/form-data">
<!-- ファイルを選択できる入力欄 -->
<input type="file" name="file">
<input type="submit" value="送信">
</form>
注意点として、フォームからファイルをアップロードさせる場合は、enctype="multipart/form-data" を設定する必要があります。またサーバサイドには、name属性のあるものが送信され、ボタンにnameをつけると、ボタンのvalueが送信されます。
同じname属性のvalueを複数渡したい場合は、PHPの場合は、nameの末尾に[]を付けます。
<!-- PHPに複数のチェックを渡す -->
<form method="post" enctype="multipart/form-data">
<!-- 複数選択できるチェックボックス -->
<label>
<input type="checkbox" name="check[]" value="1">利用規約に同意します
</label>
<label>
<input type="checkbox" name="check[]" value="2">メールマガジンに登録します
</label>
<input type="submit" value="送信">
</form>
引用を表示したい時
ブログ記事などで映画や書評、ニュースへの感想を掲載する場合に、その感想に至った経緯として、出典元から文章を引用したいことがあります。
<!-- 段落単位で引用文を表示 -->
<blockquote>
<p>
ここに引用文を掲載します。
一節のみを引用したい場合は、qタグを利用します。
</p>
<cite>引用元のタイトルやリンク</cite>
</blockquote>
<!-- 文章の一節を引用 -->
引用には要件があり<q>公正な慣行に従う必要がある</q>とされる。
画像を表示したい時
主にブログのアイキャッチやサムネイルとして画像を表示させる方法です。画像は、HTML文書であるテキストファイルに比べて、データサイズが大きいのでレスポンスやサーバ負荷に影響があります。またサイズが小さくても、大量のアイコン画像を表示させるなど、数が多い場合には、Webサーバへのリクエスト数が増えるため、レスポンスに影響があります。
画像数によるレスポンス問題の解決策として、cssスプライトがあります。これは表示させる画像ファイルを結合して一つのファイルにし、cssでその画像の表示範囲を指定して一部を表示させる方法です。
またアイコン画像をフォントとして表示させる方法もあります。Webサイト上で扱うフォントは、Webフォントと呼ばれ、アイコン用途では「Font Awesome」が有名です。フォントの場合は、拡大時に画像のようにぼやけることもありません。
<!-- 画像を表示 -->
<img src="URL">
<!-- スタイルシートで背景に画像を設定 -->
<div id="background"></div>
<!-- フォントでアイコンを表示 -->
<i class="icon1"></i>
動画を表示したい時
Webページ内で動画を表示、再生させたい場合に利用できるタグです。src=""に対象の動画ファイルを指定します。 スマホのブラウザによっては自動再生に制限があり、音を鳴らさない設定の場合にのみ自動再生されるようです。
<!-- ページ内で動画を自動再生 -->
<video src="URL" autoplay></video>
<!-- 動画画面に操作枠を表示 -->
<video src="URL" controls></video>
<!-- 自動的に再生し、ループ再生 -->
<video src="URL" autoplay loop></video>
<!-- 音を消して、自動的に再生 -->
<video src="URL" autoplay muted></video>
別ページを画面に埋め込みたい時
Webコンテンツの一部として、別ページのHTMLを埋め込んで表示させることが出来ます。通常は、自己管理下にあるページを埋め込みますが、ASP提供のタグや広告枠がインラインフレームとなっているケースもあります。
ASPとは、Webアプリ機能を提供するサービスで、例えば埋め込みウィジェットなどが該当します。
<!-- ページ内に別ページを表示 -->
<iframe src="URL" height="高さ" width="横幅"></iframe>