Webエンジニアがわかりやすく解説！さまざまなHTMLタグの使い方！

2023 9/28

2023年2月28日 2023年9月28日

HTMLはWebページを構築するための基本的な言語であり、Webデザインや開発において不可欠な知識です。

この記事では、HTMLの基本的な構造や文法から、テキスト、フォーム、テーブル、画像、動画・音声、リンクやナビゲーション、メタデータ、SEOに関するタグまで、さまざまなHTMLタグの使い方について詳しく解説していきます。また、HTML5における新しい要素についても触れます。

Webページ制作に携わる方や、Webデザインや開発に興味のある方は、ぜひ参考にしてください。

HTMLの基本的な構造と文法

HTMLとは、HyperText Markup Languageの略であり、ウェブページを作成するために使用されるマークアップ言語です。HTML文書の基本的な構造は以下のようになります。

<!DOCTYPE html>
<html>
  <head>
    <title>ページのタイトル</title>
  </head>
  <body>
    ページの内容
  </body>
</html>

まず、文書の先頭にはDOCTYPE宣言があります。これは、この文書がどのバージョンのHTMLに準拠しているかを示すものです。HTML5を使用する場合は、<!DOCTYPE html>と書きます。

次に、HTMLの基本的な構造である<html>要素が開始されます。<html>要素の中には、<head>要素と<body>要素が含まれます。

<head>要素の中には、ページのタイトルやメタデータなど、ページの情報を定義する要素が含まれます。

<title>要素は、ブラウザのタブに表示されるページのタイトルを定義します。

<body>要素の中には、実際にページに表示されるコンテンツが含まれます。

HTMLのタグは、<と>で囲まれた文字列で表されます。タグには、開始タグと終了タグがあります。開始タグは<の後にタグ名が続き、終了タグは</の後にタグ名が続きます。例えば、<p>タグは段落を開始する開始タグであり、</p>タグは段落を終了する終了タグです。

また、一部のタグには終了タグが不要な自己終了タグがあります。例えば、<img>タグは画像を表示するためのタグであり、終了タグが不要な自己終了タグとして使用されます。以下は、<img>タグを使用して画像を表示する例です。

<img src="画像のURL" alt="代替テキスト">

src属性は、画像のURLを指定するための属性であり、alt属性は、画像が表示できない場合や、スクリーンリーダーを使用している場合に代替テキストを提供するための属性です。

テキストに関するタグ

HTMLでは、文章を構成するテキストを表現するための様々なタグがあります。ここでは、代表的なテキストに関するタグを紹介します。

<h1>〜<h6>タグ

見出しを表現するタグです。h1が最も大きな見出しで、h6が最も小さな見出しとなります。

例えば、以下のように使います。

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>

<p>タグ

段落を表現するタグです。例えば、以下のように使います。

<p>これは段落です。</p>
<p>これは別の段落です。</p>

これは段落です。

これは別の段落です。

<a>タグ

リンクを表現するタグです。href属性にリンク先のURLを指定します。例えば、以下のように使います。

<a href="https://www.supuky.com/">本サイトのリンク</a>

本サイトのリンク

<strong>タグ

強調するテキストを表現するタグです。例えば、以下のように使います。

<p>普通のテキスト</p>
<strong>強調するテキスト</strong>

普通のテキスト

強調するテキスト

<em>タグ

強調するテキストを表現するタグです。<strong>タグと同じように見えますが、<em>タグは文脈によって強調するテキストが異なることを示すために使用されます。例えば、以下のように使います。

<p><em>この部分が</em>強調されています。</p>

この部分が強調されています。

<ul>タグ、<ol>タグ、<li>タグ

リストを表現するタグです。<ul>タグは順不同リスト、<ol>タグは順序付きリストを表現します。<li>タグはリスト内の要素を表現します。例えば、以下のように使います。

<ul>
  <li>項目1</li>
  <li>項目2</li>
</ul>

<ol>
  <li>項目1</li>
  <li>項目2</li>
