HTML / CSS

HTML入門: HTMLの基本の書き方とタグの使い方

2025-9-4

#HTML#基本#タグ#構文

📄

ホームページなどのウェブサイトを作成するために必須なHTMLについて解説します。

手を動かしながら学ぶことができるように、実際に簡単なコードを書きながら解説するよ！

HTMLとは？

HTML(エイチティーエムエル)とは、Hyper Text Markup Languageの略で、ブラウザ上に文字や画像を表示するためのマークアップ言語です。

HTMLはプログラミング言語ではなく、マークアップ言語と呼ばれます。ウェブサイトを作成するために作成されました。

ブラウザで表示するためにそれぞれが独自で作ると、ブラウザを作る人もウェブサイトを作る人も大変ですよね。

HTMLは、ブラウザで表示するためのルールというようなイメージです。

文字を表示したければ〇〇、画像を表示したければ〇〇というようなルールを作っておくことで、ブラウザがそのルールに従って表示することができるようになります。

このサイトやこのページもHTMLで作っています。

補足

ブラウザとは、ユーザーが検索したウェブサイトを表示するソフトのことです。
ブラウザの種類はたくさんあり、Googleが提供しているGoogle ChromeやMicroSoftが提供している、Microsoft Edgeなどがあります。

iPhoneを使っている人は馴染みのあるSafariもAppleが提供しているブラウザの一種です。

今このページを閲覧しているみなさんも何かしらのブラウザを利用していると思います。

HTMLを見てみよう

HTMLはこのような感じで文字やアルファベットなどを用いて作ります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>NakoBaseのタイトル</title>
</head>
<body>
  <h1>NakoBase</h1>
  <p>HTMLの基本を学ぼう</p>
</body>
</html>

これは簡単な例ですが、これだけでもブラウザで表示することができるよ！

実際にHTMLを書いて表示させてみよう

それでは実際にHTMLを書いて表示させてみましょう！

HTMLとCSSを学習するためのツールを用意の記事内でエディタとブラウザを用意する方法を説明しているので、まだの方は参考にしてみてください。

VSCodeを開いてファイルを作成

こちらのようにまずはVSCodeを開いてください。

そして、New Fileからsample.htmlという名前でファイルを作成してください。(ファイル名はなんでもOKです)

HTMLをコピーする

先ほどのサンプルと同じこちらのHTMLをコピーして、sample.htmlに貼り付けてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>NakoBaseのタイトル</title>
</head>
<body>
  <h1>NakoBase</h1>
  <p>HTMLの基本を学ぼう</p>
</body>
</html>

エディター画面でこのようにできていればOKです！

変更の保存を忘れずに行ってください。

ブラウザで表示

ブラウザに表示するために、ブラウザ(Chromeなど)を開き、作成したsample.htmlをドラッグ&ドロップしてください。

ブラウザでこのように表示されれば作成したHTMLが表示されています！

この流れを反復

では、HTMLファイルを以下のように変更してみましょう。

sample.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>NakoBaseのタイトル</title>
</head>
<body>
  <h1>変更したよ</h1>
  <p>HTMLの基本を学ぼう</p>
</body>
</html>

これでブラウザを更新(リロード)すると表示が変わっていると思います。

このように、HTMLファイルを更新 => ブラウザをリロード を繰り返すことで、表示を確認しながらHTMLを作り進めていくことができます。

この流れを反復していきウェブサイトを作っていきます。

補足

HTMLの文字の大きさや色などは、CSSというスタイルシート言語を使って変更することができます。

今は装飾なしのシンプルな見た目ですが、CSSを使うことで見た目を変更することができます。

CSSについては別の記事で解説しますね。

HTMLの書き方基本ルール

HTMLを作成できたところで、HTMLの書き方の基本ルールを学んでいきましょう！

先ほどのsample.htmlに書いて進めると理解が深まると思います。

基本ルール1: HTMLタグ

HTMLの基本は、<タグ名>のようなHTMLタグと呼ばれるものです。

<タグ名>(開始タグ)と</タグ名>(終了タグ)のペアで囲むことで、HTMLタグとして認識されます。

タグの種類はたくさんあり、どのタグを使うかによって中身の役割や意味が変わります。

<タグ名>内容</タグ名>

例

<h1>見出し</h1>
<p>段落のテキスト</p>

