HTML（HyperText Markup Language）はWebページを構成するマークアップ言語です。この記事では、よく使われるHTMLタグの一覧を表形式で紹介します。各タグの説明、設置箇所、記述例を含めて解説していきます。
基本構造タグ
基本構造タグは、HTML文書の骨格を形成するためのタグです。これらのタグが組み合わさって、HTML文書の基本構造が構築されます。
| タグ | 説明 | 設置箇所 | 記述例 |
|---|---|---|---|
<!DOCTYPE> |
HTML文書のバージョンを宣言する | ページの先頭 | <!DOCTYPE html> |
<html> |
HTML文書全体を囲む | ページ全体 | <html lang="ja">...</html> |
<head> |
ページのメタデータを格納する部分 | <html>内 |
<head>...</head> |
<title> |
ページのタイトルを指定する | <head>内 |
<title>タイトル</title> |
<meta> |
文字コードなどのメタデータを設定する | <head>内 |
<meta charset="UTF-8"> |
<link> |
外部CSSファイルを読み込む | <head>内 |
<link rel="stylesheet" href="style.css"> |
<body> |
ページのコンテンツ部分を囲む | <html>内 |
<body>...</body> |
見出しタグ
見出しタグは、ページ内のセクションやサブセクションの見出しを表現するために使用されます。これにより、文章の構造が整理され、ユーザーにとって読みやすくなります。
| タグ | 説明 | 設置箇所 | 記述例 |
|---|---|---|---|
<h1> |
最も大きな見出し | <body>内 |
<h1>見出し1</h1> |
<h2> |
2番目に大きな見出し | <body>内 |
<h2>見出し2</h2> |
<h3> |
3番目に大きな見出し | <body>内 |
<h3>見出し3</h3> |
<h4> |
4番目に大きな見出し | <body>内 |
<h4>見出し4</h4> |
段落とテキストタグ
段落とテキストタグは、文章を段落やテキストブロックに分けて表示するために使用されます。また、これらのタグを使って、特定の文字や文のスタイルを変更することもできます。
| タグ | 説明 | 設置箇所 | 記述例 |
|---|---|---|---|
<p> |
段落を作成する | <body>内 |
<p>これは段落です。</p> |
<br> |
改行を挿入する | <body>内 |
行1<br>行2 |
<strong> |
太字でテキストを表示する | <body>内 |
<strong>太字</strong> |
<em> |
斜体でテキストを表示する | <body>内 |
<em>斜体</em> |
<span> |
インライン要素をグループ化 | <body>内 |
<span>テキスト</span> |
リンクと画像タグ
リンクと画像タグは、ページ内にリンクや画像を埋め込むために使用されます。これにより、他のページへのリンクや、ビジュアルな要素をページに追加できます。
| タグ | 説明 | 設置箇所 | 記述例 |
|---|---|---|---|
<a> |
リンクを作成する | <body>内 |
<a href="https://example.com">リンク</a> |
<img> |
画像を表示する | <body>内 |
<img src="image.jpg" alt="説明文"> |
リストタグ
リストタグは、順序付きリストや無順序リスト、定義リストを作成するために使用されます。これにより、情報を整理しやすい形で表示できます。
| タグ | 説明 | 設置箇所 | 記述例 |
|---|---|---|---|
<ul> |
点リストを作成する | <body>内 |
<ul><li>項目1</li><li>項目2</li></ul> |
<ol> |
番号リストを作成する | <body>内 |
<ol><li>項目1</li><li>項目2</li></ol> |
<li> |
リストの項目を作成する | <ul>または<ol>内 |
<li>リスト項目</li> |
表タグ
表タグは、データを表形式で表示するために使用されます。行や列に沿って情報を整理し、視覚的に理解しやすくなります。
| タグ | 説明 | 設置箇所 | 記述例 |
|---|---|---|---|
<table> |
表を作成する | <body>内 |
<table>...</table> |
<tr> |
表の行を作成する | <table>内 |
<tr><td>セル1</td><td>セル2</td></tr> |
<td> |
表のデータセルを作成する | <tr>内 |
<td>データセル</td> |
<th> |
表の見出しセルを作成する | <tr>内 |
<th>見出しセル</th> |
フォームタグ
フォームタグは、ユーザーが入力できるフォームやボタンなどのインタラクティブな要素を作成するために使用されます。これにより、ユーザーとのやりとりが可能となります。
| タグ | 説明 | 設置箇所 | 記述例 |
|---|---|---|---|
<form> |
フォームを作成する | <body>内 |
<form action="送信先URL" method="post">...</form> |
<input> |
入力フィールドを作成する | <form>内 |
<input type="text" name="username"> |
<textarea> |
テキストエリアを作成する | <form>内 |
<textarea name="message" rows="5" cols="30"></textarea> |
<select> |
ドロップダウンリストを作成する | <form>内 |
<select name="gender"><option value="male">男性</option><option value="female">女性</option></select> |
<option> |
選択肢を追加する | <select>内 |
<option value="選択肢の値">選択肢</option> |
<button> |
ボタンを作成する | <form>内 |
<button type="submit">送信</button> |
セマンティックタグ
セマンティックタグは、コンテンツの構造や意味を明示的に表現するために使用されます。これにより、検索エンジンやブラウザがコンテンツの意味を理解しやすくなります。
| タグ | 説明 | 設置箇所 | 記述例 |
|---|---|---|---|
<header> |
ページやセクションのヘッダー部分 | <body>内 |
<header>...</header> |
<nav> |
ナビゲーションリンクを格納する | <body>内 |
<nav>...</nav> |
<article> |
独立したコンテンツを表す | <body>内 |
<article>...</article> |
<section> |
関連するコンテンツをセクション化する | <body>内 |
<section>...</section> |
<aside> |
サイドバーや関連情報を表す | <body>内 |
<aside>...</aside> |
<footer> |
ページやセクションのフッター部分 | <body>内 |
<footer>...</footer> |
オブジェクトとメディアタグ
オブジェクトとメディアタグは、ページ内に音声や動画などのマルチメディアコンテンツを埋め込むために使用されます。これにより、よりリッチなコンテンツを提供できます。
| タグ | 説明 | 設置箇所 | 記述例 |
|---|---|---|---|
<video> |
動画コンテンツを表示する | <body>内 |
<video src="video.mp4" controls></video> |
<audio> |
音声コンテンツを表示する | <body>内 |
<audio src="audio.mp3" controls></audio> |
<source> |
複数のメディアリソースを提供する | <video>または<audio>内 |
<source src="video.webm" type="video/webm"> |
<track> |
字幕や章などを追加する | <video>または<audio>内 |
<track src="subtitles.vtt" kind="subtitles" srclang="en" label="English"> |
その他のタグ
| タグ | 説明 | 設置箇所 | 記述例 |
|---|---|---|---|
<iframe> |
埋め込みフレームを作成する | <body>内 |
<iframe src="https://example.com"></iframe> |
<div> |
ブロックレベル要素をグループ化する | <body>内 |
<div>...</div> |
<pre> |
整形済みテキストを表示する | <body>内 |
<pre>コードやテキスト</pre> |
<blockquote> |
引用文を表す | <body>内 |
<blockquote>引用文</blockquote> |
<abbr> |
略語や頭字語を表す | <body>内 |
<abbr title="Hypertext Markup Language">HTML</abbr> |
<address> |
連絡先情報を表す | <body>内 |
<address>...</address> |
<code> |
コードを表示する | <body>内 |
<code>コード</code> |
<mark> |
強調されたテキストを表示する | <body>内 |
<mark>マークされたテキスト</mark> |
<q> |
短いインライン引用を表す | <body>内 |
<q>引用テキスト</q> |
<sub> |
下付き文字を表示する | <body>内 |
H<sub>2</sub>O |
<sup> |
上付き文字を表示する | <body>内 |
10<sup>2</sup> |
<time> |
時間や日付を表す | <body>内 |
<time datetime="2023-04-17">2023年4月17日</time> |
古い・非推奨タグ
| タグ | 説明 | 設置箇所 | 記述例 |
|---|---|---|---|
<b> |
太字でテキストを表示する | <body>内 |
<b>太字テキスト</b> |
<i> |
斜体でテキストを表示する | <body>内 |
<i>斜体テキスト</i> |
<u> |
下線を引いたテキストを表示する | <body>内 |
<u>下線テキスト</u> |
<font> |
テキストのフォントや色を指定する | <body>内 |
<font face="Arial" color="red" size="3">フォント指定テキスト</font> |
現在のHTML5では、<b>や<i>、<u>、<font>といったタグは、よりセマンティックなタグやCSSスタイルを用いたデザインが推奨されています。例えば、<b>や<i>の代わりに<strong>や<em>を使うことが推奨されており、<u>はCSSでテキスト装飾を行い、<font>の代わりにCSSを用いてフォントや色を指定することが推奨されています。
これで、HTMLでよく使われるタグの一覧とその使い方を紹介しました。この情報がHTMLを学ぶ際に役立つことを願っています。
コメント