Wikibooks

HTML

Wikipedia
 ウィキペディアにHTMLの記事があります。
メインページ > 情報技術 > プログラミング > HTML

目次編集

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

基礎編集

応用編集

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（HTML5）となり、 Internet Explorer 11 を例外とすれば、高い標準への準拠度を実現したモダンブラウザが一般に使われ、クライアントの主流もPCからスマホやタブレットなどのモバイルデュバイスに移りました。

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

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>
  1. HTML5のDOCTYPEは<!DOCTYPE html>とコザッパリした。技術的に言うとDTDを伴わないのでHTML5はもはやSGMLではなくなった。
  2. HTML文章は必ず1つだけのHTML要素を持つ。lang属性で言語を指定することが推奨される。
  3. HTML要素には、必ずHEAD要素とBODY要素（フレームはHTML5で廃止された）をそれぞれ1つ持つ。
  4. <meta charset='utf-8'>は、キャラクターコードをUTF-8に指定している。既定値がUTF-8なので必須ではないが、指定しないとレンダリングが崩れる（文字化けする）場合がある。

脚注編集

  1. ^ HyperText Markup Language・ハイパーテキストマークアップランゲージ
このページ「HTML」は、まだ書きかけです。加筆・訂正など、協力いただける皆様の編集を心からお待ちしております。また、ご意見などがありましたら、お気軽にトークページへどうぞ。
"https://ja.wikibooks.org/w/index.php?title=HTML&oldid=204289" より作成