</ol>

項目1
項目2

項目1
項目2

<br>タグ

改行を表現するタグです。例えば、以下のように使います。

<p>これは1行目です。<br>これは2行目です。</p>

これは1行目です。
これは2行目です。

<pre>タグ

改行やスペースをそのまま反映することができるタグです。例えば、以下のように使います。

<pre>
  これは
  改行を
  反映する
  テキスト
</pre>

  これは
  改行を
  反映する
  テキスト

以上が、HTMLでよく使われるテキストに関するタグの紹介です。これらのタグをうまく使うことで、より意味のある文書を作成することができます。ただし、適切に使用しないと、表示に問題が生じたり、検索エンジンによる評価が低くなったりする可能性があります。

注意点としては、<h1>〜<h6>タグは見出しに使用し、<p>タグは段落に使用することが基本です。また、<a>タグでリンクを設定する場合、必ずhref属性を指定する必要があります。さらに、<ul>や<ol>でリストを作成する場合は、<li>タグで項目を指定することが必要です。

以上のような注意点を守りつつ、テキストに関するタグを使いこなして、より意味のあるHTML文書を作成してみてください。

フォームに関するタグ

Webページに入力フォームを作成する場合、以下のようなタグを使用します。

<form>タグ

入力フォーム全体を囲むタグです。action属性を指定することで、フォームのデータ送信先のURLを指定します。

<form action="送信先のURL">
  <!-- 入力フォームの内容 -->
</form>

<input>タグ

フォーム内の入力項目を定義するタグです。type属性で、入力の種類を指定します。よく使用されるtype属性の値は以下の通りです。

text：テキスト入力欄
password：パスワード入力欄（入力内容がマスクされる）
radio：ラジオボタン
checkbox：チェックボックス
submit：送信ボタン
reset：リセットボタン
file：ファイル選択ボタン

<!-- テキスト入力欄 -->
<input type="text" name="name">

<!-- パスワード入力欄 -->
<input type="password" name="password">

<!-- ラジオボタン -->
<input type="radio" name="gender" value="male">男性
<input type="radio" name="gender" value="female">女性

<!-- チェックボックス -->
<input type="checkbox" name="hobby" value="tennis">テニス
<input type="checkbox" name="hobby" value="swimming">水泳

<!-- 送信ボタン -->
<input type="submit" value="送信">

<!-- リセットボタン -->
<input type="reset" value="リセット">

<!-- ファイル選択ボタン -->
<input type="file" name="file">

男性女性テニス水泳

<textarea>タグ

複数行のテキスト入力欄を作成するタグです。rows属性とcols属性で、テキストボックスの大きさを指定します。

<textarea name="comment" rows="4" cols="40"></textarea>

<select>タグと<option>タグ

ドロップダウンリストを作成するタグです。<select>タグで選択肢のリストを作成し、<option>タグで選択肢を定義します。

<select name="area">
  <option value="tokyo">東京</option>
  <option value="osaka">大阪</option>
  <option value="kyoto">京都</option>
</select>

<button>タグ

クリックすることで何らかのアクションを実行するボタンを作成するタグです。type属性で、ボタンの種類を指定します。

<!-- 通常のボタン -->
<button type="button">ボタン</button>

<button>要素にはtype属性があります。この属性は、ボタンの機能を定義するために使用されます。

type属性には、以下のような値が指定できます。

button：通常のボタンを作成します。
submit：フォームを送信するためのボタンを作成します。
reset：フォームの内容をリセットするためのボタンを作成します。

デフォルトではtype属性の値はsubmitとなっています。このため、<button>要素を使用してフォームを送信する場合は、type属性を省略することができます。

例えば、以下のコードは、送信というテキストを持つフォーム送信用のボタンを作成します。

<button type="submit">送信</button>

また、<button>要素は、他の要素と同様に、”id”や”class”といった属性を持つことができます。これらの属性を使用することで、JavaScriptやCSSで要素を操作することができます。

