html よく 使う タグ

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. 項目1
  2. 項目2
  3. 項目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.png" 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> を正しく使用しましょう。