HTMLを深く理解する-仕様や歴史、ルールについて
HTMLとは何なのか、どのようや歴史があるのか、守るべき仕様は何か、などを全て答えられますか？
今回は、HTMLの上級者になるための基礎を解説していきます。
本記事を読むことで、HTMLへの理解を一段階上げられるはずです。
ぜひ、最後まで読んで参考にしてください。
HTMLとは
そもそもHTMLとは何でしょうか？
HTMLはHyper Text Markup Languageの略になります。
つまり、「ハイパーテキストをマークアップするための言語」ということです。
ハイパーテキストとは、「Web上のテキスト」という認識で大丈夫です。
そして、マークアップとは「印をつける」という意味になります。
要はHTMLとは、「Web上の文章に印をつけるための言語」ということになります。
「別に印をつける必要なんて無くないか？」と思うかもですが、そんなことはないです。
印をつけることで機械が読み取れるようになるので、検索エンジンのクローラーがSEOの評価を正しく行えるようになります。
また、アクセシビリティ向上にも繋がります。
なので、HTMLは自然言語を機械に正しく認識させて、ユーザビリティを向上させるために必要なのです。
HTMLの仕様と歴史
HTMLは1991年に登場しました。
そこから年々HTMLが一般人にも使われるようになり、ブラウザの種類も増えてきたため、仕様を決める必要性が出来てきました。
なぜなら仕様が決まっていないと、ブラウザごとに独自のルールを作ってしまうことになるからです。
もしそうなってしまったら、検索エンジンなどは正しくHTMLを読み取れなくなるので、上手く動かなくなってしまいます。
そんな中、「IETF」という団体が、1995年にHTML2.0となる仕様を発表しました。
そして、仕様を管理する団体が「W3C」に移り、1997年にHTML3.0が発表されました。
その後、1998年にHTML4.0が発表されました。
2000年になると、静的コンテンツだけではなく、動的コンテンツも作られるようになってきました。
その影響もあり、HTMLにもさらに多くの機能を求める動きがありましたが、W3Cはその意見を却下してしまいました。
そんな中、Apple,Mozilla,Operaが共同で「WHATWG」という団体を立ち上げ、HTMLの新しい仕様を発表しました。
そしてW3Cも動くことになり、2つの団体共同で、HTML5.0を2014年に発表しました。
けれど、WHATWGとW3Cは意見の食い違いで、それぞれ別々の道を歩むことになりました。
その結果、WHATWGとW3Cそれぞれの仕様を作っていくので、ブラウザベンダーなどはどちらを参考にしたら良いか分からない状況となっていました。
その状況は良くないと判断したため、2021年にHTMLの仕様はWHATWGのみとなり、他の仕様は廃止されることとなりました。
なので、現在はWHATWGの仕様を参考にすれば良いわけです。
HTMLの基本的なルール
HTMLには、機械に正しく情報を読み取らせるために、いくつかのルールがあります。
それは、主に次の3つの種類に分けられます。
1.字句的ルール
これは、HTMLの基本的なルールになります。
要は、「HTMLを正しく動作させるためのルール」です。
具体例としては、次のようなものが挙げられます。
- 先頭にDOCTYPEの宣言を書く
- タグの入れ子構造を正しく書く
実際のコードで例えると、以下のようなコードは字句的ルールの間違いになります。
<h1>タイトル<span>サブタイトル</h1></span>
これは、HTMLの基本的な入れ子構造のルールに反しているので、NGです。
2.語彙的ルール
次が、語彙的ルールになります。
これは「仕様を守るためのルール」になります。
これを守らないと、機械が正しく構造を読み取れなくなります。
具体例としては、次のようなものが挙げられます。
- 入れ子にするときは許可されたものだけを使う
- 指定された属性名だけを使う
実際のコードで例えると、以下のようなコードは語彙的ルールの間違いになります。
<span>あああ<p>いいい</p></span>
「spanタグの中にpタグを入れてはいけない」というルールがあるので、これは語彙的ルールに反してることになります。
HTMLは、タグごとに入れ子構造として入れて良いものが定義されているので、それを守る必要があります。
3.意味論的ルール
最後が、意味論的ルールです。
これは、「機械が正しく意味を読み取れるようするためのルール」になります。
具体例としては、次のようなものが挙げられます。
- 正しい順序でタグを使う
- タグに正しい要素を入れる
実際のコードで例えると、以下のようなコードは意味論的ルールのエラーになります。
<p>ここがタイトルになります</p>
<h1>これは段落の文章になります</h1>
タグの要素として入れるべきものが間違っているので、意味論的ルールに反していることになります。
同じように、hrタグを装飾のためだけに使うなどもNGです。
まとめ
今回は、HTMLの基本的なことについて解説してきました。
最後に内容をまとめます。
HTMLとは
自然言語を機械に正しく認識させて、ユーザビリティを向上させるために必要
HTMLの仕様と歴史
現在はWHATWGが仕様を策定している
HTMLの基本的なルール
字句的ルール、語彙的ルール、意味論的ルールがある
以上にになります。
本記事を読んだことで、HTMLの理解が少し深まったかと思います。
次の記事では、HTMLの具体的なルールについて解説しようと思います。
宣伝
0からエンジニアになるためのノウハウをブログで発信しています。
また、YouTubeでの動画解説も始めました。 YouTubeのvideoIDが不正です
インスタの発信も細々とやっています。
興味がある方は、ぜひリンクをクリックして確認してみてください！
Discussion