<button id="myButton" class="btn">クリックしてください</button>

この要素を適切に使用することで、ユーザーがアプリケーションやウェブサイトをより簡単に操作できるようになります。

テーブルに関するタグ

HTMLでは、表を作成するために<table>タグを使用します。表の各行は<tr>タグで表され、各セルは<td>タグで表されます。また、表の見出しは<th>タグで表されます。

以下は、基本的なテーブルの作成方法の例です。

<table>
  <tr>
    <th>項目1</th>
    <th>項目2</th>
    <th>項目3</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
    <td>データ3</td>
  </tr>
  <tr>
    <td>データ4</td>
    <td>データ5</td>
    <td>データ6</td>
  </tr>
</table>

項目1	項目2	項目3
データ1	データ2	データ3
データ4	データ5	データ6

この例では、1行目が見出しで、2行目と3行目がデータです。

テーブルの行を結合する場合、<td>タグではなく、<th>タグを使用します。結合する列数は、colspan属性で指定します。同様に、行を結合する場合は、rowspan属性を使用して、結合する行数を指定します。

<table>
  <tr>
    <th colspan="2">項目1と項目2</th>
    <th>項目3</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
    <td rowspan="2">データ3とデータ4</td>
  </tr>
  <tr>
    <td>データ5</td>
    <td>データ6</td>
  </tr>
</table>

項目1と項目2		項目3
データ1	データ2	データ3とデータ4
データ5	データ6	データ3とデータ4

この例では、1行目で項目1と項目2を結合しています。2行目では、項目3を持たないため、1行目の3列目にrowspan属性で2を指定し、2行目のデータ3とデータ4を結合しています。

以上が、テーブルに関する基本的なタグの使い方です。テーブルは、データの整理や表示に有用な機能を持っています。

画像に関するタグ

HTMLでは、画像を表示するために<img>タグを使用します。画像は通常、Webページの中で視覚的な要素として使用されます。

<img>タグには、次のような属性があります。

src：画像のURLを指定します。必須の属性です。
alt：画像が読み込めなかった場合や、視覚障がい者のためのテキスト表示に使用されます。必須の属性です。
width：画像の幅をピクセル数で指定します。
height：画像の高さをピクセル数で指定します。

例えば、以下のように<img>タグを使用して画像を表示することができます。

<img src="https://example.com/images/sample.jpg" alt="サンプル画像">

また、幅や高さを指定することもできます。

<img src="https://example.com/images/sample.jpg" alt="サンプル画像" width="300" height="200">

<img>タグには、他にもいくつかの属性があります。例えば、画像にリンクを設定するための「usemap」属性、画像を拡大縮小可能にするための「sizes」属性、画像の表示方法を指定する「loading」属性などがあります。

画像はWebページにとって重要な要素であるため、alt属性を適切に設定することが大切です。画像が表示されなかった場合や、視覚障がい者がアクセスした場合にも、alt属性によって画像の内容を伝えることができます。また、画像のファイルサイズが大きすぎると、Webページの読み込み速度が遅くなるため、適切なファイルサイズを選択することも重要です。

動画・音声に関するタグ

<video>タグ

HTML5では、<video>タグを使って動画を表示することができます。以下のように書きます。

<video src="video.mp4" controls></video>

src属性に動画ファイルのパスを指定します。
controls属性を指定すると、再生コントロールが表示されます。

<audio>タグ

同様に、<audio>タグを使って音声を表示することができます。以下のように書きます。

<audio src="audio.mp3" controls></audio>

src属性に音声ファイルのパスを指定します。
controls属性を指定すると、再生コントロールが表示されます。

コントロールのカスタマイズ

<video>や<audio>タグで表示される再生コントロールは、ブラウザによって異なる場合があります。しかし、以下の属性を使用することで、カスタマイズすることができます。

controls：再生コントロールを表示する。
autoplay：自動再生する。
loop：繰り返し再生する。
muted：音声を消音する。
preload：事前にデータをダウンロードする。

