HTMLとは：ウェブページの定義・基本構造とHTML5の特徴

HTMLとは何かを初心者向けにわかりやすく解説。基本構造や主要タグ、CSS・JavaScriptとの関係、HTML5の特徴と実践ポイントまで丁寧に紹介。

著者: Leandro Alegsa

19-12-2025 18:02

HTML（Hyper Text Markup Language）は、ウェブページを作成するためのマークアップ言語です。ウェブページは通常、ウェブブラウザで表示され、文章、リンク、画像、さらには音声や動画などが含まれます。HTMLはこれらのコンテンツに意味づけ（マーク）を与え、ウェブブラウザが正しく表示・解釈できるように構造を記述します。また、HTMLはページに関するメタ情報（例：作成者、文字エンコーディング、表示方法の指示など）を追加するためにも使用されます。スタイル（見た目）の指定は主にCSS（カスケーディング・スタイル・シート）が担当し、動的な振る舞いや操作はJavaScriptはが担当します。

基本的な構造

HTML文書は、最低限次のような要素で構成されます。これらはブラウザが文書を正しく解釈するための基本です。

<!DOCTYPE html>：HTML5であることを宣言する宣言文（文書型宣言）。
<html lang="ja">：文書のルート要素。言語属性（lang）を指定するとアクセシビリティや検索エンジンに有利です。
<head>：メタ情報を置く領域。<meta charset="utf-8">で文字エンコーディングを指定し、<title>でページタイトルを定義します。
<body>：実際にブラウザに表示されるコンテンツ（段落、見出し、画像、フォームなど）を配置します。

よく使われる要素（タグ）

<h1>〜<h6>：見出し
<p>：段落
<a href="...">：ハイパーリンク（他ページや外部リソースへのリンク）
<img src="..." alt="...">：画像（必ず alt 属性を付けて代替テキストを提供する）
<ul>/<ol>/<li>：リスト（箇条書き、番号付きリスト）
<table>：表（<thead>、<tbody>、<tr>、<th>、<td> を併用）
<form>、<input>、<button>：ユーザーからの入力を受け付けるフォーム要素
<div>、<span>：汎用のコンテナ（構造化やスタイルのため）
HTML5で追加されたセマンティック要素：<header>、<nav>、<main>、<section>、<article>、<aside>、<footer> など（意味のある構造を示す）

HTML5の主な特徴（進化した点）

セマンティック要素の導入により、構造と意味が明確になり、アクセシビリティや検索エンジンの理解が向上。
<audio>、<video> 要素によるネイティブなマルチメディア再生のサポート。
Canvas（<canvas>）やSVGの利用で図形描画や2D/3Dの表現が可能。
フォーム要素の拡張（type="email"、"date"、"number"、"range" など）とバリデーション機能の強化。
Web Storage（localStorage/sessionStorage）、Service Workers、Fetch API、WebSockets などのAPIによるリッチなクライアント機能とオフライン対応。
レスポンシブ画像（srcset、<picture>）や<meta name="viewport">によるモバイル対応の強化。
カスタムデータ属性（data-*）やMicrodataなど、構造化データの埋め込みが容易に。

アクセシビリティ（A11Y）とSEOの観点

画像には必ず alt 属性を付ける。意味のある要素（見出しやリスト、ランドマーク）を正しく使うことでスクリーンリーダーの理解が向上します。
見出しは階層を崩さず順序よく使い、<nav>や<main>などのランドマークで構造を明示する。
ARIA属性は必要な場合にのみ追加し、既存のセマンティック要素を優先する。

ベストプラクティス

ファイルの文字エンコーディングは UTF-8 を使用する（<meta charset="utf-8">）。
HTMLはコンテンツと構造、CSSは見た目、JavaScriptは振る舞いを分離する（責務の分離）。
できる限りセマンティックなタグを使い、意味のない <div> の乱用を避ける。
レスポンシブデザインを採用し、モバイルファーストで設計する。
定期的にHTML検証ツールでバリデーションを行い、ブラウザ互換性とアクセシビリティを確認する。

標準化と参考

HTMLは最初にWorld Wide Web Consortium（W3C）を中心に規格化されました。現在はWHATWGが維持する「Living Standard（生きている仕様）」として継続的に進化しており、W3CはHTMLの安定版スナップショットを公開しています。開発を行う際は、ブラウザ実装状況や最新の仕様書、互換性情報（Can I Use など）を参照することが重要です。

まとめ

HTMLはウェブの骨組みを作る言語であり、適切な構造化（セマンティックな要素の使用）、アクセシビリティへの配慮、CSS・JavaScriptとの役割分担を守ることで、読みやすく保守しやすいウェブページを作ることができます。HTML5以降、多くの新機能やAPIが追加され、よりリッチでインタラクティブなウェブが実現可能になっています。

