改めて、HTML5 ってなんだを考える。(part1) #HTML

はじめに

こんにちは、monpy です。
弊社では最近フロントエンド要因が増えまして、その中には当然のようにマークアップを行う業務があります。

私が HTML を書くようになったのは HTML4 とか xhtml とかが主流で、ようやく HTML5 が勧告されそうな時期でした。
HTML5が正式に採用される運びとなってしばらく経ちますが、それまでの間は IE8など旧ブラウザでは HTML5タグ を認識せずに polyfill 入れたりしていた時代もあったりして HTML5 で提供されている機能を当たり前のように書くのが個人的には抵抗があったんですね。
ただ、昨今の IE 系のデフォルトが IE10 ~ みたいな認識が増えた今、改めて HTML5 を理解して書けないとやばいなー。と思ったわけです。

この記事は僕が所属する会社のフロントエンド勉強会(私が主催。というか無理矢理。)で学んだこと・思ったことの忘備録です

参照元

この勉強会では、MDN を参考にしながら進んでいきます。

HTML 概論

参照ページ

MDN | HTML 概論

要約

HTML の沿革

HTML は 1980 年代後半に Tim Berners-Lee が考案

意外と新しい印象
CERN というワードにシュタゲ民歓喜

HTML とは？

HTML はマークアップ言語

知ってる
HyperText Markup Language（ハイパーテキストマークアップランゲージ）

HTML は、コンテンツの種類を識別するために、あらかじめ定義された要素セットを使用します。要素はコンテンツを含むまたは表す「タグ」を 1 つ以上含みます。

コンテンツ というのはいわゆる文章のことかな？

いくつかの要素は他の要素を含みません。例えば、画像タグ「<img>」は単純に、コンテンツ（画像）のファイル名を属性として記述します。

知ってる

要素 - 基礎構築ブロック

HTML は要素のセットから成り立っています。要素はそのコンテンツにセマンティックな意味を定義します。要素はそのタグ自身を含め、 2 つの対応する要素のタグの間にあらゆるものを含みます。例えば、<p> 要素は段落を示し、<img> 要素は画像を示します。

セマンティックは 意味のある ということ、翻訳的には難しいところだけど、コンテンツをただのテキストデータではなく文書の意味付けるということかな

いくつかの要素は、「これは画像です」、「これは見出しです」、あるいは「これは順序付きリストです」といったようにとても明確な意味を持っています。その他は「これはページ上の節です」あるいは「これはテキストの一部です」のようにあまりはっきりしていません。さらにその他は、「これは表示されるべきではないページのための識別情報です」といった技術的な理由で使われます。それでも、何だかんだですべての HTML 要素はセマンティックな意義を持っています。

なんだかんだでという締めがワロタ。なんだかんだ使いどころと意図があるのだろう。

ほとんどの要素は他の要素を含むことがあり、階層構造を形成します。とてもシンプルで、しかし完全な Web ページに以下のようなものがあります。

<html>
  <body>

    <p>My dog ate all the guacamole.</p>

  </body>
</html>

ご覧のように、 <html> 要素は後続の文章を囲っており、 <body> 要素はページのコンテンツを囲っています。この構造はしばしば、幹（<html>）とその枝（この場合、<body> と <p> 要素）で木としてとらえられます。技術的には、この階層構造を DOM - Document Object Model と呼んでいます。

Javascript でDOM をいじるとよく言いますが、タグの塊の一部を書き換えたり、加えたりするということ。そんなに大したことではない。

属性

開始タグは、前述の例のように追加情報を持つことがあります。この情報のことを属性といいます。

お世話になっております。

いくつかの属性は 1 つの値のみを取り得ます。それらは論理型属性で、属性名のみ記述する、あるいは属性値を空にすることで短縮されることがあります。したがって、以下の3つの例はいずれも同じ意味です。

<input required="required">

<input required="">

<input required>

へー、空文字でも同じなんですね。

1 つの単語または数から成る属性値はそのとおり書かれても構いませんが、 2 つまたはそれ以上の文字列がある場合は直ちに、値は引用符の中に書かれなければなりません。単引用符（'）と二重引用符（"）の両方が許されています。

つまり値が一つなら class=hoge が許されるんですね(しないけど)。

名前指定文字参照

名前指定文字参照（しばしば、何気なく実体と呼ばれます）は、 HTML の中で特別な意味を持つ文字を出力するために使われます。例えば、 HTML は小なり記号と大なり記号をタグの区切り子として解釈します。もし大なり記号をテキストの中で表示したいとき、名前指定文字参照を使うことができます。以下に、知っておかなければならない 4 つの名前指定文字参照を示します。

&gt; 大なり記号を意味する （>）
&lt; 小なり記号を意味する （<）
&amp; アンパサンドを意味する （&）
&quot; 二重引用符を意味する （"）

知っておかねばならないのか。。。

文書型とコメント

タグやテキストコンテンツ、実体に加えて、 HTML 文書は最初の行に文書型宣言を含まなければなりません。最新の HTML ではこのような文書型宣言が書かれます。

<!DOCTYPE html>

知ってる

文書型については長く複雑な歴史がありますが、今、皆が知る必要があるのは、 W3C 標準による HTML と CSS のコードを解釈することや、 1990 年代からの Internet Explorer のふりをしないようにすることを、この文書型がブラウザに指示するということです。

ここの複雑な歴史を知りたいなぁ

振り返りと次回

ここら辺は、マークアップをしてる人なら、特に問題ないかなぁ、、、っていう内容ですね。
次は MDN | HTML 要素リファレンスについてまとめます。