初めに(前書き)
今回は、今更ながら、「HTML」について解説していきたいと思います。
Qiitaの読者の方々には退屈な内容だとは思いますが、どうぞお付き合いください(笑)。
本題(本文)
「HTML, Hyper-Text-Markup-Language」は、初めスイスの「CERN」と呼ばれる研究機関で考案・開発されました。
ここで、学術の研究論文というのは、一つの論文に対して、複数の他の論文の索引や参照が含まれているので、論文を電子化した上で、各論文の間を行き来して、ある論文を読んでいるときに別の論文を素早く参照・閲覧できる仕組みが求められるようになります。
※これが世にいう「ハイパーリンク, Hyper-Link」というヤツですね。このハイパーリンクが埋め込まれた文書が「ハイパーテキスト, Hyper-Text」です。
※HTMLは、このハイパーテキストを記述するためのマークアップ言語なのです。
そんなときに、同CERNのティム・バーナーズ＝リー博士が考案・開発したのがHTMLというわけです。また「URL」「HTTP」も博士によるものです。
そして、今では当然の技術・存在である「WWW, World-Wide-Web」もCERNで考案・開発されました。
※というよりも、"ハイパーリンクで世界中のWebサイトが結ばれている今のインターネットの利用実態こそがWWWなのでは？"という気もしますが・・・。
※WWWとは、直訳すると「世界中に張り巡らされたクモの巣」ですが、これは"全世界規模の情報共有の場"という意味です。
※たとえば、Internetが「インフラ(IaaS)」だとすると、WWWは「プラットフォーム(PaaS)」にあたると思います。つまりは、前者が建物の「基礎」や「土台」だとすると、後者はその上に建つ個々具体的な「建物」みたいな関係ですね。
※まあ、いうまでもなく「インターネット, Internet」とは、現在、世界中に敷設されている光ファイバーなどの通信網だったり、それをつなぎ合わせるための通信機器の総体としてのコンピューターネットワーク(＝ハード)(＝物理的な下層の技術)を中心に据えた存在ですね。
HTMLは、W3Cによってversion4.01から始まり、「XML」のversion1.0と統合されて、「XHTML」系(＝1.0/1.1)ができましたが、後にこれは破棄されました。現在のversion5は、WHATWGによって作られた「Web Applications 1.0」と「XHTML」系が統合されてできました。
HTMLは、「タグ」をつかって文書の論理的な構造を記述していきます。
以下に、HTML5のタグを掲示しておきます。
「html」＝ルート要素をあらわします。HTML文書はこのタグから始まります。
「head」＝「meta」や「script」を内包します。「html」の次に書くタグです。
「base」＝文書から別の文書を参照する際にその位置の特定方法を指定するためのものです。
「meta」＝Webクローラー等に参照される文書・ファイルの拡張情報です。クローラーがインデックスを作成する基になる情報を埋め込みます。
「style」＝HTML要素に適用するスタイルを埋め込みます。これにはCSSを用います。
「!doctype」＝DTD等のHTML文書の型を宣言します。
「address」＝文書に関する連絡先・問合せ先を書くためのものです。
「body」＝HTML文書の本体を記述するために用います。
「section」＝見出しを伴う文書の区分(＝章や節)をあらわします。
「article」＝一つの記事などの自己完結した内容をあらわします。
「aside」＝補足的なコンテンツを書くためのものです。たとえば、本文の備考・補足・余談・用語解説、ブログのサイドバーや広告など。
「h1～h6」＝文書の見出しをあらわします。数字が大きいほど文字サイズも大きくなります。
「header」＝文書のヘッダーをあらわします。
「hgroup」見出し(＝h1～h6)をグループ化するためものです。
「nav」＝ナヴィゲーション(バー)をあらわします。
「footer」＝文書のフッターをあらわします。このタグの内側に会社や個人名などの著作権情報を書きます。
「main」＝文書の主だった内容を書くためのものです
「p」＝文字やテキストをあらわします。
「hr」＝水平方向の区切り線を引くためのものです。
「pre」＝整形済みテキストを表します。 このタグで囲まれた範囲のスペースや改行などがそのまま反映されます。
「blockquote」＝引用・転載文を書くためのものです。
「ol」＝番号付きのリストを書くためのものです。
「ul」＝番号の付いていないリストを書くためのものです。
「li」＝リスト内の項目を書くためのものです。
「dl」＝定義リストを書くためのものです。「dt」「dd」タグとセットにして用います。
「dt」＝定義リスト内でリスト項目の説明を書くためのものです。
「dd」＝定義リスト内でリスト項目の内容を書くためのものです。
「figure」＝文書の本体から参照されるようなイラスト・図・写真・ソースコードなどを書くためのものです。
「figcaption」＝写真などのキャプションを書くためのものです。
「div」＝このタグで囲まれた部分が一まとまりになって扱われます。たとえば、スタイルの適用時など。
「center」＝文章などを表示領域の中央に固めて配置するためのものです。
「menu」＝文書内にポップアップメニュー(＝コンテキストメニュー)を設けます。
「details」＝閲覧者が操作可能な開閉式のウィジェットを設けます。
「summary」＝開閉式のウィジェット内の項目の説明・要約を書くためのものです。
「a」＝文書から別の文書を参照するためのリンク(＝関連付けのための情報)を埋め込みます。
「em」＝文字を強調します。文字が斜体になります。
「strong」＝より文字を強調します。
「s」＝打消し線を引くためのものです。
「cite」＝出典・参照先の作品名を書くためのものです。
「q」＝語句単位の引用・転載を書くためのものです。
「dfn」＝文書中の用語を定義するためのものです。
「abbr」
「time」
「code」
「var」
「samp」
「kbd」
「span」
「ins」
「del」
「small」
「b」
「sub」
「sup」
「ｉ」
「u」
「mark」
「ruby」＝文字にルビをつけます。
「rt」
「rp」
「bdi」
「bdo」
「rb」
「br」
「wbr」
「img」＝文書に画像を埋め込みます。
「iframe」＝文書内にフレームを設けます。
「embed」
「object」
「param」
「video」＝文書に動画を埋め込みます。
「audio」＝文書に音声を埋め込みます。
「source」
「track」
「map」
「area」
「canvas」＝プログラムが画像を描画するための領域を設けます。
「applet」＝Javaアプレットを埋め込みます。
「table」＝行と列からなるテーブルを設けます。
「tbody」
「td」
「th」
「thead」
「tr」
「tfoot」
「caption」
「col」
「colgroup」
「form」＝フォーム(＝一まとまりの情報を扱うためのある種の形式、サーヴァーへ送信するための情報を入力するためのもの)を設けます。
「legend」
「label」
「input」
「button」
「select」
「option」
「optgroup」
「datalist」
「textarea」＝テキストを表示するための領域を設けます。
「keygen」
「output」
「progress」
「meter」
「fieldset」
「script」＝JavaScriptのコードを書くためのものです。
「noscript」＝JavaScriptが動作しないブラウザー(または動作しないように設定されている環境)のユーザーのために、代わりに表示させる内容を指定するためのものです。
※一部に誤りがあるかもしれません・・・ご容赦ください(笑)。
終わりに(後書き)
いかがでしたでしょうか？。
また、気が向いたら書き足していこうと思います。
それではまた～。