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)：ウェブページから情報を送信する方法
- 装飾：色や大きさを指定する方法
HTMLと共に用いられる技術編集
- CSS：ページの装飾
- JavaScript：ページに動的効果を与える
- CGI：サーバーや他のコンピュータとのやり取り
- HTML5 (2020-03-17)：HTML Living Standard によって置き換えられるまでのウェブ標準
- 外部リンク (2005-05-25)：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文章の１行目はドキュメントタイプ。
- HTML文章のルート要素はHTML要素。
- HTML要素の子要素は、HEAD要素とBODY要素。
- HEAD要素の中には、必ず1つのTITLE要素。
- HTML要素の子要素は、HEAD要素とBODY要素。
この例文をウェブブラウザで見ると次のような事が分かります。
- TITLE要素の内容がタブなどに表示される。
- BODY要素の中の文章が表示される。
| HTMLのScaffolding |
| HTMLのScaffoldingは、ウェブサイトの基本構造を簡単に設定する方法です。Scaffoldingを使用することで、HTML文書の基本的な構造を素早く設定することができます。
以下は、HTMLのScaffoldingに必要な要素の例です。
<!DOCTYPE html>
<html> <head> </head> <body> </body> </html>
<head> <meta charset="UTF-8"> <title>ページのタイトル</title> </head>
<body> <header> </header> <nav> </nav> <main> </main> <footer> </footer> </body> これらの要素を組み合わせることで、ウェブサイトの基本構造を素早く設定することができます。ただし、Scaffoldingはあくまでも基本的な構造を設定するためのものであり、ページのスタイルや機能については別途設定する必要があります。 |
