初心者でも簡単！HTMLタグ一覧と実践サンプル20選

はじめに

この記事を読めば、HTMLタグの使い方を習得して、独自のウェブページを作成することができるようになります。

HTMLタグ一覧を初心者向けに徹底解説し、使い方や注意点、カスタマイズ方法をサンプルコード付きで紹介します。

●HTMLタグの基本

まずはHTMLタグの基本を押さえましょう。

HTML（HyperText Markup Language）は、ウェブページを構築するためのマークアップ言語です。

タグを使って文章構造やデザインを定義します。

○HTMLタグの構造

HTMLタグは、次のような構造を持っています。

<タグ名 属性名="属性値">コンテンツ</タグ名>

<p style="color:red;">これは赤い文字です。</p>

●HTMLタグ一覧とサンプル

それでは、HTMLタグ一覧を見ていきましょう。

主要なHTMLタグを20個ピックアップし、それぞれの使い方や注意点、カスタマイズ方法をサンプルコード付きで紹介します。

①<!DOCTYPE html>

DOCTYPE宣言は、HTML文書のバージョンを指定するためのタグです。

HTML5では次のように記述します。

<!DOCTYPE html>

②<html>

htmlタグは、HTML文書のルート要素を表します。

属性として言語を指定することができます。

<html lang="ja">

③<head>

headタグは、ウェブページのメタデータを格納するためのタグです。

タイトルやスタイルシート、スクリプトなどを含みます。

<head>
  <title>ページタイトル</title>
</head>

④<title>

titleタグは、ウェブページのタイトルを指定します。

ブラウザのタブに表示されます。

<title>ページタイトル</title>

⑤<body>

bodyタグは、ウェブページのコンテンツ部分を定義します。

表示されるテキストや画像、リンクなどを含みます。

<body>
  <p>ここにコンテンツが入ります。</p>
</body>

⑥<h1>～<h6>

h1～h6タグは、見出しを定義するためのタグです。

h1が最も大きく、h6が最も小さい見出しになります。

<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>

⑦<p>

pタグは、段落を定義します。

改行やインデントが自動的に適用されます。

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

⑧<a>

aタグは、リンクを定義するためのタグです。

href属性でリンク先のURLを指定します。

<a href="https://example.com">ここをクリック</a>

⑨<img>

imgタグは、画像を表示するためのタグです。

src属性で画像ファイルのパスを指定し、alt属性で代替テキストを記述します。

<img src="image.jpg" alt="サンプル画像">

⑩<ul>と<li>

ulタグとliタグは、箇条書きのリストを作成するためのタグです。

ulタグでリスト全体を囲み、liタグでリストの各項目を定義します。

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

⑪<ol>

olタグは、番号付きリストを作成するためのタグです。

使い方はulタグと同様です。

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

⑫<table>

tableタグは、表を作成するためのタグです。

trタグで行を、thタグで見出しセル、tdタグでデータセルを定義します。

<table>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
</table>

⑬<form>

formタグは、入力フォームを作成するためのタグです。

action属性で送信先のURL、method属性で送信方法を指定します。

<form action="https://example.com" method="post">
  <input type="text" name="username">
  <input type="submit" value="送信">
</form>

⑭<input>

inputタグは、フォーム内でユーザーが入力できるコントロールを作成するためのタグです。

type属性で入力タイプを指定し、name属性で入力値の名前を設定します。

<input type="text" name="username" placeholder="ユーザー名">

⑮<textarea>

textareaタグは、複数行のテキスト入力エリアを作成するためのタグです。

rows属性やcols属性でサイズを指定できます。

<textarea name="comment" rows="5" cols="30"></textarea>

⑯<select>と<option>

selectタグとoptionタグは、ドロップダウンリストを作成するためのタグです。

selectタグでリスト全体を囲み、optionタグで各選択肢を定義します。

<select name="gender">
  <option value="male">男性</option>
  <option value="female">女性</option>
</select>

⑰<button>

buttonタグは、ボタンを作成するためのタグです。

type属性でボタンの機能を指定し、クリックイベントを実行できます。

<button type="button" onclick="alert('クリックされました')">クリック</button>

⑱<div>

divタグは、コンテンツをグループ化し、スタイルを適用するためのタグです。

特に意味を持たないため、CSSでデザインする際に便利です。

<div style="background-color: yellow;">
  <p>この文章は黄色の背景になります。</p>
</div>

⑲<span>

spanタグは、インライン要素をグループ化し、スタイルを適用するためのタグです。

divタグと同様に特に意味を持たず、CSSでデザインする際に便利です

<p>この<span style="color: red;">文章</span>は赤くなります。</p>

⑳<style>

styleタグは、ウェブページ内にCSSスタイルを記述するためのタグです。

headタグ内に配置します。

<head>
  <style>
    body {
      background-color: lightblue;
    }
  </style>
</head>

これで、HTMLタグ一覧とそれぞれの使い方や注意点、カスタマイズ方法をサンプルコード付きで紹介しました。

これらのタグを組み合わせることで、独自のウェブページを作成することができます。

実践的な応用例として、シンプルなウェブページのサンプルコードを示します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルページ</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
    }
    h1 {
      color: #333;
    }
  </style>
</head>
<body>
  <h1>サンプルページ</h1>
  <p>これはサンプルページです。</p>
  <ul>
    <li><a href="https://example.com/page1">ページ1</a></li>
    <li><a href="https://example.com/page2">ページ2</a></li>
  </ul>
  <form action="https://example.com/submit" method="post">
    <label for="username">ユーザー名:</label>
    <input type="text" id="username" name="username" placeholder="ユーザー名">
    <input type="submit" value="送信">
  </form>
</body>
</html>

このサンプルコードでは、HTMLタグを使ってシンプルなウェブページを作成しています。

ページの構造やデザインをカスタマイズするには、HTMLタグの属性やCSSを変更してください。