自己終了タグ

一部のタグは内容を持たないため、終了タグが不要なタグもあります。

使ううちに慣れていくので全て覚えてなくても問題ないです！

<img src="画像.jpg" alt="説明"> <!-- 画像を表示するHTMLタグ -->
<br> <!-- 改行するHTMLタグ -->
<hr> <!-- 水平線を表示するHTMLタグ -->

基本ルール2: 属性

HTMLタグは属性を持ち、タグの動作を制御します。

例えば、画像を表示するタグ<img>は、srcやaltという属性を持ちます。

例

<img src="画像.jpg" alt="説明">

srcは画像のパス(ファイルの場所)を指定する属性で、altは画像の説明を指定する属性です。

つまり、HTMLタグと属性を覚えていくことでHTMLを作成することができるということですね！

HTMLタグを適切に使うことで、ユーザーにとって見やすく、Googleなどの検索エンジンにも認識しやすいHTMLを作成することができます。

HTMLの基本構造

基本ルールが分かったところで、HTMLの基本構造とそれぞれのタグの説明していきます。

ドキュメントタイプ宣言

HTMLを作成する時に確実に使うタグです。

このファイルはHTMLファイルであることを宣言するために使いますのでお決まりとしてHTMLファイルの一番上に書くようにしましょう。

<!DOCTYPE html>

htmlタグ

こちらも確実に使うタグです。

上のドキュメントタイプ宣言の下に書き、全体を囲みます。

<!DOCTYPE html>
<html lang="ja">
</html>

HTMLタグは属性として、langを指定することが多いです。

langを指定することで、ウェブページの情報を設定するために使い、ブラウザ上には表示されません。

headタグ

主にウェブページの情報を設定するために使い、ブラウザ上には表示されません。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>NakoBaseのタイトル</title>
  </head>
</html>

例えば、例のようにtitleタグを使うことで、ウェブページのタイトルを指定することができます。

また、例のようにmetaタグを使うことで、ウェブページの文字コードを指定することができます。

文字コードについては現時点で理解していなくても問題ないですが、文字化けなどを防ぐために日本語のサイトの場合はUTF-8を指定しておくことが無難です。

headタグに書けるタグはたくさんありますので別の記事で紹介します。必要に応じて少しずつ覚えていけば問題ありません。

bodyタグ

bodyタグは主にウェブページの内容を設定するために使います。

基本的にこのタグの中身がブラウザ上に表示されます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>NakoBaseのタイトル</title>
  </head>
  <body>
    <h1>NakoBase</h1>
    <p>HTMLの基本を学ぼう</p>
  </body>
</html>

ここまでに紹介したタグがHTMLを書く場合の基本的な構造です。

HTMLを書く場合は、この構造を雛形として書いてしまうと便利です。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>ウェブサイトのタイトル</title>
  </head>
  <body>
  </body>
</html>

補足

ちなみに、htmlタグの中身やheadタグの中身など、入れ子構造になっている箇所にスペースが2つ入っていると思います。これをインデントといいます。

インデントはコードを見やすくするために使います。インデントを適切にすることで、コードの構造が分かりやすくなります。

余裕があれば例のようにインデントをつけて書いてみてください。

よく使うHTMLタグ

ここからは、実際にウェブサイトを作成する際によく使うタグを紹介していきます。

基本的には、bodyタグの中に書いていくタグです。

見出しタグ (h1〜h6)

見出しを表すタグです。

h1が最も大きい見出しです。

<h1>最も大きな見出し</h1>
<h2>2番目に大きな見出し</h2>
<h3>3番目に大きな見出し</h3>
<h4>4番目に大きな見出し</h4>
<h5>5番目に大きな見出し</h5>
<h6>最も小さな見出し</h6>

ブラウザには初期スタイルが適用されているので、文字サイズも見出しが大きくなるほど大きくなります。

段落タグ (p)

文章の段落を表すタグです。

文章などを多く使うウェブサイトではもっとも多く使われるタグかもしれません。

<p>これは段落のテキストです。</p>
<p>新しい段落は新しいpタグで作成します。</p>

ブラウザではこのように表示されます。

今見ていただいているこのページもpタグが非常に多く使われています。

改行タグ (br)

文章内で改行を挿入するタグです。

