HTMLとは｜タグ・属性・基本構造をやさしく解説

HTMLとは、Webページの中身と構造を作る、Web制作で最初に学ぶ言語です。この記事では実務で使う最低限の書き方に絞り、ページのひな形を自分で書けるところまで解説します。

HTMLの全体像

各STEPで学ぶことは次のとおりです。前のSTEPが次のSTEPの土台になるため、初めての人はSTEP1から順に読んでください。

すべてをまとめたひな形は、完成形のコードに載せています。

STEP1：HTMLの役割を知る

まずは、HTMLがどんな言語で、Webページの中で何を担当しているのかを押さえます。役割を先に知っておくと、CSSやJavaScriptとの区別がつきやすくなります。

HTMLとは

HTMLは「HyperText Markup Language」の略で、Webページの内容と構造をブラウザに伝えるための言語です。Webを構成する技術の中で、最も基本となるものです。

名前に含まれる2つの言葉は、それぞれ次の意味を持っています。

HTML・CSS・JavaScriptの役割分担

Webページは、主に3つの技術を組み合わせて作られています。HTMLは中身の担当で、見た目はCSSに任せる設計になっています。

HTMLファイルの形式

HTMLファイルは、タグで構造を付けたプレーンテキストです。拡張子は「.html」が基本で、「.htm」が使われることもあります。

サイトのトップページには「index.html」という名前がよく使われます。サブフォルダごとにindex.htmlを置くのも一般的です。作ったファイルはWebサーバーから配信され、どのブラウザでも表示できます。

出典：MDN Web Docs「HTML: ハイパーテキストマークアップ言語」

STEP2：タグと属性の書き方を覚える

タグを正しく書く

HTMLでは、「開始タグ＋内容＋終了タグ」のまとまりを要素と呼びます。例えば段落なら、次のように書きます。

<p>うちの猫は不機嫌です。</p>

終了タグの書き忘れは、初心者によくあるミスです。表示崩れの原因になるので、開始タグを書いたら終了タグもセットで書きましょう。

なお、タグ名は大文字・小文字を区別しません。ただし一貫性のため、小文字で書くのが慣習です。

タグを入れ子にする

要素の中には、別の要素を入れられます。これを入れ子（ネスト）と呼びます。守るルールは「後から開いたタグを先に閉じる」ことです。

<p>うちの猫は<strong>とても</strong>不機嫌です。</p>  <!-- 正しい -->
<p>うちの猫は<strong>とても不機嫌です。</p></strong>  <!-- 間違い：タグが交差している -->

タグどうしを交差させると、ブラウザは意図を推測して表示します。その結果、予期しない表示になることがあります。

終了タグのない「空要素」

内容を持たず、1つのタグだけで書く要素もあります。これを空要素と呼び、改行や画像など、何かを挿入・埋め込むときに使います。

<br>    <!-- 改行する -->
<br />  <!-- 上と同じ意味 -->

<br>と<br />は、どちらも正しい書き方です。末尾のスラッシュは書き方のスタイルの違いで、必須ではありません。動作は変わらないので、サイト内ではどちらかに揃えておくと読みやすくなります。

<script>は空要素に見えますが、空要素ではありません。必ず終了タグ</script>まで書きましょう。

属性で情報を追加する

属性は、開始タグの中に書く追加情報です。要素の設定や動作を調整するために使います。

実務でよく使うのが、画像を表示するimg要素と、リンクを作るa要素です。

<img src="cat.jpg" alt="眠っている猫" width="300" height="200">  <!-- 画像を表示する -->
<a href="demo.html">リンク</a>                                 <!-- リンクを作る -->

意味を持つ画像には、必ずalt属性を付けましょう。画像を見られない人にも、内容が伝わるようになります。

属性値は必ず引用符で囲む

仕様上は、空白や特定の記号を含まない値なら引用符を省略できます。ただし、空白を含む値で省略すると、意図しない解釈になります。

<a href="demo.html" title=The Mozilla homepage>リンク</a>  <!-- 「The」だけが値になる -->

この例では、「Mozilla」と「homepage」が別の属性として扱われてしまいます。ミスを防ぐため、属性値は常に引用符で囲みましょう。

引用符は、二重引用符（”）と単一引用符（’）のどちらでも使えます。ただし、1つの値の中で混ぜるとエラーになります。

記号をそのまま表示する

「<」「>」などの記号は、HTMLの構文に使われる特殊文字です。文字として表示したいときは、文字参照という書き方に置き換えます。

例えば、文章の中で「<p>」という文字を見せたい場合は次のように書きます。

<p>HTML では、&lt;p&gt; 要素で段落を定義します。</p>

文字参照は、最後のセミコロンまで書く必要があります。省略すると、誤解釈やエラーの原因になります。なお文字コードがUTF-8なら、ほかの記号はそのまま書いて問題ありません。

コードにメモを残す

<!--と-->で囲んだ部分はコメントと呼ばれ、ブラウザに無視されてページに表示されません。コードの説明メモや、一時的に表示させたくない部分の無効化に使います。

<p>コメントの外にいます。</p>
<!-- <p>コメントの中にいます。</p> -->

