HTML

HTML：トップレベルの文書構造
HEAD：メタデータの記述
BODY：本文の記述
ハイパーリンク：リンクを作成する方法
リスト（箇条書き）：箇条書きにする方法
オブジェクト：画像などを挿入する方法
idとclass：要素に名前を付ける方法
タグの省略：タグを省略する方法
ラベル:ラベルを作成する方法…JavaScriptと組み合わせてイベント処理
要素の一覧：よく使われる要素の簡単な説明

応用

テーブル（表）：表を作成する方法
フォーム：ウェブページから情報を送信する方法
フレーム^†：フレームはHTML5で廃止されています。フレームの概要、廃止の理由、代替技術について解説。
マイクロマークアップ：HTML要素に対して追加の意味付けを行い、機械が文書の内容をより理解しやすくするための仕組み
セマンティックHTML: HTML要素に意味を持たせ、構造とコンテンツを明確にするための技術
レスポンシブデザイン: さまざまなデバイスや画面サイズに対応するためのウェブデザイン技術
リキッドデザイン: 画面サイズに応じて柔軟にレイアウトが変化するウェブデザイン手法
アクセシビリティ: すべてのユーザーがウェブコンテンツを利用できるようにするための方法
バージョン管理: プロジェクトのコードやリソースの変更履歴を管理するシステム
ウェブパフォーマンス: ウェブページの読み込み速度や応答性を最適化するための技術
SEO（検索エンジン最適化）: ウェブサイトが検索エンジンで上位に表示されるようにするための方法
ウェブセキュリティ: ウェブアプリケーションを保護するための方法

HTMLと共に用いられる技術

HTML Living Standard：最新のウェブ技術とブラウザ機能に適応し続けるために常に更新されるHTMLの仕様。2024年6月現在の最新仕様。
CSS：ページの装飾
JavaScript：ページに動的効果を与える
ブラウザ：HTMLの閲覧環境
HTML5：HTML Living Standard によって置き換えられるまでのウェブ標準
外部リンク：HTML作成に役立つ情報

はじめに

本書は、ウェブページの標準的なマークアップ言語であるHTML^[1]の解説書です。テキストエディタとウェブブラウザがあれば、ウェブページを作成したり、作成したページを閲覧したり、世界中の人と情報を共有したりすることができます。

本書では、簡単なHTMLの構文を説明しています。ウェブサイトの動的な動作については、JavaScriptのWikiBookをご覧ください。また、全体の見栄えやスタイルを調整するCSS（Cascading Style Sheets）については別の本で紹介していますが、本書ではCSSについて簡単に説明しています。

HTMLは見出しや段落などの各種要素をタグと呼ばれる表記法を用いマークアップしたテキストファイルです。テキストファイルなのでテキストエディタ（例えばWindowsのメモ帳）で編集でき編集環境は比較的入手容易です。

一方、Microsoft Edge・Google Chrome・Mozilla Firefox・OperaやSafari等のウェブブラウザでウェブページを表示するとテキストエディタで開いたときとは違い、レイアウト・文字種・色など多く修飾が構造に加えれ表示されます。これらはHTMLをHTMLレンダリングエンジンが解釈しレンダリングされた結果です。

ウェブ標準

かつてブラウザ戦争がありました。そのころもウェブ標準はありましたが競合勢力との差別化のため積極的に標準とは異なる要素・標準とは異なる解釈を行うHTMLレンダリングエンジンが複数市場に存在することとなりました。

その結果、複数のブラウザで望み通りの表示を行うことがウェブ製作者にとって困難なこととなり「このページは XXXX のバージョン NNNN の 1024x768ピクセルで表示して下さい」の様に、ページ閲覧者側にウェブ閲覧環境を強制したり、本来は表組のためのTABLE要素をつかってレイアウトするなど、HTML文書の本来の目的「文書の構造化」とは逆行するバッドノウハウが蔓延し、FONT要素の様な本質的に装飾が目的で構造とは無関係な要素が「ウェブ標準」に含まれる事態にまでなってしまいました。

時は流れ2021年6月現在、HTML規格の最新はW3Cから標準策定を引継いだWHATWGが標準化するHTML Living Standardとなり^[2]、高い標準への準拠度を実現したモダンブラウザが一般に使われ、クライアントの主流もPCからスマートフォンやタブレットなどのモバイルデバイスに移りました。

本書には、HTML5や、更に古いHTML4.01を対象とした記述がまだ多く残っています。多くのページはHTML Living Standardでマークアップされています（このページ自身も2022年7月現在HTML Living Standardでマークアップされています）ので適宜差異について解説を加えます。

HTML入門

要素とタグ

ここでは2022年10月現在の現行の規格である HTML Living Standard でのマークアップ例を紹介します。

HTMLは、要素をタグを用いて階層的な文書構造をマークアップします。

