HTML

出典: フリー教科書『ウィキブックス（Wikibooks）』
ナビゲーションに移動 検索に移動
メインページ > 情報技術 > プログラミング > HTML

目次[編集]

進捗状況の凡例
00%.svg 数行の文章か目次があります。
25%.svg:本文が少しあります。
50%.svg:本文が半分ほどあります。
75%.svg: 間もなく完成します。
100 percent.svg: 一応完成しています。

基礎[編集]

応用[編集]

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

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

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

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

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

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

脚註[編集]

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

外部リンク[編集]

Wikipedia
 ウィキペディアにHTMLの記事があります。
ウィキバーシティ
 ウィキバーシティにHTMLの学習教材があります。


このページ「HTML」は、まだ書きかけです。加筆・訂正など、協力いただける皆様の編集を心からお待ちしております。また、ご意見などがありましたら、お気軽にトークページへどうぞ。
"https://ja.wikibooks.org/w/index.php?title=HTML&oldid=220243" より作成