この例では、1行目の段落だけが表示されます。2行目はコメントなので、ページには表示されません。

出典：MDN「基本的な HTML の構文」

STEP3：HTML文書の骨組みを作る

タグの書き方がわかったら、1ページ分のHTMLを組み立てます。骨組みを書いて、ブラウザで表示するところまで進めましょう。

ページのひな形を作る

最小限の完全なWebページは、次のように書きます。

<!doctype html>                 <!-- ① -->
<html lang="ja">                <!-- ② -->
  <head>                        <!-- ③ -->
    <meta charset="utf-8" />    <!-- ④ -->
    <title>テストページ</title>  <!-- ⑤ -->
  </head>
  <body>                        <!-- ⑥ -->
    <p>これは私のページです。</p>
  </body>
</html>

headとbodyの違い

bodyには、テキストや画像など、ブラウザに表示する内容を入れます。一方のheadには、表示されないメタデータ※1を入れます。

headには、タイトルや文字コード、CSSへのリンク、ページの説明文などを書きます。ブラウザはこの情報を使って、ページを正しく表示します。

※1：メタデータ…ページそのものについての情報。ページの本文とは別に扱われます。

titleとh1の違い

どちらも「タイトル」と呼ばれることがあり、混同されやすい要素です。役割はまったく違うので、次の表で区別しておきましょう。

ファイルを保存してブラウザで表示する

ひな形を書いたら、ファイルとして保存してブラウザで開きます。手順は次のとおりです。

1. 作業用のフォルダーを作る（例：first-website）
2. コードエディターで新しいファイルを作り、ひな形を書く
3. ファイル名を「index.html」にして、作ったフォルダーに保存する
4. 保存したファイルをブラウザで開く

コードを書き換えたら、ファイルを保存してからブラウザを再読み込み（更新）します。保存しないと、変更は表示に反映されません。

画像などが表示されないときは、引用符の抜けがないか確認しましょう。ファイル名やパスの書き間違いも、よくある原因です。

出典：MDN「基本的な HTML の構文」「ヘッド部には何が入る? ウェブページのメタデータ」「HTML: コンテンツの作成」（ページ一覧）

STEP4：実務で必要な基本設定を追加する

骨組みができたら、実務で必要になる設定を加えます。ページの言語、スマホ表示、検索結果の説明文、外部ファイルの読み込みの4つです。

ページの言語を指定する

html要素の開始タグにlang属性を書くと、ページの言語を指定できます。日本語のページなら「ja」と書きます。

<html lang="ja">

言語を指定すると、検索エンジンがページの言語を正しく判定できます。読み上げソフトも、正しい発音で読めるようになります。

ページの一部だけ別の言語にしたい場合は、その部分にlang属性を付けます。

<p>日本語の文章の中の<span lang="en">English</span></p>

スマホ表示に対応させる

スマホで見やすく表示させるには、headに次の1行を書きます。表示領域を端末の幅に合わせ、100%の倍率で表示させる設定です。

<meta name="viewport" content="width=device-width, initial-scale=1" />

画面幅に合わせてレイアウトを変える、レスポンシブデザインもこの設定が前提になります。

user-scalable=noなどで、拡大を禁止するのは避けましょう。弱視のユーザーが文字を読めなくなり、アクセシビリティの基準（WCAG）の上でも問題になります。

検索結果用の説明文を書く

meta descriptionは、ページの内容を説明する文章です。検索結果に表示されることがあり、SEOにも関係します。

<meta name="description" content="ページの説明" />

同じmeta要素のkeywordsは、現在は使われていません。スパムに悪用されたため、検索エンジンから無視されています。

CSSとJavaScriptを読み込む

外部のCSSファイルとJavaScriptファイルは、headの中で読み込みます。

<link rel="stylesheet" href="style.css" />  <!-- CSSを読み込む -->
<script src="script.js" defer></script>     <!-- JavaScriptを読み込む -->

scriptに付けたdeferは、HTMLの読み込みが終わってからJavaScriptを実行させる指定です。まだ存在しない要素を操作してエラーになるのを防げるので、基本はdeferを付けて読み込みます。

CSSには、外部ファイルを読み込む以外の書き方もあります。場面に応じて、次のように使い分けます。

出典：MDN「ヘッド部には何が入る? ウェブページのメタデータ」「<meta name=”viewport”>」（ページ一覧）

STEP5：本文でよく使うタグで中身を書く

最後に、ひな形のbodyに実際の内容を書いていきます。ほとんどのページで使う、見出し・リスト・まとめ用の要素を紹介します。

見出しで文章を組み立てる

見出しはh1〜h6の6段階あり、数字が小さいほど上位の見出しです。本の「タイトル→章→節」のように、見出しと段落（p）を組み合わせて文章を組み立てます。

<h1>ブログのタイトル</h1>  <!-- ① -->
<p>導入の文章</p>
<h2>章の見出し</h2>        <!-- ② -->
<p>本文</p>
<h3>節の見出し</h3>        <!-- ③ -->
<p>本文</p>

文字を大きくしたいという理由で、見出しのレベルを選ぶのはやめましょう。見た目の調整はCSSの役割です。

