【HTMLタグ使用例集】実用的なサンプルコード付きでご紹介
はじめに
今回の記事では、HTMLタグの具体的な使用例を実用的なサンプルコードとともに解説します。
HTMLタグは、ウェブページを構築する上で絶対に欠かせない要素です。
それぞれのタグが何を意味し、どのような役割を果たすのかを理解することで、より効率的にまたより意味のあるマークアップを行うことが可能になります。
この記事を通じて、一段と深い理解を得て、あなたのウェブデザインスキルを次のレベルに引き上げるお手伝いができれば幸いです。それでは、さっそく見ていきましょう！
目次
文書構造を定義するタグ
ウェブページを効率的に構築し、その内容を正確に伝えるためには、文書構造を適切に定義することが不可欠です。
この章では、ウェブページの基本構造を形成するために使用されるHTMLタグと、それらの具体的な使用例について解説します。
「head」と「body」タグの使用例
HTML文書は大きく分けて2つの部分で構成されています。それが「head」と「body」です。それぞれのタグの役割は以下の通りです。
<head>: このタグの中には、文書に関するメタ情報を保持します。メタ情報とは、ページのタイトル、文字コード、スタイルシートへのリンクなど、ページ自体の情報を指します。
<body>: ここには、実際にブラウザに表示される内容が入ります。テキスト、画像、リンク、テーブル、リストなど、あらゆるコンテンツがここに含まれます。
具体的な使用例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<title>My Sample Website</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Sample Website</h1>
<p>This is a sample paragraph.</p>
</body>
</html>この例では、「head」にページのタイトルと文字コード、スタイルシートへのリンクが、「body」には見出しと段落が含まれています。
HTML5セマンティックタグ（「header」、「footer」、「article」等）の使用例
HTML5では、より明確にページの構造を示すために新しいセマンティック（意味的）なタグが追加されました。これにより、検索エンジンやアクセシビリティツールなどが、ページの各部分が何を意味するのかをよりよく理解することができます。
ここでは、「header」、「footer」、「article」などのタグを使用した例を見てみましょう。
<!DOCTYPE html>
<html>
<body>
<header>
<h1>Welcome to My Sample Website</h1>
</header>
<article>
<h2>A Sample Article</h2>
<p>This is the content of a sample article.</p>
</article>
<footer>
<p>Copyright 2023. My Sample Website</p>
</footer>
</body>
</html>この例では、「header」にはページのヘッダー、「article」には記事、「footer」にはフッターが含まれています。
各タグがその内容の意味を明確に示しているため、検索エンジンやアクセシビリティツールは、これらの要素を適切に解釈することができます。
「div」と「span」タグの使用例
HTMLでは、「div」タグと「span」タグを使って、それぞれブロックレベルとインラインレベルの要素をグループ化することができます。これらのタグ自体には意味はありませんが、CSSと組み合わせて使用することで非常に強力なツールとなります。
例えば、次のように使用することができます。
<!DOCTYPE html>
<html>
<body>
<div id="header">
<h1>Welcome to My Sample Website</h1>
</div>
<div id="content">
<p>This is a <span class="highlight">sample</span> paragraph.</p>
</div>
<div id="footer">
<p>Copyright 2023. My Sample Website</p>
</div>
</body>
</html>この例では、「div」タグを使用してページのヘッダー、コンテンツ、フッターをそれぞれグループ化しています。また、「span」タグを使用して、段落内の特定のテキストをハイライトするためのスタイルを適用できるようにしています。
これにより、CSSで独自のスタイルを適用するための「フック」をHTMLに追加することができます。
テキストを装飾するタグ
ヘッダータグ（「h1」から「h6」）の使用例
ヘッダータグは、ページの構造とセクションの見出しを示す役割を果たします。
タグ名は「h1」から「h6」まであり、数字が大きくなるほど見出しのレベルが下がります。
それぞれのタグの使用例を以下に示します。
<!DOCTYPE html>
<html>
<body>
<h1>これは主見出し（h1タグ）です</h1>
<h2>これはサブ見出し（h2タグ）です</h2>
<h3>これはサブサブ見出し（h3タグ）です</h3>
<h4>これは更に下位の見出し（h4タグ）です</h4>
<h5>さらに下位の見出し（h5タグ）です</h5>
<h6>最も下位の見出し（h6タグ）です</h6>
</body>
</html>上記のコードは各種ヘッダータグを使用した例です。
文章の主題や節のタイトル、副題などを定義します。
視覚的には、通常、h1が最も大きく、h6が最も小さく表示されます。
強調タグ（「strong」、「em」）の使用例
テキストを強調するための主なタグには、「strong」と「em」があります。
「strong」は要素の内容が重要であることを示し、ブラウザでは通常太字で表示されます。
「em」は要素の内容が強調されるべきであることを示し、ブラウザでは通常斜体で表示されます。
それぞれのタグの使用例を以下に示します。
<!DOCTYPE html>
<html>
<body>
<p>これは<strong>重要な</strong>メッセージであり、<em>強調されるべき</em>ポイントが含まれています。</p>
</body>
</html>上記のコードは、テキストの一部を強調するための「strong」タグと「em」タグの使用例です。
「strong」は強い重要性を、「em」は軽い強調を表します。
「p」、「br」、「hr」タグの使用例
これらは文章の構造を整えるために用いられます。
「p」は段落、「br」は改行、「hr」は水平線をそれぞれ定義します。
それぞれのタグの使用例を以下に示します。
<!DOCTYPE html>
<html>
<body>
<p>これは一つ目の段落です。</p>
<p>これは二つ目の段落であり、<br>ここで改行されます。</p>
<hr>
<p>これは水平線の下の段落です。</p>
</body>
</html>上記のコードは、「p」、「br」、「hr」タグの使用例です。
これらは文章を構造化し、見やすさを提供します。
「p」タグは段落を作り、「br」タグは改行を、「hr」タグは区切り線を作ります。
リストとテーブルを作るタグ
「ul」、「ol」、「li」タグの使用例
HTMLでリストを作成するには、「ul」（順序なしリスト）、「ol」（順序付きリスト）、「li」（リストアイテム）タグを使用します。それぞれのタグの使用例を以下に示します。
<!DOCTYPE html>
<html>
<body>
<ul>
<li>リスト1（順序なし）</li>
<li>リスト2（順序なし）</li>
</ul>
<ol>
<li>リスト1（順序付き）</li>
<li>リスト2（順序付き）</li>
</ol>
</body>
</html>上記のコードでは、まず「ul」タグで順序なしリストを作成しています。
リストの各アイテムは「li」タグを使って定義します。
「ol」タグを使うと、順序付きリスト（数字やアルファベット順）を作成できます。
「table」、「tr」、「td」、「th」タグの使用例
HTMLでテーブルを作成するには、「table」（テーブル）、「tr」（テーブル行）、「td」（テーブルデータ）、「th」（テーブルヘッダー）タグを使用します。
それぞれのタグの使用例を以下に示します。
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>ヘッダー1</th>
<th>ヘッダー2</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
</table>
</body>
</html>
上記のコードでは、「table」タグでテーブルを定義し、「tr」タグで各行を定義しています。
テーブルのヘッダーは「th」タグで、テーブルのデータは「td」タグで定義します。
この例では、テーブルのボーダーは「1」に設定されています。
リンクと画像を埋め込むタグ
「a」タグの使用例
ウェブページ間でリンクを作成するためには、「a」タグを使います。
「href」属性でリンク先のURLを指定します。
また、「target」属性でリンクを開く方法を指定することも可能です。
タグの使用例を以下に示します。
<!DOCTYPE html>
<html>
<body>
<a href="https://www.example.com/" target="_blank">新しいタブでExample.comを開く
</a>
</body>
</html>このコードでは、「a」タグと「href」属性を使ってExample.comへのリンクを作成し、「target="_blank"」を指定することでリンクを新しいタブで開くようにしています。
「img」タグの使用例
ウェブページに画像を表示するには、「img」タグを使います。「src」属性で画像のURLまたはパスを指定し、「alt」属性で画像が表示できない場合の代替テキストを指定します。「width」や「height」属性で画像の大きさも指定可能です。タグの使用例を以下に示します。
<!DOCTYPE html>
<html>
<body>
<img src="https://www.example.com/path/to/image.jpg" alt="Example Image" width="500" height="300">
</body>
</html>このコードでは、「img」タグと「src」属性を使って画像を表示し、「alt」属性で代替テキストを指定し、「width」と「height」で画像の大きさを指定しています。
「iframe」タグの使用例
他のウェブページを現在のページ内に埋め込むには、「iframe」タグを使います。
「src」属性で埋め込むページのURLを指定します。
「width」や「height」属性で埋め込みフレームの大きさも指定可能です。
それぞれのタグの使用例を以下に示します。
<!DOCTYPE html>
<html>
<body>
<iframe src="https://www.example.com/" width="500" height="300"></iframe>
</body>
</html>このコードでは、「iframe」タグと「src」属性を使ってExample.comを現在のページ内に埋め込み、「width」と「height」でフレームの大きさを指定しています。
フォームを作るタグ
「form」タグの使用例
「form」タグは、HTMLフォームを作成するための基本タグです。
「action」属性には、フォームデータの送信先URLを、「method」属性には、データの送信方法を指定します。以下に、基本的なフォームのHTMLサンプルコードを示します。
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php" method="post">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>この例では、「form」タグ内に「label」タグと「input」タグを使用して、フォームを作成しています。「label」タグは、入力フィールドのラベルを作成し、「input」タグは、入力フィールド自体を作成します。
「input」、「textarea」、「select」、「option」タグの使用例
これらのタグは、HTMLフォーム内でユーザーからの入力を取得するために使用されます。
「input」タグは、さまざまな種類の入力フィールドを作成するために使用され、「textarea」タグは、複数行のテキスト入力フィールドを作成します。
「select」タグは、選択リストを作成し、「option」タグは、その選択リスト内の選択肢を作成します。
以下に、これらのタグを使用したHTMLサンプルコードを示します。
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br><br>
<label for="country">Country:</label><br>
<select id="country" name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="australia">Australia</option>
</select><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>この例では、フォームにテキスト入力フィールドと選択リストが含まれています。
HTML5で追加されたフォームタグ（「datalist」、「output」等）の使用例
HTML5では、「datalist」タグと「output」タグが追加されました。
「datalist」タグは、入力候補のリストを提供し、「output」タグは、計算結果などの出力を表示するために使用します。
以下に、「datalist」タグと「output」タグを使用したHTMLサンプルコードを示します。
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<input list="cars" name="car" id="car">
<datalist id="cars">
<option value="Volvo">
<option value="Ford">
<option value="Audi">
</datalist>
<br><br>
<input type="submit">
</form>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 + <input type="number" id="b" name="b" value="50">
= <output name="x" for="a b"></output>
</form>
</body>
</html>この例では、最初のフォームで「datalist」タグを使用して車のリストを提供し、2つ目のフォームで「output」タグを使用して2つの値の合計を表示しています。
まとめ
本記事では、HTMLタグの様々な使用例とそのサンプルコードを探ってきました。
全てを一度に理解することは難しいかもしれませんが、ここで紹介した基本的なタグを理解し、適切に使用することで、様々なタイプのウェブページを作成することが可能になります。
特に重要なのは、それぞれのタグがどのような目的で使用され、どのような属性を持つのかを理解することです。また、HTML5で追加された新しい要素も覚えておくと、より高度でインタラクティブなウェブページを作成する際に役立ちます。
しかし、ここで学んだことはあくまで一部です。HTMLにはさらに多くのタグや属性が存在します。
そして、これらをCSSやJavaScriptと組み合わせることで、限りなく可能性の広がるウェブページを作成することができます。