<video src="video.mp4" controls autoplay loop muted preload="metadata"></video>
<audio src="audio.mp3" controls autoplay loop muted preload="auto"></audio>

字幕の追加方法

<video>タグでは、字幕を追加することができます。以下のように書きます。

<video src="video.mp4" controls>
  <track kind="subtitles" src="subtitles.vtt" label="English" default>
</video>

<track>タグを使います。
kind属性には、subtitlesやcaptions、descriptionsなどを指定します。
src属性には、字幕ファイルのパスを指定します。
label属性には、字幕の言語を指定します。
default属性を指定すると、自動的に字幕が表示されます。

リンクやナビゲーションに関するタグ

Webページには、別のページへのリンクやナビゲーションメニューを作成することができます。このセクションでは、リンクやナビゲーションに関連するHTMLタグについて説明します。

<nav>タグ

<nav>タグは、ナビゲーションメニューを定義するために使用されます。<nav>タグは、サイトの重要なセクションに対するリンクを提供することができます。このタグを使用することで、検索エンジンがページの内容を理解しやすくなります。

<nav>
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/about">会社概要</a></li>
    <li><a href="/services">サービス</a></li>
    <li><a href="/contact">お問い合わせ</a></li>
  </ul>
</nav>

<ul>と<li>タグ（ナビゲーションメニュー）

ナビゲーションメニューを作成する場合、<ul>と<li>を組み合わせることが多いです。

<nav>
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/about">会社概要</a></li>
    <li><a href="/services">サービス</a></li>
    <li><a href="/contact">お問い合わせ</a></li>
  </ul>
</nav>

<a>タグ

<a>タグは、別のページへのリンクを作成するために使用されます。<a>タグには、リンク先のURLをhref属性に指定する必要があります。

<a href="https://www.supuky.com">supuky.com</a>

<a>タグは、テキストや画像をリンクにすることができます。

<a href="https://www.supuky.com">
  <img src="supuky.jpg" alt="supuky-img">
</a>

外部サイトへのリンク

<a>タグを使用して、外部のWebサイトへのリンクを作成することができます。ただし、外部サイトへのリンクを設定する場合は、target="_blank"属性を追加して、リンク先が新しいタブで開かれるようにする必要があります。

以下は、外部サイトへのリンクを設定する例です。例えば、Googleのウェブサイトへのリンクを作成する場合、以下のように<a>タグを使用します。

<a href="https://www.google.com/" target="_blank">Google</a>

Google

このコードでは、リンク先のURLがhref属性に指定されています。また、target="_blank"属性が追加されており、リンク先が新しいタブで開かれるようになっています。リンクの表示文字列は、Googleとなっていますが、任意の文字列を使用することができます。

メタデータに関するタグ

Webページの情報を設定するためのタグについて説明します。

<head>タグ

<head>タグはHTML文書の先頭に記述し、Webページの情報を設定するためのタグが含まれます。主に以下のようなタグを含みます。 <title>タグはWebページのタイトルを設定するために使用されます。検索エンジンの検索結果ページに表示されるリンクのタイトルにもなります。例えば以下のように記述します。

<head>
  <title>サンプルページ</title>
</head>

<meta>タグ

<meta>タグはWebページの情報を設定するために使用されます。主に以下のような属性を設定することができます。

charset属性：文字エンコーディングを指定します。例えばUTF-8を指定する場合は以下のように記述します。

<meta charset="UTF-8">

name属性：検索エンジンやブラウザが使用する情報を指定します。例えば以下のように記述すると、キーワードと説明文を指定できます。

<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="description" content="このサイトはHTML、CSS、JavaScriptの学習に役立つ情報を提供しています。">

http-equiv属性：HTTPヘッダーを指定します。例えば以下のように記述すると、リフレッシュするまでの秒数を指定できます。

<meta http-equiv="refresh" content="5">

<link>タグ

<link>タグは外部ファイルの読み込みを設定するために使用されます。主に以下のような属性を設定することができます。

