HTML入門｜初心者向けに基本構造・書き方・タグを実例で解説

はじめに

HTMLを初めて学ぶ人に向けて、HTMLの役割、基本構造、よく使うタグ、ファイルの作成方法を解説します。

まずは短いHTMLファイルを作ってブラウザに表示し、その後で見出し・段落・画像・リンクなどの書き方を確認します。プログラミング経験は必要ありません。

HTMLとは

HTMLは、Webページの内容に構造や意味を与えるためのマークアップ言語です。「HyperText Markup Language」の略で、日本語では「ハイパーテキスト・マークアップ・ランゲージ」と呼ばれます。

たとえば、文章のどこが見出しなのか、どこからどこまでが段落なのか、どの画像を表示するのかをタグで記述します。

Webページの制作では、主に次の3つを組み合わせます。

技術	主な役割
HTML	見出し・段落・画像など、内容の構造や意味を表す
CSS	文字の色・大きさ・配置など、見た目を整える
JavaScript	操作への反応や、表示内容の動的な変更を行う

HTMLだけでもページは表示できます。見た目を整えたり、操作に応じた動作を加えたりするときに、CSSやJavaScriptを使います。

CSSとは

CSSは、HTMLで記述した要素の見た目を整えるための言語です。

文字の色や大きさ、背景、余白、画像のサイズ、コンテンツの配置などを指定できます。

HTMLで「見出し」「段落」といった役割を記述し、CSSでそれらをどのように表示するかを調整します。

JavaScriptとは

JavaScriptは、ボタンを押したときの処理や、表示内容の変更などを実装するプログラミング言語です。

HTML内のscript要素に直接書く方法と、別のJavaScriptファイルを読み込む方法があります。たとえば、次のコードでは段落の文字を変更できます。

<p id="message">変更前の文章です。</p>

<script>
  document.getElementById("message").textContent = "Hello";
</script>

この例では、段落が作られた後にスクリプトを実行するため、scriptを段落の後に書いています。ブラウザには「Hello」と表示されます。

JavaScriptの詳しい文法は後から学べばよいので、まずはHTMLでページの構造を作ることに慣れましょう。

HTMLをブラウザで表示させる

実際にHTMLファイルを作成して、ブラウザで表示してみましょう。

1. テキストエディタでコードを書く

テキストエディタを開き、次のコードを入力します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTMLの練習</title>
</head>
<body>
  <h1>見出し1</h1>
  <p>表示したい文章をここに記述します。</p>
</body>
</html>

lang="ja"はページの主な言語が日本語であることを示します。meta charset="UTF-8"は文字コードを指定します。

2. 「.html」という拡張子で保存する

入力できたら、ファイル名をtest.htmlにして保存します。文字コードはUTF-8を選びます。

保存場所は、デスクトップやドキュメントフォルダなど、後から見つけやすい場所で構いません。

ファイル名がtest.html.txtになっていると、HTMLファイルとして開けない場合があります。拡張子を表示して、末尾が.htmlになっていることを確認してください。

3. 保存したファイルをブラウザで開く

保存したtest.htmlをダブルクリックするか、ブラウザのウィンドウへドラッグ＆ドロップします。

ページ内に「見出し1」と「表示したい文章をここに記述します。」が表示され、ブラウザのタブに「HTMLの練習」と表示されれば成功です。

文章を変更した場合は、ファイルを保存してからブラウザを再読み込みします。

なお、この操作は自分のPCにあるファイルを表示している状態です。インターネット上への公開は、別途行う必要があります。

HTMLタグの基本

HTMLタグとは

HTMLタグは、文章やコンテンツの役割を記述するための目印です。

たとえば、pは段落、h1は最上位の見出し、imgは画像を表します。

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

この例では、が開始タグ、が終了タグです。タグと、その間にある内容を合わせて「要素」と呼びます。

開始タグと終了タグで囲む

多くのHTML要素は、開始タグと終了タグで内容を囲みます。

<p>表示したい文章をここに記述します。</p>

終了タグには、タグ名の前に/を付けます。

ただし、imgやbrのように終了タグを書かない要素もあります。すべての要素を同じ形で囲むわけではありません。

タグの中にタグを書く

HTMLでは、要素の中に別の要素を入れられます。このような構造を「入れ子」と呼びます。

<body>
  <p>表示したい文章をここに記述します。</p>
