(Translated by https://www.hiragana.jp/)
HTML - Wikibooks コンテンツにスキップ

HTML

出典しゅってん: フリー教科書きょうかしょ『ウィキブックス（Wikibooks）』
メインページ > 情報じょうほう技術ぎじゅつ > プログラミング > HTML

目次もくじ

[編集へんしゅう]

基礎きそ

[編集へんしゅう]

応用おうよう

[編集へんしゅう]
  • テーブル（表ひょう）：表ひょうを作成さくせいする方法ほうほう
  • フォーム：ウェブページから情報じょうほうを送信そうしんする方法ほうほう
  • フレーム†：フレームは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>
  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拡張子かくちょうしで保存ほぞんし、新しんしめの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はあくまでも基本きほん的てきな構造こうぞうを設定せっていするためのものであり、ページのスタイルや機能きのうについては別途べっと設定せっていする必要ひつようがあります。

脚註きゃくちゅう

[編集へんしゅう]
  1. ^ HyperText Markup Language・ハイパーテキストマークアップランゲージ
  2. ^ W3Cが策定さくていしていたHTML5は、2021年ねん1月がつに廃止はいしされ、HTML Living StandardがHTMLの標準ひょうじゅん規格きかくとなりました。

外部がいぶリンク

[編集へんしゅう]
Wikipedia
Wikipedia
 ウィキペディアにHTMLの記事きじがあります。
ウィキバーシティ
ウィキバーシティ
 ウィキバーシティにHTMLの学習がくしゅう教材きょうざいがあります。
このページ「HTML」は、まだ書かきかけです。加筆かひつ・訂正ていせいなど、協力きょうりょくいただける皆様みなさまの編集へんしゅうを心しんからお待まちしております。また、ご意見いけんなどがありましたら、お気軽きがるにトークページへどうぞ。
"https://ja.wikibooks.org/w/index.php?title=HTML&oldid=252213" より作成さくせい