rel属性：外部ファイルとの関係を指定します。例えば以下のように記述すると、スタイルシートを読み込むことができます。

<link rel="stylesheet" href="style.css">

href属性：外部ファイルのパスを指定します。

以上が<meta>タグと<link>タグの基本的な使い方です。Webページの情報を適切に設定することで、検索エンジンでの検索結果の表示が改善されたり、Webページの表示速度が向上するなどの効果が期待できます。

SEOに関するタグ

SEO（Search Engine Optimization）は、ウェブサイトを検索エンジンで上位に表示するためのテクニックです。HTMLには、SEOに役立つ情報を提供するための特別なタグがあります。

description属性

<meta>タグのdescription属性は、ページの内容について簡単に説明するテキストを提供します。この属性には、キーワードやフレーズを含めることができますが、キーワードスタッフィングを避けるようにしてください。description属性は、検索エンジンの検索結果ページに表示されます。

例： <meta name=”description” content=”このブログでは、HTML、CSS、JavaScriptの情報発信をしています。”>

キーワードスタッフィングとは？

キーワードスタッフィングとは、ウェブページやブログ記事などのコンテンツ内に、意図的に大量のキーワードを詰め込むことを指します。この行為は、検索エンジン最適化（SEO）の手法の一つであり、検索エンジンに対して該当のキーワードに関するコンテンツを強調することを目的としています。
しかし、過剰なキーワードスタッフィングは、ユーザーにとって読みにくく、品質の低いコンテンツとして判断されることがあります。また、検索エンジンに対してもスパム的行為として認識され、ペナルティを受ける可能性があります。そのため、正当な方法でのキーワードの使用を心がけ、自然な形でキーワードを取り入れることが重要です。

keywords属性

<meta>タグのkeywords属性は、ページの内容に関連するキーワードやフレーズのリストを提供します。この属性には、キーワードスタッフィングを避けるようにしてください。keywords属性は、検索エンジンの検索結果ページには表示されませんが、一部の検索エンジンでは使用されている可能性があります。

例： <meta name=”keywords” content=”HTML, CSS, JavaScript”>

titleタグ

<title>タグは、ページのタイトルを定義します。このタグには、重要なキーワードを含めることができます。タイトルは、検索エンジンの検索結果ページに表示されます。また、ブラウザのタブにも表示されます。

例：<title>フロントエンドブログ</title>

alt属性

<img>タグのalt属性は、画像が読み込めない場合や、画像が視覚障害を持つ人にとってアクセスしづらい場合に、画像の説明を提供するテキストを定義します。alt属性には、重要なキーワードを含めることができます。

例： <img src=”html.png” alt=”HTMLのコード”>

以上のように、HTMLの特別なタグを使用することで、SEOに役立つ情報を提供することができます。ただし、キーワードスタッフィングを避け、ページの内容に関連するテキストを提供するようにしてください。

HTML5における新しい要素

HTML5では、新しい要素がいくつか追加されました。これらの要素は、ウェブページの意味的な構造を表すために使用されます。以下にいくつかの重要な新しい要素を紹介します。

<header>要素：ページ全体またはセクションのヘッダーを表します。通常、タイトル、ロゴ、検索ボックス、ナビゲーションなどが含まれます。
<footer>要素：ページ全体またはセクションのフッターを表します。通常、著作権情報、連絡先情報、SNSリンクなどが含まれます。
<section>要素：関連するコンテンツをまとめたブロックを表します。通常、見出しを含みます。
<article>要素：完全かつ独立したコンテンツブロックを表します。通常、ニュース記事、ブログポスト、フォーラム投稿などが含まれます。
<aside>要素：関連するコンテンツを補足するセクションを表します。通常、サイドバー、広告、関連記事などが含まれます。
<nav>要素：ナビゲーションリンクをまとめたセクションを表します。通常、ページ内のリンク、サイト内のリンク、外部サイトへのリンクなどが含まれます。