HTMLでは、「タグ」と呼ばれる特殊なプログラミング言語を使用して、ブラウザにウェブページの見栄えを知らせます。タグは通常、2つ1組になっており、開始タグはコンテンツのブロックの開始を定義し、終了タグはそのブロックの終了を定義しています。タグにはさまざまな種類があり、それぞれ目的が異なります。タグの例については、下記の「HTMLの基本タグ」を参照してください。

特定のブラウザでしか動作しないタグがあります。例えば、マウスの右ボタンを押したときに何かを表示させるための<menuitem>タグは、Mozilla Firefoxブラウザでしか動作しません。他のブラウザはこのタグを無視して、普通に文章を表示する。多くのホームページ制作者は、どのブラウザでも同じように見えるようにしたいので、こうした「非標準」のタグを使うことを避けています。

例

以下は、HTMLでのページ例です。

1 <!DOCTYPE html> 2 < html> 3 < head> 4 < title> このページのタイトルです。 </title> 5 </head> 6 < body> 7 < p> このパラグラフです。</p> 8 < a href="https://www.domain.com"> これはリンクです。 </a> 9 < img src="image.jpg" alt="Image"> 10 </body> 11 </html>

単純なHTMLページはこんな感じです。"Hello world!"と書かれた1つの段落。「と書かれた一段落。

1 <!DOCTYPE html> 2 < html> 3 < head> 4 < title> こんにちは！</title> 5 </head> 6 < body> 7 < p> Hello world! </p> 8 </body> 9 </html>

HTMLの基本タグ

タグ名	名称	機能	コード例
`<!DOCTYPE>`	ドクタイプ	ドキュメントの種類を定義する	<!DOCTYPE html>
`<html>`	HTML	HTML文書を定義し、HTML文書を開始する。	< html> すべてのコード</html>。
`<head>`	ヘッド	ウェブページの要素を表示するために使用されないすべてのコードを含む	<ヘッド></ヘッド
`<title>`	タイトル	ウェブページのタイトル（タブに表示される）を定義し、`<head>`内に入力されます。	<タイトル> ウェブページ</title>
`<body>`	本体	ウェブページの目に見える要素を含む（段落なども含まれる）	<body> Htmlタグ</body>。
`<h1`>から`<h6>まで`	見出し	さまざまなサイズの見出し`（<h1`>が最大サイズ）	< h1> 見出し</h1>。
<p>	パラグラフ	テキストの段落を定義する	< p>テキスト</p>
<a>	アンカー	他のウェブページへのアクティブリンクの作成	< a href="www.domain.com"> サイトを見る</a>。
`<img>`	画像	ページ上に画像を表示する	< img src="ImageUrl" alt="画像がない場合はテキストが表示されます">。
`<br>。`	休憩	1行の改行を挿入する	テキスト < br> テキスト
`<センター>。`	センター	コンテンツをページの中央に移動させる	< center> コード</center>。
`<script>`	スクリプト	ウェブページにスクリプトを作成します。通常はJavaScriptで記述します。	< script> document.write("Hello World!")</script>。

HTMLタグの使用

ウェブページの作成

タグと順番を覚えれば、簡単にホームページが作れます。

まず、HTMLタグを入力する場所を探し（メモ帳がおすすめ）、タグを打ち込みます。

ここでは、HTMLタグのページの例をもう一つ紹介します。

<html>

<head>

<title> こんにちは！<title>です。

<h1> Hello world！</h1>。

</head>になります。

<body>

<p>

このページはHTMLタグのページです。

</p>

<フッター>

By*ここに名前を入れてください

</footer>。

</html>。

完了したら、次のフォーマットで保存してください： helloworld.htm

(スペースを入れずに)

そして、完成ですパソコンに保存したら、それを押すとgoogleのあなたのWebページに飛びます

質問と回答

Q:HTMLとは何ですか?

A: HTMLはマークアップ言語の一種で、文章、リンク、画像、オーディオビジュアルを含むウェブページを作成するために使用されます。

Q: HTMLの機能は何ですか?

A:HTMLの機能は、ウェブブラウザにウェブページがどのように見えるかを伝え、ウェブページの作成者の名前などのメタ情報を追加することです。

Q:HTMLで作成されたウェブページに含めることができるメディアの例には何がありますか?

A:HTMLで作成されたウェブページに含めることができるメディアの例として、オーディオファイルやビデオクリップがあります。

Q: CSSはHTMLをどのように補完するのですか?

A:CSSは、HTMLページの外観を変更するために使用されます。

Q:Web制作におけるJavaScriptの役割とは何ですか?

A:JavaScriptは、Webサイトの動作を指示し、HTMLやCSSの外観を変更することができるため、Web開発において不可欠なスクリプト言語です。

Q: HTMLは誰が作っているのですか?

A: HTMLはWorld Wide Web Consortium (W3C)によって作られています。

Q:現在のHTMLの標準バージョンは何ですか?

A: 2018年9月現在、HTML 5がバージョン5.2で最新の標準バージョンです。

百科事典を検索する