HTML
目次[編集]
基礎[編集]
- ヘッダ
(2008-02-28)：情報の記述 - 本文 (2008-02-28)：本文の記述
- ハイパーリンク (2008-03-04)：リンクを作成する方法
- リスト（箇条書き）
(2008-03-04)：箇条書きにする方法 - オブジェクト
(2008-03-07)：画像などを挿入する方法 - idとclass (2008-03-05)：要素に名前を付ける方法
- タグの省略
(2008-05-11)：タグを省略する方法 - ラベル:ラベルを作成する方法…JavaScriptと組み合わせてイベント処理
応用[編集]
- テーブル（表） (2007-12-12)：表を作成する方法
- フォーム (2008-02-28)：ウェブページから情報を送信する方法
- フレーム (2008-01-29)：複数のページを組み合わせて表示する方法
- 装飾：色や大きさを指定する方法
HTMLと共に用いられる技術[編集]
- CSS：ページの装飾
- JavaScript：ページに動的効果を与える
- CGI：サーバーや他のコンピュータとのやり取り
- HTML5 (2020-03-17)：現行のウェブ標準
- 外部リンク (2005-05-25)：HTML作成に役立つ情報
- ラベル：ラベルを作成する方法
はじめに[編集]
本書は、ウェブページの標準的なマークアップ言語であるHTML[1]の解説書です。 テキストエディタとウェブブラウザがあれば、ウェブページを作成したり、作成したページを閲覧したり、世界中の人と情報を共有したりすることができます。
本書では、簡単なHTMLの構文を説明しています。Webサイトの動的な動作については、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入門[編集]
要素とタグ[編集]
ここでは旧規格のHTML4.01でのマークアップ例を紹介する。次にHTML5のマークアップ例を示し差異についても解説する。
HTMLは、要素ごとにタグを用いて階層的な文書構造をマークアップする。
要素は基本的に開始タグ、内容、終了タグの3つから成り立つ。一部の要素には終了タグを使わないものもある。開始タグは必ず < で始まり、 > で終わる。また終了タグは必ず </ で始まり、 > で終わる。また要素名は大文字小文字を意識しない（HTML5のXML構文では小文字に限られる）。開始タグで大文字を使えば終了タグでも大文字を使う。
以下では簡単な例を用いて紹介することにしよう。最初の一行の意味は後述するので、ここでは「きまり」と考えて欲しい。
マークアップ例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 簡単な例 </title>
</head>
<body>
<p>この文書は非常に簡単な例だ！</p>
</body>
</html>
表示例
この文書は非常に簡単な例だ！
- (※破線の枠内の文章が表示されます。)
2行目の <html lang="ja"> は不等号 < で始まり、> で終わるので「開始タグ」である。最終行の </html> は </ で始まり、 > で終わるので「終了タグ」である。<html> という開始タグと </html> という終了タグで、一つの対をなしており、その間に挟まれたものは内容というものになる。これをもって以下ではHTML要素と呼ぶ。3行目の <head> と6行目の </head> も同じ関係であり、以下HEAD要素と呼ぶ。他のタグに関しても同じである。
HTML文章の非常に簡単でなおかつ、重要な点をこの例は示している。
- HTML文章は必ず1つだけのHTML要素を持つ。
- HTML要素には、必ずHEAD要素とBODY要素（またはフレーム）をそれぞれ一つずつだけ持つ。
- HEAD要素の中には、必ず1つだけのTITLE要素がある。
この例文をウェブブラウザで見ると次のような事が分かる。
- TITLE要素の内容がタイトルバーなどに表示されているはずである。
- BODY要素の中の文章が表示されたはずである。
下は、Windowsにおいて、Lynxを用いて表示した場合の表示例である。
Lynxによる表示例
HTML5で記載した例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset='utf-8'>
<title> 簡単な例 </title>
</head>
<body>
<p>この文書は非常に簡単な例だ！</p>
</body>
</html>
- HTML5のDOCTYPEは
<!DOCTYPE html>とコザッパリした。技術的に言うとDTDを伴わないのでHTML5はもはやSGMLではなくなった。 - HTML文章は必ず1つだけのHTML要素を持つ。lang属性で言語を指定することが推奨される。
- HTML要素には、必ずHEAD要素とBODY要素（フレームはHTML5で廃止された）をそれぞれ1つ持つ。
- <meta charset='utf-8'>は、キャラクターコードをUTF-8に指定している。既定値がUTF-8なので必須ではないが、指定しないとレンダリングが崩れる（文字化けする）場合がある。