<p>1行目のテキスト<br>2行目のテキスト</p>

ブラウザではこのように表示されます。

例のようにpタグ内で使うことが多いです。

水平線タグ (hr)

ページに水平線を引くタグです。

<p>上の内容</p>
<hr>
<p>下の内容</p>

ページや内容の区切りなどに使いますが、見辛くならない程度に使うことをオススメします。

強調タグ（strong, em）

テキストを強調表示するタグです。

<p>これは<strong>太字</strong>のテキストです。</p>
<p>これは<em>斜体</em>のテキストです。</p>

ブラウザではこのように表示されます。

strongタグは太字に、emタグでは斜体で表示されます。

リストタグ（ul, ol, li）

リストを作成するタグです。

ulは番号なしリスト(箇条書き)、olは番号付きリストを作成するタグです。

liはリストの項目を作成するタグで、必ずulやolの中に書きます。

<!-- 番号なしリスト -->
<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

<!-- 番号付きリスト -->
<ol>
  <li>1番目の項目</li>
  <li>2番目の項目</li>
  <li>3番目の項目</li>
</ol>

ブラウザではこのように表示されます。

順序付けする必要のない場合は、ulタグを使い、順序付けする必要がある場合はolタグを使いましょう。

リンクタグ（a）

他のページやファイルへのリンクを作成するタグです。

aタグはhref属性を使ってリンク先を指定することができます。

<a href="https://nakobase.com">リンクテキスト</a>
<a href="/about">ページへのリンク</a>

ブラウザではこのように表示されます。

非常によく使うタグです。

画像タグ（img）

画像を表示するタグです。

src属性を使って画像のパス(ファイルの場所)を指定します。

alt属性は画像の説明を指定することができます。

<img src="画像ファイル.jpg" alt="画像の説明">
<img src="logo.png" alt="ロゴ">

画像の形式は、jpg、png、gif、svgなどが表示できます。

PDF形式の画像は表示できません。

ここまででもちょこちょこ出現していますが、コメントを作成する書き方です。

で囲むことで、コメントをHTML上に残すことができます。

<!-- コメント -->

コメントは自分用のメモでブラウザ上には表示されません。コードを見やすくするために使うことが多いです。

画面上では見えませんが、他の人が見ようとすれば見れるものですので機密情報などは残さないようにしましょう。

ここまでに紹介したタグがよく使うHTMLタグです。

実際にウェブサイトを作成する際は、これらのタグを組み合わせて作成していきます。

実践的な例

ここまでで紹介したタグを組み合わせて、実際に自己紹介のウェブサイトを作成してみましょう！

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>私の自己紹介ページ</title>
  </head>
  <body>
    <h1>ようこそ！私の自己紹介ページへ</h1>
    <p>これは私の自己紹介ページです。</p>
    <h2>私の趣味</h2>
    <ul>
      <li>読書</li>
      <li>音楽鑑賞</li>
      <li>プログラミング</li>
    </ul>
    <h2>お気に入りのサイト</h2>
    <p><a href="https://www.google.com">Google</a>は便利な検索エンジンです。</p>
    <hr>
    <p><em>このページはHTMLの練習で作成されました。</em></p>
  </body>
</html>

このように表示されていれば完成です。

ご自身の情報に合わせて修正したりするとより良い練習になりますよ！

id属性とclass属性

id属性とclass属性は、HTMLタグに対して管理名を付けることができる属性です。

ブラウザの表示には関係ないですが、別の記事で紹介するCSSやJavaScriptで主に利用されます。

<p id="title">タイトル</p>
<p class="text">テキスト</p>

例えば、titleというidの色は赤に、textというclassの色は青にするというようなことができます。

CSSを学習していくとおのずと理解できますので、まずはこのような概念を理解しておきましょう。

補足

idとclassはどのHTMLタグにも付けることができる
idとclassは英数字を使う(日本語だと不具合が起きる可能性があります)
idは1つのHTMLタグに1つしか付けられない
classは1つのHTMLタグに複数付けることができる

まとめ

HTMLの基本について解説しました。

本記事に基本が詰まっているので実際に手を動かして練習してみてください。

HTMLの基本を理解したら、次はCSSを学んでスタイリングを追加したり、より複雑な構造を作成したりすることができます。まずは基本的なタグを練習して、HTMLに慣れていきましょう！