要素

要素は、開始タグ、内容、終了タグの3つから成り立ちます。

META要素のように、内容と終了タグを伴わないものもあります。

またLI要素のように終了タグが省略可能なものもあります。

開始タグ

開始タグは、 < で始まり、要素名、属性リスト（省略可能）、 > で終わます。

内容

内容は、０個以上の要素（子要素）あるいはテキストです。

テキストの改行は１つの空白に置き換えられ、詰め込み処理されます。

これが日本語のように分かち書きをしない言語では不都合が生じるのですが、改行位置の工夫などでなるべく違和感がないようマークアップで回避しています。

終了タグ

終了タグは、 </ で始まり、要素名、 > で終わます。

また要素名は大文字小文字を区別しませんが、HTML Living StandardのXML構文では小文字に限られます。

以下では簡単な例を用いて紹介することにしましょう。

マークアップ例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset='utf-8'>
    <title>簡単な例</title>
  </head>
  <body>
    <p>この文書は非常に簡単な例だ！</p>
  </body>
</html>

HTML Living StandardのDOCTYPEは<!DOCTYPE html>とシンプルです。技術的に言うとDTDを伴わないのでHTML5以降はもはやSGMLではなくなりました。
HTML文章は必ず1つだけのHTML要素を持ちます。lang属性で言語を指定することが推奨されます。
<html lang="ja"> は < で始まり、> で終わるので「開始タグ」です。最終行の </html> は </ で始まり、 > で終わるので「終了タグ」です。<html> という開始タグと </html> という終了タグで、一つの対をなしており、その間に挟まれたものは内容です。
<head> と6行目の </head> も同じ関係にあります。
HTML要素には、必ずHEAD要素とBODY要素をそれぞれ1つ持ちます。
<meta charset='utf-8'>は、キャラクターコードをUTF-8に指定しています。既定値がUTF-8なので必須ではませんが、指定しないとレンダリングが崩れる（文字化けする）場合があります。

表示方法

上記のhtmlのコード内容を書いたファイルを.html拡張子で保存し、新しめのwebブラウザで閲覧すれば、下記のように表示できるはずです。

表示例: この文書は非常に簡単な例だ！

HTML文章の非常に簡単でなおかつ、重要な点をこの例は示しています。

HTML文章の１行目はドキュメントタイプ。
HTML文章のルート要素はHTML要素。
- HTML要素の子要素は、HEAD要素とBODY要素。
  - HEAD要素の中には、必ず1つのTITLE要素。

この例文をウェブブラウザで見ると次のような事が分かります。

TITLE要素の内容がタブなどに表示される。
BODY要素の中の文章が表示される。

HTMLのScaffolding

HTMLのScaffoldingは、ウェブサイトの基本構造を簡単に設定する方法です。Scaffoldingを使用することで、HTML文書の基本的な構造を素早く設定することができます。

以下は、HTMLのScaffoldingに必要な要素の例です。

DOCTYPE宣言: DOCTYPE宣言は、HTML文書のバージョンと型を指定する必要があります。以下は、HTML5のDOCTYPE宣言の例です。

<!DOCTYPE html>

<html>要素: <html>要素は、HTML文書のルート要素であり、すべての要素を含む必要があります。

<html>
  <head>
  </head> 
  <body>
  </body>
</html>

<head>要素: <head>要素は、HTML文書のメタデータを含む必要があります。メタデータは、ページのタイトル、キーワード、説明などの情報です。

<head>
 <meta charset="UTF-8"> 
 <title>ページのタイトル</title>
</head>

<body>要素: <body>要素は、ウェブページの実際のコンテンツを含む必要があります。

<body>
  <header>
  </header>
  <nav>
  </nav>
  <main>
  </main>
  <footer>
  </footer>
</body>

これらの要素を組み合わせることで、ウェブサイトの基本構造を素早く設定することができます。ただし、Scaffoldingはあくまでも基本的な構造を設定するためのものであり、ページのスタイルや機能については別途設定する必要があります。

脚註

^ HyperText Markup Language・ハイパーテキストマークアップランゲージ
^ W3Cが策定していたHTML5は、2021年1月に廃止され、HTML Living StandardがHTMLの標準規格となりました。

外部リンク

Wikipedia

ウィキペディアにHTMLの記事があります。

ウィキバーシティ

ウィキバーシティにHTMLの学習教材があります。

このページ「HTML」は、まだ書きかけです。加筆・訂正など、協力いただける皆様の編集を心からお待ちしております。また、ご意見などがありましたら、お気軽にトークページへどうぞ。

[1] HyperText Markup Language・ハイパーテキストマークアップランゲージ

[2] W3Cが策定していたHTML5は、2021年1月に廃止され、HTML Living StandardがHTMLの標準規格となりました。

[1]

[2]