HTML5の勉強を始めたけどどこからやればよいのかわからない。
それなら1から順番にやっていくしかない！
自分の言葉でまとめることで勉強になるのではないかなという忘備録。
細かい単語もそういえば知らない…となったりしては調べたりしているので、すごく寄り道が多いです。
HTML5には2種類の文法があると聞きましたが
1.MIMEタイプ「text/html」で配信するHTML構文（通常のHTML構文）
2.MIMEタイプ「text/xhtml+xml」で配信するXHTML構文（XMLの仕様に従う）
HTML5はHTMLとXHTML用に2種類の文法があることはわかりました。
そこで。
そもそも、HTMLとXHTMLって何が違うんだ？という壁にぶつかりました。
HTMLのなりたち
Hyper Text Markup Language
Hyper Text Markup Language (HTML)
この頭文字をとって、「HTML」なんですね。
「ハイパーテキスト」とは、リンク機能の含まれた文書のこと。
もともとは研究の情報やデータ閲覧のために生まれた言語
Standard Generalized Markup Language (SGML)
「HTML」の前身は「SGML」というマニュアル文章を閲覧・長期保管しやすくするためのマークアップ言語だったそうです。
そこにハイパーテキスト・リンクの要素が加わったのが「HTML」になっていきました。
HTMLとSGMLの関係についてはこちらでも。
そもそもどうしてHTMLに装飾書いたらダメなの？～webの歴史を添えて～
HTMLとXHTMLってなんだ
ようやく本題に戻ってきました。
HTMLはわかったけど、なんだそのXは！
かっこいいから付けちゃったのか！
XMLという存在
eXtensible Markup Language
1998年2月にW3Cで勧告が出された言語、XML。
HTMLは文書を保管・閲覧するための言語でしたが、XMLはデータを保管するための言語。
XMLはデータとレイアウト・デザインを完全に分離し、データ保管のためだけの言語として発展しました。
HTMLは使用できるタグが決められているのに対し、XMLはタグを独自で設定できる拡張性に富んでいます。
どっちもやってやるぜXHTML
そこで双方の良いところ取りをした言語……
The Extensible Hyper Text Markup Language
XHTMLが生まれました。
構文的にはXMLに完全適合しながら、XMLの最大の特徴独自タグが使えることに加え、既存のHTMLタグの双方が使えるのがXHTML。
記述するうえでHTMLと異なるのは、エレメントや属性名に小文字を使う必要があります。
しかし、XHTML WG(XHTMLを開発していた機関)は2009年末に活動終了を発表しました。
XHTML2.0が事実上開発終了になりました。
ですがXHTMLが無くなったわけではありません。
そしてHTML5と交わる道
HTML5はXMLとして扱うことも可能。
これが、HTML5が2種類の文法があるところへ繋がります。
HTML5では、セクションという概念が追加されました。
セクションを表すための専用要素 section、article、aside、navの4要素です。
セクション以外にも、構造を示す要素としてheader、footer、main、その他にfigure、template、canvasなども追加されました。
HTML4.01以前までは、見出しや段落をdiv要素にclassやid属性を付加することでグループ化していました。
そしてHTML5では、より文書構造の役割に応じた要素が追加されました。
今まで<div id="header">とか<div class="entry">とか書いていたのが全て要素で書けるようになったわけです。
コードもシンプルになる上、ブラウザや検索エンジンに対してより正確に文書構造を伝えられるようになったのです。
所感とか
個人的な感想として、文書を保管するためのHTMLにデータを保管するためのXML(XHTML)的な要素が加わってきたのかな？と感じました。
文書構造にさらにデータ情報を付与し、マシンリーダブルに適しようとしているのかなーという印象です。
見た目だけではなく、アクセシビリティの面の強化が大きく感じられました。
あとは正直なところXMLとHTMLのメリットデメリットを上手く説明出来ないのがしっかりと理解ができていない感じがしますね…言葉にするのは難しい…
HTMLは文書構造を保管するための言語。
XMLはデータ構造を保管するための言語。
という感じであっているのかなぁ……
参考サイト
「HTML 4.01」と「XHTML 1.0」と「HTML5」の違いまとめ
http://www.cybertech.co.jp/xml/contents/xmlxmldb/serial/_xmlbeginner5.php
http://www.sejuku.net/blog/6093
https://techblog.yahoo.co.jp/html5/html5/