← 用語集一覧へ戻る

HTML

HyperText Markup Language
web development beginner
Webページの構造と内容を定義するマークアップ言語のこと。見出し・段落・リンク・画像などの要素をタグで記述する。
HTML (HyperText Markup Language)

概要（サマリー）

HTML（HyperText Markup Language）とは、Webページの構造と内容を定義するマークアップ言語のことである。「このテキストは見出しだ」「ここにリンクを貼る」「この画像を表示する」といった指示を、タグと呼ばれる記号で記述する。CSSがデザインを、JavaScriptが動きを担当するのに対し、HTMLはページの「骨格」を作る役割を持つ。Webサイトを作るなら、まず最初に触れる言語といえる。

詳細解説

タグの基本構造

HTMLはタグを使って要素を記述する。ほとんどのタグは開始タグと終了タグのペアで構成される。

<h1>これは大見出しです</h1>
<p>これは段落のテキストです。</p>
<a href="https://example.com">これはリンクです</a>
<img src="photo.jpg" alt="写真の説明">

href・src・alt のようにタグの中に書く追加情報を「属性」と呼ぶ。属性によって「どこへのリンクか」「どの画像か」「画像の説明は何か」といった情報を付け加えられる。<img> のように終了タグを持たない「空要素」もある。

HTMLの基本的なページ構造

完全なHTMLファイルは以下のような構造になっている。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ページのタイトル</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>見出し</h1>
  <p>本文テキスト</p>
  <script src="app.js"></script>
</body>
</html>

<head> 内にはメタタグやCSSの読み込みなど、ページの設定情報を書く。ここの内容はブラウザの画面には直接表示されない。<body> 内に実際に表示されるコンテンツを書く。<script> タグは <body> の閉じタグ直前に置くのが一般的で、こうすることでHTMLが読み込まれてからJavaScriptが実行される。

よく使うHTMLタグ

タグ 役割
<h1>〜<h6> 見出し（数字が大きいほど小さい見出し）
<p> 段落テキスト
<a href="..."> リンク
<img src="..." alt="..."> 画像
<ul> / <ol> / <li> 箇条書き・番号付きリスト
<table> / <tr> / <td> 表
<form> / <input> / <button> フォーム・入力欄・ボタン
<div> 汎用ブロック要素（グループ化）
<span> 汎用インライン要素
<header> / <footer> / <nav> / <main> ページのレイアウト領域

セマンティックHTMLとは

HTML5からは「セマンティックHTML」という考え方が重要になった。セマンティックとは「意味のある」という意味で、タグ自体が「この領域は何のためのものか」を表すことを指す。

たとえば <div> はただの「箱」で意味を持たないが、<header>・<nav>・<article>・<footer> などは名前だけでその役割が分かる。

<!-- 意味が曖昧な書き方 -->
<div class="header">...</div>
<div class="menu">...</div>

<!-- セマンティックな書き方 -->
<header>...</header>
<nav>...</nav>

セマンティックHTMLを使うと、ブラウザや検索エンジンがページの構造を正しく理解しやすくなり、SEOやアクセシビリティの向上にもつながる。

DOMとJavaScriptの関係

ブラウザがHTMLを読み込むと、その構造を「DOM（Document Object Model）」というツリー状のデータとしてメモリに展開する。JavaScriptはこのDOMを操作することで、ページの内容を動的に変更できる。

// HTMLの <p id="message"> の中身をJavaScriptで書き換える
document.getElementById('message').textContent = 'こんにちは！';

つまりHTMLは「最初の骨格」であり、JavaScriptがDOMを通じてその骨格を後から変形させるイメージだ。

AIコーディングとHTMLの関係

AIはHTMLのコード生成が得意だ。「問い合わせフォームのHTMLを作って」と指示するだけで、<form>・<input>・<button> を使った構造を生成してくれる。ただし、AIが生成するHTMLは <div> を多用して意味が曖昧になりやすい傾向がある。「セマンティックHTMLで」「アクセシビリティを考慮して」と明示すると、より品質の高いコードが生成される。

よくある勘違い

HTMLはプログラミング言語？

厳密には異なる。HTMLはマークアップ言語であり、条件分岐やループなどのプログラミング的な処理はできない。「Webサイトを作るもの」という意味でプログラミング言語と一緒に語られることは多いが、処理の記述はJavaScriptの役割だ。

HTMLとMarkdownは同じもの？

異なる。Markdownは人間が読み書きしやすい軽量な記法で、最終的にHTMLに変換されることが多い。GitHubのREADMEやブログ記事はMarkdownで書いて、表示するときにHTMLへ変換されるイメージだ。Markdownはブラウザが直接解釈できるわけではない。

<div> を使えば何でもできる？

技術的にはできるが、推奨されない。<div> はただの箱で意味を持たないため、多用するとSEOやアクセシビリティに悪影響が出る。見出しには <h1>〜<h6>、リストには <ul>/<li>、ナビには <nav> を使い、適切なタグを選ぶことが大切だ。

<h1> は1ページに1つまで？

厳密なルールではないが、通常は1ページに1つが推奨される。検索エンジンはページの主題を <h1> から判断するため、複数使うと意図が伝わりにくくなる。<h2> 以降は複数使ってよい。

より詳しくAIに聞いてみよう

  • HTMLとは何かを、プログラミング未経験者でもわかるように説明してください。
  • HTMLのセマンティックタグ（header・nav・main・article・footer）の使い分けを教えてください。
  • HTMLとCSS・JavaScriptの役割分担を、料理にたとえてわかりやすく説明してください。
  • AIコーディングでHTMLを生成してもらうとき、アクセシビリティを考慮した指示の出し方を教えてください。
  • HTML5で追加されたセマンティックタグが、SEOにどう影響するか教えてください。