HTML（エイチティーエムエル）は「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略称で、日本語では「ハイパーテキストを記述するためのマークアップ言語」と説明されます。ここでいう「マークアップ言語」とは、文章の中に「ここは見出し」「ここは段落」「ここはリンク」といった意味づけや役割を示すための印（マーク）を付けるための言語のことです。一般的なプログラミング言語のように「計算をする」「条件分岐をする」といった処理を行うのではなく、文章や画像などの「構造」や「意味」をブラウザに伝える役割を持っています。
HTMLとは何か：Webページを形作る基本構造の理解
Webページを見るとき、私たちは通常、ブラウザ（ChromeやSafariなどのWeb閲覧ソフト）を使います。ブラウザは、サーバーから送られてきたHTMLファイルを読み取り、その内容をもとに画面にWebページを表示します。HTMLファイルの中には、人間が読むための文章そのものと、それを囲むたくさんの「タグ」と呼ばれる記号が書かれています。タグは <html> や <p> のように、山かっこ（< と >）で囲まれたキーワードで表現されます。このタグによって、「ここからここまでが段落です」「ここは画像です」といった情報がブラウザに伝えられます。
HTMLでは、ほとんどのタグが「開始タグ」と「終了タグ」のペアで使われます。例えば段落を表すタグは <p> が開始タグ、</p> が終了タグです。このように、斜線 / が入っている方が終了タグです。ブラウザは開始タグから終了タグまでの範囲をひとまとまりの「要素」として認識します。要素とは「タグとその中身を合わせたひとかたまり」のことを指す用語です。例えば <p>こんにちは</p> という1行全体が「p要素」と呼ばれます。
HTML文書全体は、ひとつの大きな木のような階層構造をしています。根っこにあたるのが <html> 要素で、その中にページの設定情報をまとめる <head> 要素、画面に実際に表示される内容をまとめる <body> 要素が入っています。そして、<body> の中に見出しや段落、画像、リンクなどの要素が入れ子状に並びます。この「入れ子構造」とは、ある要素の中に別の要素が含まれている状態を指す言葉です。例えば、<body> の中に <div> があり、その中に <p> がある、というような構造です。
HTMLは、Webページの世界で「骨組み」や「下地」の役割を担っています。家にたとえると、柱や壁の位置、部屋の区切りを決める設計図や骨組みがHTMLです。一方で、色やフォント、大きさなど見た目の部分は、主にCSSという別の言語で指定します。ここで大事なのは、HTMLだけでもWebページは表示できるという点です。見た目はシンプルでも、見出し・段落・リンクなどの構造を正しくマークアップしてあれば、ブラウザはきちんと情報を理解して表示してくれます。
検索エンジンも、HTMLを読み取ってページの内容を判断します。見出しタグで書かれた部分は重要なキーワードとして扱われやすく、段落タグの中身は本文として認識されます。つまり、HTMLは人間だけでなくコンピュータにとっても「このページに何が書かれているか」を理解するための手がかりになっています。正しいタグを使って構造をはっきりさせることは、Webデザインの土台であり、SEO（検索エンジン最適化）の観点からも意味を持ちます。
HTMLを学ぶときの最初の一歩として、「HTMLはWebページの構造を説明するための言語」であり、「タグを使ってページの部品を示す」というイメージを持っていただくと理解しやすくなります。コードを書くことに慣れていない方でも、文章に見出しや段落の印を付けていく作業だと考えると、少し身近に感じられるようになります。
htmlタグの役割：Webページ全体を包むルート要素
htmlタグは、HTML文書の中で最も外側に位置するタグで、ページ全体を包み込む「ルート要素」と呼ばれる存在です。ルート要素とは、HTML文書のすべての要素の中で一番上にあり、その他のすべての要素がその内側に含まれている要素のことです。ブラウザは、このhtmlタグを基準にして文書の構造を理解し、画面に表示するための準備を行います。
典型的なHTMLファイルは、次のような形で始まります。
<!DOCTYPE html>
<html>
<head>
<!-- ページの設定など -->
</head>
<body>
<!-- 画面に表示される内容 -->
</body>
</html>ここで、<!DOCTYPE html>は「このファイルはHTML5というバージョンのHTMLですよ」という宣言であり、そのすぐ下の<html>から</html>までがHTML文書全体を表しています。htmlタグの中には、ページに関する設定情報をまとめるheadタグと、実際に画面に表示される内容をまとめるbodyタグが入っています。このように、htmlタグはWebページ全体の「枠組み」を定義していると言えます。
htmlタグには、属性（アトリビュート）と呼ばれる追加情報を指定することがよくあります。属性とは、タグに対して「言語は日本語」「文字の向きは左から右」などの補足情報を与える仕組みです。例えば、次のような書き方をよく見かけます。
<html lang="ja">ここでlang="ja"という指定は、このページの主な言語が日本語であることを示しています。検索エンジンやスクリーンリーダー（視覚に障害がある方が利用する読み上げソフト）は、この情報を使って適切な処理を行います。例えば、読み上げソフトはlang="ja"を見て、日本語として読み上げるようにします。lang="en"であれば英語として扱います。このように、htmlタグの属性は、人間だけでなく機械にとっても重要な手がかりになります。
また、dir属性というものもあり、テキストの方向を指定できます。一般的な日本語や英語のページでは左から右に文字を並べるため、省略しても問題ありませんが、右から左に文字を書く言語（アラビア語など）の場合にはdir="rtl"のように指定することがあります。これもhtmlタグに設定することで、ページ全体の方向性を伝えられます。
htmlタグが「ルート要素」であるということは、HTML文書内の他のすべての要素は、必ずhtmlタグの内側に存在するという意味です。例えば、<div>や<p>、<h1>などの要素は、直接的または間接的にhtmlタグの中に含まれています。この関係性は、ブラウザ内部で「DOMツリー」と呼ばれる木構造として管理されています。DOM（Document Object Model）は、HTML文書をプログラムから扱いやすい形にしたモデルのことで、「html要素の子にheadとbodyがあり、その中にさらに多くの要素がぶら下がっている」といった階層構造を持ちます。
開発者ツール（ブラウザに付属している開発者向けの画面）を開いてHTMLを確認すると、一番上に<html>要素が表示されているのがわかります。この中に、<head>や<body>が折りたたまれた形で表示されるため、htmlタグが最上位にあることを視覚的にも確認できます。こうしたツールを使うと、htmlタグがページ全体の親であることを実感しやすくなります。
また、htmlタグは「この文書はHTMLですよ」という明確な枠にもなります。ブラウザは、htmlタグの外側に書かれた内容を基本的には文書の一部として扱いません。書いたとしても無視されたり、想定外の解釈をされてしまう可能性があります。そのため、HTMLを書くときは、必ず<html>から始めて、最後は</html>で閉じるという基本形を守ることが重要です。
最近のブラウザは賢く作られており、htmlタグやbodyタグを書き忘れても自動的に補って表示してくれることがあります。しかし、これはあくまでブラウザ側の「親切な補正」にすぎません。学習の段階から省略した書き方に慣れてしまうと、後で複雑なページを作るときに思わぬ表示崩れやバグの原因になることがあります。そのため、練習のうちは毎回<!DOCTYPE html>、<html>, <head>, <body>を正しく書く習慣を身につけることが望ましいです。
htmlタグは見た目の変化を直接生み出すタグではありませんが、Webページの最上位にある非常に重要なタグです。ページ全体の言語や方向性を指定し、headとbodyという2つの大きな領域を内側に持つことで、ブラウザや検索エンジンに対して「ここからここまでが1つのHTML文書です」と伝える役割を果たしています。
よく使う基本的なHTMLタグの特徴と使い方
HTMLを学び始めるときは、すべてのタグを一度に覚える必要はありません。まずは、頻繁に登場する「基本的なHTMLタグ」から慣れていくことが大切です。ここでは、初心者の方が最初に押さえておきたい代表的なタグと、その役割・使い方を整理してご紹介します。
ページ構造の基本となるタグ
HTML文書は、大きく次のようなタグで構成されます。
<html>：文書全体を包むルート要素<head>：ページのタイトルや文字コードなど、画面には直接表示されない設定情報を入れる部分<body>：実際にブラウザ上に表示される本文・画像・リンクなどを入れる部分
例として、もっともシンプルなHTMLの骨組みは次のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
<body>
ここに本文が入ります。
</body>
</html><meta charset="UTF-8">は文字コード（コンピュータが文字をどう扱うかの規則）を指定するタグです。日本語を含むページでは、一般的にUTF-8という文字コードを使います。
テキストを表す基本タグ
文字情報を画面に表示するための代表的なタグには、次のようなものがあります。
<h1>〜<h6>：見出しを表すタグ。h1が一番大きな見出しで、数字が大きくなるほど小さい見出しになります。<p>：段落（パラグラフ）を表すタグ。文章のひとかたまりごとに使います。<br>：改行を表すタグ。段落を分けず、文章中で行を変えたいときに使います。
例として、見出しと段落を組み合わせると、次のようなコードになります。
<h1>私のブログ</h1>
<p>このブログでは、日々の出来事や学んだことを記録しています。</p>
<p>プログラミングやデザインについても少しずつ書いていきます。</p>ここでは2つの<p>要素があり、それぞれが独立した段落として表示されます。
リンクやボタンのようにクリックできる要素の基本タグ
Webページらしい動きとして、別のページに飛ぶリンクが挙げられます。リンクを作るときに使うのが<a>タグです。
<a>：リンク（アンカー）を表すタグ。href属性でジャンプ先のURLを指定します。
<a href="https://example.com">サンプルサイトを見る</a>この例では、「サンプルサイトを見る」という文字がクリックできる形で表示され、押すと指定したURLに移動します。hrefのような「属性」は、タグに対して追加の情報を渡す仕組みです。
画像を表示するための基本タグ
画像を表示するには<img>タグを使います。
<img>：画像を表示するタグ。src属性で画像ファイルの場所、alt属性で代替テキスト（画像が表示できないときに代わりに表示する説明文）を指定します。
<img src="images/logo.png" alt="サイトのロゴ"><img>タグは終了タグを持たない「空要素」と呼ばれるタイプで、</img>のような書き方はしません。
リスト（箇条書き）を作る基本タグ
箇条書きのリストを作るときによく使うタグは次の3つです。
<ul>：順序のないリスト（点や丸の箇条書き）<ol>：順序のあるリスト（1. 2. 3. のような番号付き）<li>：リストの各項目（リストアイテム）
<ul>
<li>HTMLを学ぶ</li>
<li>CSSを学ぶ</li>
<li>JavaScriptを学ぶ</li>
</ul>この例では、3つの<li>要素が<ul>の中に入っており、丸い点の箇条書きとして表示されます。
ブロック要素とインライン要素の基本タグ
HTMLのタグは、大きく分けて「ブロック要素」と「インライン要素」に分類されます。
- ブロック要素：行全体を占有し、その前後で自動的に改行される要素（例：
<div>,<p>,<h1>など） - インライン要素：文章の途中に挿入され、前後で改行されない要素（例：
<span>,<a>,<strong>など）
ここでよく使われるのが次の2つです。
<div>：意味を持たない「箱」のようなブロック要素。レイアウトをまとめるときによく使います。<span>：意味を持たないインライン要素。文章の一部だけにスタイルを当てたいときなどに使います。
<div>
<p>こんにちは、<span>太郎</span>さん。</p>
</div>この例では、<div>がひとかたまりの領域を作り、その中で<span>が「太郎」という一部分だけを囲んでいます。
区切り線や強調表示に関する基本タグ
<hr>：水平線（区切り線）を表示するタグ。セクションとセクションの間に入れることがあります。<strong>：重要な部分を強調するタグ。通常は太字で表示されます。<em>：文章中の強調を表すタグ。通常は斜体で表示されます。
<p>この操作は<strong>元に戻せません</strong>ので注意してください。</p>
<hr>
<p><em>特に重要なポイント</em>はメモしておきましょう。</p><strong>や<em>は、見た目を変えるだけでなく、「ここは重要」「ここは強調部分」という意味もブラウザや検索エンジンに伝えます。
セクションを表す基本タグ
HTML5では、ページ内のまとまりをわかりやすく区切るためのタグもよく使われます。
<header>：ページやセクションの先頭部分（ロゴやナビゲーションなど）<main>：ページ内の「主な内容」を囲む領域<footer>：ページやセクションの末尾部分（著作権表示や連絡先など）<section>：意味のあるひとかたまりの区画<article>：独立した記事やブログ投稿など
<main>
<article>
<h1>お知らせ</h1>
<p>本日はメンテナンスのため、サービスを一時停止します。</p>
</article>
</main>この例では、<main>がページの主要部分を示し、その中で<article>が1つの記事のまとまりを表しています。
テキストを整えるタグ：見出し・段落・強調表現
HTMLでテキストを扱うときは、「どの部分がタイトルなのか」「どの部分が本文のまとまりなのか」「どこを強調したいのか」といった情報を、タグを使って明確に示していきます。見た目だけでなく、文章の構造や意味を正しくマークアップすることで、読みやすさだけでなく検索エンジンや支援技術（スクリーンリーダーなど）にも伝わりやすいページになります。
見出しタグ（h1〜h6）で文章の階層を表現する
見出しを表すタグは<h1>から<h6>まで6種類あります。hは「heading（見出し）」の頭文字で、数字が小さいほど重要度が高い見出しを表します。
<h1>：ページ全体のタイトルにあたる、最も大きな見出し<h2>：<h1>の下の階層にあたる大見出し<h3>：<h2>の下の階層の小見出し<h4>〜<h6>：さらに細かい階層を分けるための見出し
例として、学習用の記事の構造は次のようになります。
<h1>HTML入門ガイド</h1>
<h2>HTMLとは何か</h2>
<p>HTMLはWebページの骨組みを作るためのマークアップ言語です。</p>
<h2>基本的なタグ</h2>
<h3>見出しタグ</h3>
<p>h1からh6までのタグを使って文章の階層を表します。</p>ここでは、<h1>がページのタイトル、<h2>が大きな章、<h3>がその中の小さな節という関係になっています。見出しタグは単に文字を大きく太く表示するだけでなく、「ここが見出しです」という意味情報をブラウザと検索エンジンに伝える役割を持ちます。
見出しの階層は、数字を飛ばさずに順番に使うことが推奨されます。例えば<h1>のすぐ下に<h3>を使うよりも、<h2>を使ってから<h3>に進む方が構造が明確になります。
段落タグ（p）で文章のまとまりを示す
文章のひとかたまりを表すときには<p>タグを使います。pは「paragraph（パラグラフ）」の略です。
<p>HTMLは、テキストに意味づけを行うためのマークアップ言語です。</p>
<p>段落ごとにpタグで囲むことで、文章の区切りが明確になります。</p><p>タグはブロック要素と呼ばれる種類で、前後に自動的に余白がつき、行が分かれて表示されます。文章の途中で単に行を変えたいだけの場合は<br>（改行タグ）を使いますが、内容としての一区切りを作る場合は<p>で囲む方が適切です。
<p>の中にブロック要素（例えば<div>や別の<p>など）を入れないことも基本ルールのひとつです。文章の構造を安定させるため、段落は段落の内側でさらに区切らない形が望ましい書き方になります。
改行タグ（br）で行だけを変える
段落を分けるほどではないが、文章中で行を変えたい場合には<br>タグを使います。brは「break（折る）」の意味です。
<p>
お問い合わせは以下の方法で受け付けています。<br>
・メールでのお問い合わせ<br>
・チャットでのお問い合わせ
</p>このように、同じ段落の中で箇条書き風の表現をしたいときや、住所や詩など、意味としては1つのまとまりだが行を分けたいテキストで使われます。ただし、レイアウト調整のためだけに大量の<br>を使用するのは避け、基本的にはCSSで見た目を調整する考え方が推奨されます。
強調を表すstrongタグとemタグ
文章の中で、特に強く伝えたい部分や注意してほしい部分には「強調」を表すタグを使います。代表的なものが<strong>タグと<em>タグです。
<strong>：重要性の強調を表すタグ。通常、太字で表示されます。<em>：語気・ニュアンスの強調を表すタグ。通常、斜体で表示されます。
<p>この操作は<strong>取り消すことができません</strong>ので、確認してから実行してください。</p>
<p>内容を<em>よく読んで</em>から次へ進んでください。</p><strong>は「ここは重要な意味を持つ部分です」という情報を検索エンジンや支援技術にも伝えます。一方、<em>は「ここは言い方として強調されています」というニュアンスの違いを表現するためのタグです。
見た目だけならCSSで太字や斜体にすることもできますが、意味のある強調には<strong>や<em>を使うことで、構造化された文章になります。
インラインの強調タグ：bタグとiタグ
<strong>や<em>に似たタグとして、<b>と<i>があります。
<b>：太字（bold）で表示するためのタグ<i>：斜体（italic）で表示するためのタグ
これらは主に見た目のスタイルを変える目的で使われ、意味的な「重要性」や「強調」よりも装飾的なニュアンスが強いタグです。
<p>この商品は<b>数量限定</b>です。</p>
<p>英単語<i>example</i>の使い方を説明します。</p>意味としての強調を伝えたい場合は<strong>や<em>を選び、単にスタイル上の変化だけをつけたい場合に<b>や<i>を使うという使い分けがあります。
一部だけスタイルを当てるためのspanタグ
<span>タグは、インライン要素のひとかたまりを作るための汎用的なタグです。span自体には特別な意味はなく、CSSと組み合わせて使うことが前提になります。
<p>私は<span>フロントエンド開発</span>を勉強しています。</p>この例では「フロントエンド開発」という部分だけに色を付けたりフォントを変えたりする際に<span>を利用します。テキストの一部を囲って識別できるようにするための「小さな箱」というイメージのタグです。
小さな補足や注釈を表すsmallタグ
補足情報や注意書き、コピーライトなどを小さめの文字で表示したい場合には<small>タグを使います。
<p>※表示価格は税込です。<small>一部商品を除きます。</small></p><small>は視覚的に文字を小さくするだけでなく、「補足的な内容」という意味も表現します。重要な本文と区別したいときに利用できます。
上付き・下付きの文字を表すsupタグとsubタグ
数式や化学式などで、文字を上付きや下付きで表示したい場合には、<sup>と<sub>を使います。
<sup>：上付き文字（superscript）<sub>：下付き文字（subscript）
<p>2<sup>3</sup>は8です。</p>
<p>水の化学式はH<sub>2</sub>Oです。</p>これにより、数式や化学式を読みやすい形で表現できます。
テキスト整形タグを組み合わせて、読みやすい文章構造を作る
これらのテキスト関連タグを組み合わせることで、ページ全体の情報構造が明確になり、読者にとっても内容を追いやすい文章になります。見出しで大きな流れを作り、段落で内容を分け、必要なところで強調をつけることで、テキスト中心のページでも情報が整理された状態になります。
画像やリンクを表示するためのHTMLタグ
HTMLで「らしい」表現といえば、画像やリンクの存在が大きなポイントになります。文字だけのページよりも、画像を表示したり、他のページへ移動するリンクを用意したりすることで、Webページはぐっと実用的になります。ここでは、画像を表示するimgタグと、リンクを作成するaタグを中心に、基礎から整理して説明します。
画像を表示するimgタグの基本
画像を表示するために使用するのが<img>タグです。imgタグは「イメージ（image）」の略で、ページ上に写真やイラスト、アイコンなどを表示するときに使います。
<img src="images/sample.jpg" alt="サンプル画像">imgタグには、主に次のような属性を指定します。
src属性：表示したい画像ファイルの場所（URLやファイルパス）を指定します。alt属性：画像が表示できなかったときに代わりに表示するテキストや、スクリーンリーダーが読み上げるための説明文を指定します。
imgタグは「空要素」と呼ばれるタイプで、</img>のような終了タグを持ちません。<img>だけを書き、属性を使って必要な情報を伝えます。
alt属性は、単なる飾りではなくアクセシビリティ（障害の有無にかかわらず誰もが利用しやすい状態）に関わる大切な情報です。たとえば、視覚に障害があるユーザーが画面読み上げソフトを使っている場合、altに書かれたテキストが読み上げられます。意味のある画像には、その内容を簡潔に説明するテキストを入れておくことが望ましいです。
画像のサイズを指定するwidth・height属性
画像の表示サイズを調整したいときには、width（幅）とheight（高さ）の属性を使います。
<img src="images/logo.png" alt="ロゴ" width="200" height="100">数値だけを指定した場合、ピクセル数として解釈されます。幅だけ、または高さだけを指定すると、もう片方は元画像の比率に合わせて自動計算されます。
ただし、レイアウトや見た目の調整は、基本的にはCSS側で行うことが推奨されます。HTMLでは画像の意味や役割を中心に記述し、細かいデザインはCSSに任せる構成にしておくと、コードの見通しが良くなります。
絶対パスと相対パスのイメージ
src属性には画像ファイルの場所を指定しますが、その指定方法には「絶対パス」と「相対パス」があります。
- 絶対パス：
https://example.com/images/sample.jpgのように、先頭から全部を書いたパス - 相対パス：
images/sample.jpgのように、現在のHTMLファイルから見た位置関係で書いたパス
学習用のローカルファイルでは、imgフォルダやimagesフォルダを用意して、相対パスで指定することがよくあります。現在のHTMLファイルから見て、同じフォルダにあるならファイル名だけ、ひとつ下のフォルダにあるなら フォルダ名/ファイル名 のように書きます。
リンクを作るaタグの基本
他のページや別のサイト、同じページ内の別の場所へ移動するためのリンクを作成するのが<a>タグです。aは「anchor（アンカー）」の頭文字で、リンク先への「錨（いかり）」のようなイメージで名付けられています。
<a href="about.html">このサイトについて</a>aタグのポイントは次のとおりです。
href属性：リンク先のURLやファイルパスを指定します。- 開始タグと終了タグの間に書かれた内容（テキストや画像）が、クリックできるリンクとして表示されます。
たとえば、同じフォルダ内にあるcontact.htmlというファイルに飛ぶリンクを作りたい場合は、次のように書きます。
<a href="contact.html">お問い合わせページへ</a>この場合、「お問い合わせページへ」というテキスト部分がクリックできるようになります。
外部サイトへのリンクとtarget属性
別のサイト（他のドメイン）のページへリンクを貼ることもできます。
<a href="https://example.com">外部サイトを開く</a>リンクをクリックしたときに、新しいタブで開いてほしい場合は、target属性を使います。
<a href="https://example.com" target="_blank">別タブで外部サイトを開く</a>target="_blank"は「新しいタブ（またはウィンドウ）で開く」という意味です。外部サイトへ移動するときや、ユーザーに元のページを残しておいてほしいときに使うことがあります。
画像をリンクにする
aタグの中にimgタグを入れることで、画像そのものをクリックできるリンクにすることができます。バナーやロゴをクリックしてトップページに戻るような動きは、この組み合わせで実現します。
<a href="index.html">
<img src="images/logo.png" alt="トップページへ戻るロゴ">
</a>このコードでは、ロゴ画像をクリックするとindex.htmlへ移動します。テキストだけでなく、画像もリンクのクリック対象として使えることがわかります。
ページ内リンク（アンカーリンク）
同じページの中で、特定の位置にジャンプしたい場合には「ページ内リンク」を使います。長いページの目次から、ページ下部の該当箇所に飛ばすようなケースです。
ジャンプ先になる要素にid属性を付けて名前をつけ、その名前に対してhrefで#名前という形でリンクします。
<h2 id="section1">第1章 はじめに</h2>
<a href="#section1">第1章へ移動</a>この場合、「第1章へ移動」というリンクをクリックすると、id="section1"が付いた見出しの位置までスクロールします。idはページ内で重複してはいけない「一意の識別子」として機能します。
メールアドレスや電話番号へのリンク
リンク先はWebページだけに限らず、メールソフトや電話アプリを起動するためにも使えます。メールアドレスへのリンクは、mailto:スキームを使います。
<a href="mailto:info@example.com">メールでお問い合わせ</a>スマートフォン向けのページでは、電話番号をタップして発信できるようにtel:スキームを使うこともあります。
<a href="tel:0123456789">012-345-6789</a>こうしたスキームは、ブラウザや端末の機能と連携するための書き方です。
タイトル属性で補足説明をつける
imgやaタグなど、さまざまなタグには共通してtitle属性を指定できます。title属性には、その要素に関する補足説明を記述します。多くのブラウザでは、マウスを要素の上に乗せたときに小さな吹き出しとして表示されます。
<a href="profile.html" title="プロフィールページへ移動します">プロフィールを見る</a><img src="images/icon.png" alt="アイコン" title="ユーザーアイコン">titleは必須ではありませんが、リンク先の内容を補足したり、アイコンの意味を説明したりするのに利用できます。
画像とリンクタグを組み合わせた実用的な構成
実際のページでは、テキストリンク、画像リンク、ページ内リンクなどを組み合わせて、ナビゲーションやバナーエリアを構成します。ナビゲーションメニューの例としては、次のような書き方があります。
<nav>
<a href="index.html">ホーム</a>
<a href="about.html">このサイトについて</a>
<a href="contact.html">お問い合わせ</a>
</nav>バナーエリアでは、画像リンクを並べることもできます。
<div>
<a href="campaign.html">
<img src="images/campaign.jpg" alt="キャンペーンページへ">
</a>
<a href="news.html">
<img src="images/news.jpg" alt="お知らせページへ">
</a>
</div>このような構成により、ユーザーは視覚的にわかりやすい形でページ内を移動できるようになります。
レイアウトを整理するためのHTMLタグの基礎
Webページを見やすく整理するためには、「どこからどこまでがひとかたまりなのか」「どのエリアがメインコンテンツで、どこがナビゲーションなのか」といった区切りをHTMLでしっかり表現することが大切です。ここでは、レイアウトを考えるときに押さえておきたいHTMLタグの基礎について解説します。見た目そのものはCSSで整えるのが基本ですが、HTML側で「意味のあるかたまり」を作ることで、後からスタイルを当てやすくなります。
ブロック要素とインライン要素の違い
レイアウトを理解するうえで、まず知っておきたいのが「ブロック要素」と「インライン要素」という分類です。
- ブロック要素
行全体を占有し、前後で自動的に改行される要素です。<div>,<p>,<h1>,<section>などが代表的です。ひとかたまりのエリアを作るイメージです。 - インライン要素
文章の途中に挿入され、前後で改行されない要素です。<a>,<span>,<strong>などがこれに当たります。テキストの一部だけを装飾したり、意味づけしたりするときに使います。
レイアウトの大枠を組み立てるときは、主にブロック要素を使ってページを「箱」で区切っていく感覚を持つと考えやすくなります。
divタグ：汎用的なレイアウト用コンテナ
<div>タグは、意味を持たない汎用的なブロック要素です。ページ内のある範囲をまとめる「箱」として、レイアウトの基礎的な単位によく使われます。
<div class="header-area">
<h1>サイトタイトル</h1>
</div>
<div class="main-area">
<p>メインコンテンツが入ります。</p>
</div>
<div class="footer-area">
<p>フッターの内容が入ります。</p>
</div>このように、<div>でエリアを囲んでおくと、CSSで.header-areaや.main-areaなどのクラスに対してスタイルをまとめて指定しやすくなります。div自体には「意味」はありませんが、クラス名を工夫することで、コードを読んだときにエリアの役割がわかりやすくなります。
セマンティックなレイアウトタグ（header・main・footer・nav・section・article・aside）
HTML5では、ページ内の役割をより明確に伝えるための「セマンティック（意味のある）」タグが追加されています。レイアウトを整理するときに、divだけでなくこれらのタグを組み合わせると、構造が理解しやすくなります。
<header>：ページ全体やセクションの「ヘッダー部分」を表します。ロゴ、タイトル、ナビゲーションなどが入ることが多いです。<main>：そのページで「主となるコンテンツ」を囲む領域です。ページ内に1つだけ使用するのが基本です。<footer>：ページやセクションの「フッター部分」を表します。著作権表示、連絡先、補足リンクなどが含まれます。<nav>：ナビゲーションリンクのまとまりを表します。グローバルメニューやサイドメニューなどが対象です。<section>：ページ内の「意味のある区切り」を表します。トピックごとのまとまりなどに使われます。<article>：記事やブログ投稿など、それ単体で完結したコンテンツを表します。ニュース記事やブログの1本分が典型です。<aside>：サイドバーや関連情報など、メインコンテンツを補足する情報のまとまりを表します。
これらを組み合わせると、次のようにページ全体のレイアウトを表現できます。
<header>
<h1>サイトタイトル</h1>
<nav>
<a href="index.html">ホーム</a>
<a href="about.html">このサイトについて</a>
</nav>
</header>
<main>
<article>
<h2>お知らせ</h2>
<p>新しいサービスを公開しました。</p>
</article>
<aside>
<h2>関連リンク</h2>
<ul>
<li><a href="news.html">過去のお知らせ</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2025 My Site</p>
</footer>このように、タグ名だけを見ても「ここがヘッダー」「ここがメイン」「ここがサイドバー」と役割が想像しやすくなります。検索エンジンやスクリーンリーダーも、これらのタグを手がかりにページ構造を理解します。
sectionとarticleの使い分け
<section>と<article>は、どちらも「まとまり」を表すタグですが、役割が少し異なります。
<article>：1つの単位として独立しており、それだけを別の場所に持っていっても意味が通じるコンテンツ（ニュース記事、ブログ記事、掲示板の1レスなど）に向いています。<section>：ページの中をトピックごとに区切る「セクション」に向いています。記事の中の「概要」「詳細」「まとめ」といった区分などです。
HTMLを書くときには、「この塊だけ切り出して別ページに置いても内容として成り立つか」を目安にして、articleかsectionかを考えると使い分けやすくなります。
レイアウトのための入れ子構造
レイアウトを整理するときには、「大きな箱の中に小さな箱が入る」ような入れ子構造を意識します。
<main>
<section class="content">
<h2>サービス紹介</h2>
<div class="service-list">
<article class="service-item">
<h3>プランA</h3>
<p>プランAの説明テキストです。</p>
</article>
<article class="service-item">
<h3>プランB</h3>
<p>プランBの説明テキストです。</p>
</article>
</div>
</section>
</main>ここでは、mainの中にsectionがあり、その中にdivで囲ったサービス一覧、さらにその中に複数のarticleがあります。このような階層構造を作ることで、「ページ全体 → コンテンツエリア → サービス一覧 → 各サービス」という位置づけが明確になります。
グループ化に使うul・olとli
レイアウトを考える際、箇条書きのリストも「グループ化」の手段としてよく活用されます。
<ul>：順序のないリスト（点や丸の箇条書き）<ol>：順序のあるリスト（番号付きの箇条書き）<li>：リストの各項目
メニューなどをまとめるときにもよく使われます。
<nav>
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="service.html">サービス</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>HTMLとしてはリスト構造を作り、見た目の横並びやデザインはCSSで行う、という分担が基本的な考え方です。
tableタグとレイアウト
<table>タグは本来、「表形式のデータ」を表示するためのタグです。行（<tr>）とセル（<td>,<th>）を組み合わせて、表を作ります。
<table>
<tr>
<th>商品名</th>
<th>価格</th>
</tr>
<tr>
<td>サンプルA</td>
<td>1,000円</td>
</tr>
</table>昔はレイアウト目的でtableが多用されていましたが、現在では「データの表現」に限定して使うのが一般的です。ページの枠組みを作る用途には、divやセマンティックタグを使うことが推奨されます。
レイアウトタグとCSSの役割分担
HTMLタグは、どこがヘッダーでどこがメインコンテンツか、どの部分が1つのセクションなのかといった「構造」を表現するのが役割です。一方、配置（横並びにするか縦に並べるか）、色、余白などの「見た目」の調整はCSSに任せるのが基本です。
そのため、レイアウトを考えるときは、まずHTMLで「どのように箱を分けるか」「どのような階層構造にするか」を意識してタグを選び、そのあとCSS側でdisplayやmarginなどのプロパティを使って具体的なレイアウトを整えていく流れになります。
HTMLを書く際に意識したい基本ルールと注意点
HTMLを書くときには、「とりあえず表示できればOK」という書き方と、「後から読みやすく修正しやすい書き方」の間に大きな差があります。ブラウザは多少乱暴な書き方でも自動補正して表示してくれますが、学習段階から基本ルールを意識しておくことで、バグを減らし、チーム開発にも適したコードを書けるようになります。ここでは、初心者の方にも意識しやすいHTML記述の基本ルールと注意点を整理していきます。
DOCTYPE宣言とhtml要素の書き方
HTMLファイルの先頭には、必ず<!DOCTYPE html>を書きます。これは「この文書はHTML5で書かれています」という宣言で、ブラウザに正しいモードで表示させるための合図です。その下に<html>タグを書き、文書全体を<html>〜</html>で囲みます。
<!DOCTYPE html>
<html lang="ja">
...
</html>lang="ja"の指定は、文書の主な言語が日本語であることを伝えます。検索エンジンやスクリーンリーダーが、言語に合わせて適切な処理を行うための重要な情報です。
headとbodyを正しく分ける
<html>の中には、通常<head>と<body>の2つの大きな要素を入れます。
<head>：文字コード、タイトル、スタイルシートの読み込みなど、画面に直接表示されない設定情報<body>：見出しや段落、画像、リンクなど、実際に表示される内容
<meta charset="UTF-8">をheadの中に書くことで、日本語が文字化けせずに表示されます。タイトルは<title>タグで指定し、ブラウザのタブや検索結果などに使われます。
タグの開始・終了と入れ子構造を守る
HTMLでは、ほとんどのタグが「開始タグ」と「終了タグ」のペアで使われます。
<p>ここは段落です。</p>- 開始タグ：
<p> - 終了タグ：
</p>
終了タグを忘れると、ブラウザが自動で補ってくれることもありますが、意図しない範囲までそのタグが伸びてしまい、レイアウト崩れの原因になります。必ず開いたタグは閉じる、という癖をつけることが大切です。
また、入れ子構造では「後から開いたものを先に閉じる」ことを守ります。
<p><strong>正しい</strong>書き方です。</p><p> → <strong> と順に開き、閉じるときは </strong> → </p> の順番になります。これが崩れると、ブラウザの解釈が不安定になり、意図しない表示になるおそれがあります。
インデント（字下げ）で構造をわかりやすくする
HTMLは入れ子が深くなるほど構造が見えづらくなります。そこで、1段階入れ子になるごとに半角スペース2〜4つ、またはタブ1つ分のインデント（字下げ）を入れると、親子関係が視覚的に追いやすくなります。
<body>
<section>
<h2>見出し</h2>
<p>本文テキスト。</p>
</section>
</body>インデントは見た目上の書き方にすぎませんが、読みやすさに直結します。自分以外の人も読む可能性があることを意識すると、整理された書き方の重要性が実感しやすくなります。
タグ名・属性名は小文字、属性値は引用符で囲む
HTML5ではタグ名と属性名は大文字・小文字を区別しませんが、一般的にはすべて小文字で書きます。
<!-- 推奨される書き方 -->
<a href="contact.html">お問い合わせ</a>属性値（hrefやaltなどの値）は、基本的にダブルクォーテーション " で囲みます。
<img src="images/logo.png" alt="サイトのロゴ">囲まずに書けるケースもありますが、クォーテーションを省略すると予期せぬ解釈をされる可能性があるため、学習段階では省略しない形を徹底すると安全です。
意味に合ったタグを選ぶ（セマンティックHTML）
見た目のためだけにタグを選ぶのではなく、「その部分が文章の中でどんな意味を持っているか」でタグを選ぶ考え方を「セマンティックHTML」と呼びます。
- ページタイトル：
<h1> - セクションの見出し：
<h2>〜<h3> - 通常の本文：
<p> - 強調すべき重要な語句：
<strong> - 独立した記事：
<article> - ナビゲーション：
<nav>
意味に合ったタグを使うことで、検索エンジンやスクリーンリーダーがページ構造を理解しやすくなります。単に文字を大きくしたいだけで見出しタグを使うのではなく、「見出しだからhタグを使う」という発想を持つことが重要です。
画像・リンクのアクセシビリティを意識する
<img>タグには、必ずalt属性を付けるようにします。altには、その画像が何を表しているかを簡潔に説明するテキストを書きます。
<img src="images/staff.jpg" alt="スタッフ集合写真">視覚に障害があるユーザーや、画像が読み込めない環境では、このaltが代わりに読み上げ・表示されます。意味のある画像には内容を、飾りだけの画像には空文字（alt=""）を指定するなど、「画像をどう扱ってほしいか」を明示することが大切です。
リンクテキストも「こちら」「ここ」だけではなく、リンク先の内容が分かるような表現にすると親切です。
<a href="price.html">料金プランの一覧を見る</a>このように書くことで、スクリーンリーダーでリンクだけを一覧した場合でも、何のリンクか判断しやすくなります。
特殊文字のエスケープに注意する
HTMLでは、< や >、& といった記号はタグや実体参照として特別な意味を持つため、テキストとして表示したい場合は「エスケープ」と呼ばれる置き換えを行います。
<→<>→>&→&
例えば、コード例として<p>を画面にそのまま表示したい場合は、
<p>段落</p>のように書きます。エスケープを忘れると、意図せずタグとして解釈され、表示崩れや誤動作の原因になります。
コメントを活用して意図を残す
HTMLでは、ブラウザに表示されないメモとして「コメント」を残すことができます。
<!-- メインコンテンツ開始 -->
<main>
...
</main>
<!-- メインコンテンツ終了 -->コメントは、自分や他の開発者が後からコードを読み返したときに、「このブロックは何のためにあるのか」を思い出す助けになります。ただし、不要なコメントを大量に残すとかえって読みにくくなるので、要所に簡潔に書く意識が必要です。
不要な重複や無意味な入れ子を避ける
同じ意味のタグを過剰に重ねたり、必要以上に深い入れ子構造にしたりしないことも重要です。
<!-- あまり良くない例 -->
<p><span><span>テキスト</span></span></p>このような書き方は、構造を複雑にするだけで意味的なメリットがありません。最小限のタグで、意味がきちんと伝わる構造を目指すと、保守性の高いHTMLになります。
まとめ
この記事では、HTMLとhtmlタグを中心に、Webページの土台となる考え方と具体的なタグの使い方について整理してきました。まず、HTMLとは「Webページの構造や意味をブラウザに伝えるためのマークアップ言語」であること、そしてHTMLは計算や処理を行うプログラミング言語ではなく、文章の各部分に「ここは見出し」「ここは段落」「ここはリンク」といった意味づけを行う役割を持つことを確認しました。家の建物に例えるなら、柱や間取りを決める骨組みがHTMLであり、見た目の色や装飾を担当するのはCSSだというイメージを持っていただけたと思います。
次に、htmlタグそのものの役割についても整理しました。<html>タグは文書全体を包むルート要素であり、その内側に<head>と<body>が入り、ページの設定情報と表示内容が分かれていることを学びました。また、lang="ja"のような属性を指定することで、ページの主な言語を検索エンジンやスクリーンリーダーに伝えられること、ブラウザが内部で作るDOMツリーにおいても、html要素が最上位に位置することを確認しました。
よく使う基本的なHTMLタグとしては、見出しの<h1>〜<h6>、段落の<p>、リンクの<a>、画像の<img>、リストの<ul>・<ol>・<li>、そしてレイアウトの箱としての<div>や、文章の一部を囲う<span>などを取り上げました。これらのタグは、すべてを覚えなくても少しずつ使いながら慣れていくことが大切であり、特に「このタグはどんな意味を持つのか」を意識して使うことがポイントであるとお伝えしました。
テキストを整えるタグとしては、見出しタグで文章の階層構造を表し、<p>で段落を区切り、必要に応じて<br>で行を変える方法を見てきました。さらに、重要な部分を強調する<strong>、ニュアンスを強める<em>、装飾寄りの<b>・<i>、部分的にスタイルを当てるための<span>、補足情報の<small>、数式や化学式に使える<sup>・<sub>なども紹介し、「見た目」だけでなく「意味」としての強調を意識することの大切さを解説しました。
画像とリンクに関しては、<img>のsrc属性とalt属性の役割、サイズ指定の考え方、相対パスと絶対パスのイメージ、そして<a>タグによるリンクの作り方を学びました。外部サイトへのリンク、新しいタブで開くtarget="_blank"、画像をリンクにするパターン、ページ内リンクのためのid属性、mailto:やtel:リンクといった応用的な使い方も取り上げ、実用的なページ作りに欠かせない要素であることを確認しました。
レイアウトの観点では、ブロック要素とインライン要素の違いを改めて意識しつつ、<div>を使った箱の作り方と、HTML5で追加されたセマンティックなレイアウトタグ（<header>・<main>・<footer>・<nav>・<section>・<article>・<aside>）の役割を整理しました。これらのタグを使うことで、コードを読む人にも、検索エンジンや支援技術にも、ページ構造が伝わりやすくなることを説明し、sectionとarticleの使い分けの考え方にも触れました。
最後に、HTMLを書く際の基本ルールと注意点として、<!DOCTYPE html>の宣言、headとbodyの分離、タグの開始・終了の対応関係、入れ子構造の守り方、インデントによる可読性の向上、タグ名・属性名を小文字で書く習慣、属性値を引用符で囲むこと、画像のalt属性やリンクテキストの工夫によるアクセシビリティへの配慮、特殊文字のエスケープの必要性、コメントの活用、不必要な入れ子や重複を避ける姿勢などをまとめてお伝えしました。
これらの内容を通して、HTMLは単に「ブラウザに文字を表示させるための記号」ではなく、「人にも機械にも伝わるように情報を整理するための仕組み」であることを感じていただければ十分です。まずは基本的なタグとルールに沿って、小さなページを一つずつ書いてみることで、自然とHTMLの構造や考え方が身についていきます。