</body>

この例では、body要素の中にp要素を入れています。字下げをそろえると、どの要素の中に何があるかを読み取りやすくなります。

入れ子にできる要素の組み合わせにはルールがあります。まずは、記事内の例のように内側の要素を閉じてから外側を閉じる書き方に慣れましょう。

HTMLの基本構造

DOCTYPEを記述する

HTMLファイルの先頭には、次の宣言を記述します。

<!DOCTYPE html>

これはDOCTYPE宣言です。ブラウザがページを標準モードで表示するために必要な記述で、終了タグはありません。

html要素で文書全体を囲む

htmlはHTML文書のルートとなる要素です。その中にheadとbodyを配置します。

<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTMLの練習</title>
</head>
<body>
  <p>ページの本文です。</p>
</body>
</html>

誤った位置に記述しても、ブラウザが補正して表示する場合があります。ただし、表示できたことだけで正しい構造とは判断できないため、基本構造に沿って書きましょう。

head要素にページの情報を書く

headには、ページのタイトルや文字コードなどの情報を書きます。

<head>
  <meta charset="UTF-8">
  <title>HTMLの練習</title>
</head>

titleに記述した文字は、主にブラウザのタブに表示されます。ページ本文の見出しは、別途body内に書きます。

body要素に表示する内容を書く

bodyには、見出し、文章、画像、リンクなど、ページの本文となる内容を書きます。

<body>
  <h1>HTMLの練習</h1>
  <p>初めて作成したWebページです。</p>
</body>

この例では、「HTMLの練習」が見出し、「初めて作成したWebページです。」が段落として表示されます。

よく使うHTMLタグ

段落：pタグ

pは文章の段落を表します。「paragraph」の頭文字です。

<p>これは1つ目の段落です。</p>
<p>これは2つ目の段落です。</p>

内容のまとまりごとに段落を分けることで、文章を読みやすくできます。

見出し：h1〜h6タグ

HTMLの見出しには、h1からh6までの6種類があります。単独のhという見出しタグはありません。

数字は見出しの階層を表します。h1が最上位で、h2はその下の階層、h3はさらに下の階層です。

<h1>HTML入門</h1>

<h2>HTMLの基本構造</h2>
<h3>head要素の役割</h3>
<h3>body要素の役割</h3>

<h2>よく使うHTMLタグ</h2>
<h3>段落を表すpタグ</h3>

この例では、「HTML入門」という大きなテーマの中に「HTMLの基本構造」と「よく使うHTMLタグ」があり、それぞれに小見出しがあります。

見出しタグは、文字を大きくしたり小さくしたりする目的だけで選ばないようにしましょう。文章の構造に合う階層を選び、文字サイズなどの見た目はCSSで調整します。

なお、WordPressではテーマが記事タイトルをh1として出力する場合があります。その場合、記事本文の大見出しはh2から始めると構造を整理しやすくなります。

画像：imgタグ

imgは画像を表示する要素です。終了タグは書きません。

<img src="sample.jpg" alt="公園に咲いている桜">

srcには画像ファイルの場所、altには画像の内容や役割を伝える代替テキストを指定します。この例を試す場合は、HTMLファイルと同じフォルダにsample.jpgを置きます。

リンク：aタグ

aは、別のページなどへのリンクを作る要素です。hrefに移動先を指定します。

<a href="https://tec-saigo.com/">さいごうの技術メモ集へ</a>

開始タグと終了タグの間に書いた文字が、リンクとして表示されます。

画像をリンクにする場合は、aの中にimgを書きます。

<a href="https://tec-saigo.com/">
  <img src="sample.jpg" alt="さいごうの技術メモ集のトップページへ">
</a>

リスト：olタグ・ulタグ・liタグ

順序のあるリストにはol、順序のないリストにはulを使います。各項目はliで記述します。

手順のように順番が重要な場合は、次のように書きます。

<ol>
  <li>HTMLファイルを作成する</li>
  <li>ファイルを保存する</li>
  <li>ブラウザで開く</li>
</ol>

項目を並べたい場合は、次のように書きます。

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

要素をまとめる：divタグ

divは、複数の要素をひとまとまりにするための汎用的な要素です。

<div class="profile">
  <h2>プロフィール</h2>
  <p>Web制作を学習しています。</p>
</div>

