【初心者向け】HTMLの基本タグ一覧と使い方！コピペOKのサンプル付き
Web制作初心者でもすぐに使える基本タグ、よく使うタグ、CSS・JavaScriptとの違いもわかりやすく解説！
目次
HTMLの基本タグ一覧
HTMLを書くにあたり、使えるタグは山ほどあります。
しかし、要点を絞れば初めに覚えるタグは少しだけ。
まずはHTMLの構造を作っているタグを順番にご紹介します。
▼一般的なHTMLの構造
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのHTML</title>
</head>
<body>
<h1>こんにちは、HTML！</h1>
<p>これはHTMLの基本構造です。</p>
</body>
</html>文書構造を作るタグ
| タグ | 役割 |
|---|---|
<!DOCTYPE html> | HTMLのバージョン指定 |
<html> | HTML文書全体を囲む |
<head> | メタ情報を記述 |
<body> | 実際に表示される部分 |
<!DOCTYPE html>
このコードは「このページはHTML5で作られていますよ」とブラウザに伝えるものです。
HTML5を使う場合は、必ずこの一行を最初に書きます。
<html lang=”ja”>～</html>
<html>タグは、HTMLの文書がここから始まりますよ、という印です。lang="ja" は、このページが「日本語（ja）」で書かれていることをブラウザに教える設定です。
これを設定すると、検索エンジンやスクリーンリーダー（視覚障がい者向けの読み上げソフト）が適切にページを認識しやすくなります。
<head>～</head>
タグの中には、Webページの設定情報が入ります。
これは実際に画面には表示されませんが、ブラウザにとって重要な情報が含まれます。
<body>～</body>
<body>タグの中には、実際に画面に表示される内容を記述します。
head内で使用するタグ
<meta charset=”UTF-8″>
charset="UTF-8" は、文字コードを「UTF-8」に設定するものです。
これを指定しないと、日本語が正しく表示されないことがあります。
▼他のメタタグについてはこちらの記事で紹介しています
<title>タイトル</title>
<title>タグの中には、このページのタイトルを入れます。
このタイトルは、ブラウザのタブや検索エンジンの検索結果に表示されます。
body内で使用するタグ
| タグ | 役割 |
|---|---|
<h1> | 見出し |
<p> | 段落 |
<br> | 改行 |
<img> | 画像を表示 |
<a> | リンク |
<ul> | 箇条書き |
<div> | ブロック要素 |
<span> | インライン要素 |
<h1></h1>(<h1>～<h6>)：見出しに使うタグ
<h1>見出し</h1>
<h2>見出し</h2>
<h3>見出し</h3>見出しを作るタグです。<h1>は一番大きな見出しで、<h2>や<h3>と数字を変えると、小さい見出しになります。
筆者がコーディング初心者だったとき、「大きさが変わるだけなら<div>にクラスでスタイルをつければいいのでは？」と使っていなかったこともありました。
しかし、この見出しタグは本の目次で言う章タイトルを表していて、視覚障がいの方がwebサイトを訪問する際にブラウザと併用しているのがスクリーンリーダーに情報を伝えるのにも役立ちます。
<p></p>：本文の文章に使うタグ
<p>本文の文章</p>
<p>本文の文章</p>「段落」を表すタグです。通常の文章はタグで囲んで書きます。
改行が自動で入るので、文章を読みやすくするのに便利です。
<br>：文章を改行するタグ
<p>この文章を<br>途中で改行したい</p>強制的に改行したいときに使います。<p>は段落ごとに改行されますが、途中で改行したいときに便利です。
▼他の改行タグについての詳しい解説はこちら
<img>：画像を挿入するタグ
<img src="image.jpg" alt="説明文">画像を表示するタグです。src="画像のURL" で表示する画像を指定します。alt="説明文" は画像が表示されないときの代替テキストです。
▼imgタグについての詳しい解説はこちら
<a></a>：リンクを作るタグ
<a href="URL">リンク</a>クリックすると別のページに移動できるリンクを作るタグです。href="URL" に移動先のアドレスを入れます。
▼aタグについての詳しい解説はこちら
<ul><li></li></ul>：リストを作るタグ
<ul>
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
</ul>順番なしのリスト（箇条書き）を作ります。
リストの項目は <li> を使います。
<div></div>：ブロック要素を作るタグ
<div>本文や画像</div>大きなグループを作るためのタグです。
特にデザインやレイアウトを整えるときに使われます。
<span></span>：インライン要素を作るタグ
<span>テキスト</span>特定の文字や単語を部分的に装飾するときに使います。<div>と違って改行されません。
シンプルなWebページを作ってみよう【コピペOK】
ここまで学んだタグを使って、簡単な自己紹介ページを作ってみましょう！
▼簡単なウェブページのコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>自己紹介サイト</title>
</head>
<body>
<h1>自己紹介</h1>
<p>こんにちは！<br>私はWeb制作を勉強中です。</p>
<img src="profile.jpg" alt="プロフィール画像">
<a href="https://example.com">ここをクリックすると移動します</a>
<h2>私の好きな食べ物</h2>
<ul>
<li>りんご</li>
<li>ぶどう</li>
<li>みかん</li>
</ul>
<div>
<h2>タイトル</h2>
<p>ここに文章が入ります。</p>
</div>
<p>これは <span style="color: red;">赤い文字</span> です。</p>
</body>このコードをブラウザで開くと、自己紹介ページが表示されます。画像のパスを変更すると、自分の好きな画像を表示できますよ！
画像を変更したり、テキストを変えてみてどうなるか試してみましょう。
HTMLの役割
HTML（HyperText Markup Language） とは、「Webページの骨組みを作る言語」です。
例えば、家を建てるとき、まずは柱や壁などの骨組みを作りますよね？
その上に壁紙を貼ったり、家具を置いたりして部屋を整えていきます。
Webページでも同じで、まずHTMLでページの基本構造を作り、その後、CSSでデザインを整えたり、JavaScriptで動きをつけたりして完成させます。
HTMLとCSS・JavaScriptの違い
Webページを作るには、HTML・CSS・JavaScriptの3つが必要です。
HTMLは文章や画像を配置する「骨組み」です。
CSSを使うと、文字の色を変えたり、レイアウトを整えたりして「見た目」をきれいにできます。
そして、JavaScriptを使えば、ボタンを押したときに文字が変わる・スライドショーやアニメーションなど「動き」をつけることができます。
▼それぞれの役割
- HTML ：ページの構造を作る
- CSS：デザインや見た目を整える
- JavaScript ：ボタンをクリックしたときの動作など、ページに動きをつける
HTMLを効率よく学ぶためのコツ
全部覚えようとしない
よく使うタグだけを優先的に覚えれば大丈夫です。最初から全部覚えようとすると大変なので、少しずつ慣れていきましょう。
学習リソースを活用する