見出しは、検索エンジンがページの重要なキーワードとして扱います。スクリーンリーダーの利用者も、見出しをたどって必要な情報を探します。

箇条書きを作る

項目を並べた箇条書きは、リストと呼ばれます。リスト全体をulまたはolで囲み、1項目ずつliで囲みます。順番に意味があるかどうかで使い分けます。

<ul>                  <!-- ① -->
  <li>牛乳</li>       <!-- ② -->
  <li>卵</li>
</ul>
<ol>                  <!-- ③ -->
  <li>フォルダーを作る</li>
  <li>ファイルを保存する</li>
</ol>

リストを入れ子にする

項目の中に、さらに細かい項目を入れることもできます。親の項目のliの中に、別のulやolを書きます。

<ol>
  <li>材料を混ぜ合わせる
    <ul>                            <!-- ① -->
      <li>粗めにしたいときは短時間</li>
      <li>滑らかにしたいときは長め</li>
    </ul>
  </li>                             <!-- ② -->
</ol>

要素をまとめる

divとspanは、それ自体に意味を持たない「まとめ役」の要素です。複数の要素をまとめて、CSSやJavaScriptで扱いたいときに使います。

<div class="shopping-cart">                    <!-- ① -->
  <h2>ショッピングカート</h2>
  <p>合計：3,000円</p>
</div>
<p>本文の中の<span class="note">補足</span>です。</p>  <!-- ② -->

divやspanには、class属性でラベルを付けて使うのがおすすめです。CSSやJavaScriptから指定しやすくなります。

divは便利ですが、使いすぎには注意しましょう。意味を持たない要素なので、多用するとコードが読みにくくなり、修正もしにくくなります。

ページの領域を分ける

ページの領域を表す専用の要素がある場合は、divよりもそちらを優先します。

出典：MDN「見出しと段落」「リスト」「文書とウェブサイトの構造」（ページ一覧）

完成形のコード：実務で使えるHTMLのひな形

STEP3の骨組みにSTEP4の設定とSTEP5の本文を加えると、次のひな形になります。新しいページを作るときは、このコードをコピーして使ってください。

表示をすぐに確かめたいときは、ブラウザ上でコードを試せるCodePenを使うと便利です。index.htmlの中身を、このコードに丸ごと貼り替えるだけで表示されます。

<!doctype html>                                  <!-- ① -->
<html lang="ja">                                 <!-- ② -->
  <head>
    <meta charset="utf-8" />                     <!-- ③ -->
    <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- ④ -->
    <meta name="description" content="ページの説明" /> <!-- ⑤ -->
    <title>ページのタイトル</title>              <!-- ⑥ -->
    <link rel="stylesheet" href="style.css" />   <!-- ⑦ -->
    <script src="script.js" defer></script>      <!-- ⑧ -->
  </head>
  <body>
    <h1>ページの見出し</h1>                      <!-- ⑨ -->
    <p>本文</p>
    <h2>章の見出し</h2>                          <!-- ⑩ -->
    <ul>                                         <!-- ⑪ -->
      <li>項目</li>
    </ul>
  </body>
</html>

さいごに

まとめ

HTMLは、Webページの中身と構造を作る言語です。まずは次の3つを押さえれば、実務の基本的な場面に対応できます。

新しいページを作るときは、完成形のひな形をコピーして書き始めてください。慣れてきたら、ほかのサイトのHTMLを開いて書き方を比べてみましょう。

よくある質問

「HTML5」と今のHTMLは違うもの？

現在のHTMLの仕様は、WHATWGが継続的に更新する「HTML Living Standard」で、バージョン番号はありません。

「HTML5」は、今ではモダンなWeb技術全般を指す言葉として使われています。書き方を調べるときは「HTML5」にこだわらず、現在のHTMLとして確認すれば大丈夫です。

<br>と<br />はどちらが正しい？

どちらも正しい書き方です。末尾のスラッシュは書き方のスタイルの違いで、必須ではありません。

画像のalt属性は省略してもいい？

意味を持つ画像には、必ず付けるべき属性です。画像を見られない人に、画像の内容を伝える役割があります。

divとsectionはどう使い分ける？

見出しを伴うページ内の区切りならsectionを使います。意味を持たせず、CSSやJavaScriptのためにまとめたいだけならdivを使います。

迷ったときは、まず意味を表す要素が使えないかを考え、当てはまるものがない場合にdivを選びましょう。

ほかのサイトのHTMLを見るには？

ページ上で右クリックし、「ページのソースを表示」を選ぶとHTMLを見られます。ブラウザの開発者ツールでも、headの中身などを確認できます。

参考にした公式情報

Mozilla公式 開発者向けドキュメント（MDN Web Docs）

HTMLの役割、タグと属性の書き方、ページのひな形とheadに書く設定を確認できます。

• HTML: ハイパーテキストマークアップ言語
• 基本的な HTML の構文
• ヘッド部には何が入る? ウェブページのメタデータ
• HTML: コンテンツの作成
• <meta name=”viewport”>
• 見出しと段落
• リスト
• 文書とウェブサイトの構造