HTML 常用タグ大全：入門から応用まで
目次
HTML 基礎タグ
HTML文書の基本構造を形成するために使用されるタグを紹介します。
段落タグ <p>
<p>タグは、文章を段落として定義します。ブラウザは、段落の前後に空白を自動的に挿入します。
例:
<p>これは段落です。</p>
<p>これは別の段落です。</p>表示結果:
これは段落です。
これは別の段落です。
見出しタグ <h1> - <h6>
<h1> から <h6> までのタグは、文書の見出しを定義します。 <h1> が最も重要な見出しで、 <h6> が最も重要度の低い見出しです。
例:
<h1>これは見出し1です</h1>
<h2>これは見出し2です</h2>
<h3>これは見出し3です</h3>
表示結果:
これは見出し1です
これは見出し2です
これは見出し3です
改行タグ <br>
<br>タグは、改行を挿入します。
例:
これは一行目です。<br>
これは二行目です。表示結果:
これは一行目です。
これは二行目です。
水平線タグ <hr>
<hr>タグは、水平線を挿入します。
例:
<p>段落1</p>
<hr>
<p>段落2</p>
表示結果:
段落1
段落2
HTML 書式設定タグ
テキストの外観を変更するために使用されるタグを紹介します。
太字タグ <b> と <strong>
<b> タグと <strong> タグは、テキストを太字にします。 <strong> タグは、 <b> タグよりも意味的に重要度が高いことを示します。
例:
<p>これは<b>太字のテキスト</b>です。</p>
<p>これは<strong>重要な太字のテキスト</strong>です。</p>
表示結果:
これは太字のテキストです。
これは重要な太字のテキストです。
斜体タグ <i> と <em>
<i> タグと <em> タグは、テキストを斜体にします。 <em> タグは、 <i> タグよりも意味的に強調されていることを示します。
例:
<p>これは<i>斜体のテキスト</i>です。</p>
<p>これは<em>強調された斜体のテキスト</em>です。</p>表示結果:
これは斜体のテキストです。
これは強調された斜体のテキストです。
取り消し線タグ <del> と <s>
<del> タグと <s> タグは、テキストに取り消し線を引きます。
例:
<p>これは<del>削除されたテキスト</del>です。</p>
<p>これは<s>取り消されたテキスト</s>です。</p>
表示結果:
これは削除されたテキストです。
これは取り消されたテキストです。
下線タグ <u> と <ins>
<u> タグと <ins> タグは、テキストに下線を引きます。 <ins> タグは、 <u> タグよりも意味的に挿入されたテキストであることを示します。
例:
<p>これは<u>下線付きのテキスト</u>です。</p>
<p>これは<ins>挿入された下線付きのテキスト</ins>です。</p>
表示結果:
これは<u>下線付きのテキスト</u>です。
これは<ins>挿入された下線付きのテキスト</ins>です。
HTML リストタグ
項目のリストを作成するために使用されるタグを紹介します。
順序なしリスト <ul>, <li>
<ul> タグは順序なしリストを、 <li> タグはリストの項目を定義します。
例:
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
表示結果:
- 項目1
- 項目2
- 項目3
順序付きリスト <ol>, <li>
<ol> タグは順序付きリストを、 <li> タグはリストの項目を定義します。
例:
<ol>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>
表示結果:
- 項目1
- 項目2
- 項目3
定義リスト <dl>, <dt>, <dd>
<dl> タグは定義リストを、 <dt> タグは用語を、 <dd> タグは定義を定義します。
例:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language の略です。</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets の略です。</dd>
</dl>
表示結果:
HTML
HyperText Markup Language の略です。
CSS
Cascading Style Sheets の略です。
HTML リンクタグ
リンクタグは、ウェブページ内や外部リソースへのリンクを作成するために使用されます。HTML では、<a> タグを使用してリンクを定義します。
<a> タグ
<a> タグは、ハイパーリンクを定義します。href 属性には、リンク先の URL を指定します。
例:
<a href="https://www.example.com">Example Website</a>
表示結果: Example Website
リンクのテキスト部分がクリック可能で、指定された URL に移動します。
アンカーリンク
アンカーリンクを使用すると、同じページ内の特定の場所にリンクできます。id 属性でターゲット要素に名前を付け、href 属性でその名前を指定します。
例:
<a href="#section1">セクション1へ</a>
<h2 id="section1">セクション1</h2>
<p>この部分がアンカーリンクのターゲットです。</p>
表示結果: セクション1へ
セクション1
この部分がアンカーリンクのターゲットです。
HTML 画像タグ
画像タグは、ウェブページに画像を埋め込むために使用されます。<img> タグを使用します。
<img> タグ
<img> タグは、画像を挿入します。src 属性には画像ファイルの URL を指定し、alt 属性には画像が表示されない場合に代替テキストを指定します。
例:
<img src="logo.webp" alt="会社のロゴ" width="200" height="100">
表示結果:
画像が表示され、alt 属性で指定された代替テキストが画像の説明として使用されます。
HTML 表タグ
表タグは、データを表形式で表示するために使用されます。以下のタグを使用して表を作成します。
<table> タグ
<table> タグは、表を定義します。<tr>, <th>, <td> タグと組み合わせて使用します。
<tr> タグ
<tr> タグは、表の行を定義します。
<th> タグ
<th> タグは、表のヘッダーセルを定義します。通常、太字で中央揃えのテキストが表示されます。
<td> タグ
<td> タグは、表のデータセルを定義します。
例:
<table>
<tr>
<th>名前</th>
<th>年齢</th>
</tr>
<tr>
<td>田中太郎</td>
<td>30</td>
</tr>
<tr>
<td>佐藤花子</td>
<td>25</td>
</tr>
</table>
表示結果:
| 名前 | 年齢 |
|---|---|
| 田中太郎 | 30 |
| 佐藤花子 | 25 |
HTML フォームタグ
フォームタグは、ユーザーがデータを入力するためのフォームを作成するために使用されます。以下のタグを使用してフォームを作成します。
<form> タグ
<form> タグは、フォーム全体を定義します。action 属性には、フォームデータの送信先 URL を指定し、method 属性には、データ送信方法を指定します（通常は GET または POST）。
例:
<form action="/submit" method="post">
<!-- フォームの入力フィールドはここに置く -->
</form><input> タグ
<input> タグは、ユーザーがデータを入力するためのフィールドを定義します。type 属性には、フィールドの種類を指定します。
例:
<form action="/submit" method="post">
名前: <input type="text" name="name">
メール: <input type="email" name="email">
<input type="submit" value="送信">
</form>
<button> タグ
<button> タグは、ボタンを定義します。type 属性には、ボタンの種類を指定できます（submit, reset, button）。
例:
<button type="submit">送信</button>
<select> タグと <option> タグ
<select> タグは、ドロップダウンリストを作成します。<option> タグは、ドロップダウンリストの各項目を定義します。
例:
<form action="/submit" method="post">
性別:
<select name="gender">
<option value="male">男性</option>
<option value="female">女性</option>
<option value="other">その他</option>
</select>
<input type="submit" value="送信">
</form>
FAQ
Q1: href 属性とは何ですか？
A1: href 属性は、<a> タグに使用され、リンク先の URL を指定します。これにより、ユーザーがリンクをクリックすると、指定された URL に移動します。
Q2: <img> タグの alt 属性の役割は何ですか？
A2: alt 属性は、画像が表示できない場合やスクリーンリーダーを使用しているユーザーのために、画像の代替テキストを提供します。これにより、視覚障害のあるユーザーにも画像の内容を伝えることができます。
Q3: <table> タグを使用する際の注意点は何ですか？
A3: <table> タグを使用する際は、表の構造が適切であることを確認してください。<thead>, <tbody>, <tfoot> を使って表のセクションを分けると、アクセシビリティと可読性が向上します。また、データの整合性を保つために <th> と <td> を正しく使用しましょう。