この例では、見出しと段落を1つのまとまりにしています。CSSで配置や背景を指定するときなどに使えます。

文章の一部分をまとめる：spanタグ

spanは、文章の一部分などをまとめるための汎用的な要素です。spanを付けただけで文字が太くなったり、色が変わったりするわけではありません。

次の例では、CSSのfont-weightを指定して「ここ」だけを太字にしています。

<p>表示したい文章は<span style="font-weight: bold;">ここ</span>に記述しましょう。</p>

外側の段落は、内側のspanはで閉じます。終了タグには、対応する要素の名前を記述します。

改行：brタグ

brは、文章の途中で改行するための要素です。終了タグは書きません。

<p>東京都千代田区<br>サンプルビル3階</p>

住所など、内容として改行が必要な箇所で使います。段落を分ける場合はpを使い、見た目の余白はCSSで調整します。

メモを残す：コメント

HTMLには、通常のページ表示には出さずにメモを残す「コメント」を書けます。

コメントは、半角記号ので囲みます。前後のハイフンは、それぞれ半角の-を2つ使います。

<p>表示したい文章をここに記述します。</p>

<!-- ここはページ上に表示されないメモです -->

複数行のコメントも書けます。

<!--
  ここからプロフィール欄
  内容を変更するときは紹介文も確認する
-->

長いコードの区切りや、後から確認するためのメモに使うと便利です。

ただし、コメントはページのソースを表示すれば確認できます。パスワードなどの秘密情報は書かないでください。

HTML要素にidやclassを付ける

HTML要素には、idやclassという属性を付けられます。CSSで対象を指定したり、JavaScriptで要素を取得したりするときに使います。

id：同じ文書内で値を重複させない

idは、要素に固有の識別子を付ける属性です。

重要なのは、id属性を文書全体で1回しか使えないという意味ではなく、同じidの値を同じ文書内で重複させないという点です。

異なる値であれば、複数の要素にidを付けられます。

<h1 id="page-title">HTMLの練習</h1>
<p id="introduction">このページではHTMLの基本を学びます。</p>
<p id="message">まずは短い文章を書いてみましょう。</p>

この例では、page-title、introduction、messageという異なる値を使っています。

一方、次のように同じ値を複数の要素へ付ける書き方は避けます。

<!-- 誤った例：同じidの値を重複させている -->
<p id="example">表示したい文章1</p>
<p id="example">表示したい文章2</p>

CSSでidを指定するときは、値の前に#を付けます。たとえば#messageは、id="message"を持つ要素を対象にします。

idはページ内リンクの移動先にも使えます。

<a href="#profile">プロフィールへ移動</a>

<h2 id="profile">プロフィール</h2>
<p>Web制作を学習しています。</p>

class：同じ値を複数の要素で使える

classは、複数の要素を同じグループとして扱うときなどに使う属性です。同じ値を複数の要素に付けられます。

<p class="notice">表示したい文章1</p>
<p>表示したい文章2</p>
<p class="notice">表示したい文章3</p>

CSSでclassを指定するときは、値の前に.を付けます。.noticeを指定すると、class="notice"を持つ1つ目と3つ目の段落が対象になります。

また、1つの要素に複数のclassを付けることもできます。

<p class="notice important">確認が必要な文章です。</p>

この例では、noticeとimportantという2つのclassを半角スペースで区切っています。

idとclassの違いは、次のように整理できます。

項目	id	class
主な用途	特定の要素を識別する	複数の要素を同じグループとして扱う
同じ文書内での値の重複	同じ値は重複させない	同じ値を複数の要素に使える
CSSでの指定例	`#message`	`.notice`
1つの要素に付ける値	1つの識別子	空白区切りで複数のclassを指定できる

まとめ

HTMLは、Webページの内容に構造や意味を与えるための言語です。まずはHTMLファイルを作って保存し、ブラウザで表示する流れを覚えましょう。

タグを書くときは、開始タグと終了タグの対応を確認します。段落は、spanはで閉じ、コメントにはを使います。

見出しは文字の大きさではなく、文章の階層に合わせてh1〜h6を選びます。また、idは同じ値を文書内で重複させず、複数の要素をまとめて扱う場合にはclassを使えます。

最初は短いページで構いません。見出し、段落、画像、リンクを少しずつ追加し、保存と再読み込みを繰り返しながら書き方を確認してみてください。