この資料を作ったときに在籍していた企業では、原則HTML5を使用していませんでした。
しかし、今後使用していくことになるかもしれないということで、現状と今後の動向を踏まえて、メモしたものです。
html5は割と最近W3Cから勧告されたマークアップ言語です。
HTML4やXHTMLより、HTML文書の構造や機能を明確に指定する要素を追加したり、あいまいな要素を廃止または明確な意味にしたり刷新したりしています。
2016年にはHTML 5.1が勧告される予定だとか・・・orz
より詳しい説明は、以下のリンクを参照してください。
書籍なども最近はたくさん出版されていますし、ネットには上記のほかにいろいろ情報が落ちています。google先生に訊いてみましょう。
大きな特徴といえば、Doctypeの書き方がものすごく簡単になったことです。
<!DOCTYPE html>
これだけ!
他にも、XHTMLではbrタグなど空要素に /(半角スペース+スラッシュ)を付けなければなりません(逆にHTML4ではつけてはなりません)が、HTML5ではつけても付けなくても良いとか、いろいろうれしい変更があります。
でも、ソースの見易さとかいろいろあるので、実際記述するときはどちらかに統一して記述したほうが良いでしょう。
記述の仕方に社内ルールがあれば、それに従ってください。
以下に、簡単なテンプレートを掲載します。
colissに紹介されていたものをさらにシンプルにしました。
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8"> <title></title> <meta name="description" content=""> <meta name="keyword" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> <script src="" async></script> <link rel="shortcut icon" href=""> </head> <body> <!--ここにコンテンツ--> <script src=""></script> </body> </html>
async属性について
async属性もHTML5から導入された属性です。
通常、htmlのソースは記述の上から実行していきます。なので、headタグ内にscriptタグがある場合、レンダリングをストップして、外部ファイルの読み込みを行います。
そのため、htmlの見た目部分の表示に時間がかかってしまいます。
というわけで、scriptタグはbodyの終了タグ直前に記述するのが望ましいのですが、実際はそうもいかないので、レンダリングに関するスクリプトなどheadタグなどに記述せざるを得ない場合は文書の読み込み中に、そのスクリプトが利用可能になった時点で実行するasync属性を明記しましょうということです(コンテンツが読み込まれる前にjsファイルを実行しておく必要がある場合は、async属性を付けません)。
html5shiv.jsについて
元記事のcolissの方では条件付きコメントでhtml5shiv.jsを読み込んでいますが、あまりお勧めしません。
まず、条件付きコメントは最新のIEではサポートしていません(10以降ではサポートしなくなったらしい)。
そもそも、IE独自仕様なので使うべきではないのですが、バージョンごとのファイルの管理が煩雑なるなどの問題もあるわけで、良い方法とは言えないのです。
また、html5shiv.jsはIE8以下のブラウザにもHTML5のタグを認識させるものなのですが、べつにHTML5の機能をIE8以前のブラウザでも使えるようにするという代物ではないです。
HTML5を使う時点でIE8以前は切り捨てるべきですし、たとえばsectionタグのように機能ではなくHTML5のドキュメントアウトライン(文書構造の役割を持たせているというか、文書の階層構造)の要素にcssを設定しなければ、IE8以下での表示には問題ないはずです。
ドキュメントアウトライン以外でも、そもそもIE8以前で機能しないHTML5独自タグに表示上重要なcssを設定しなければ、表示上の問題は回避できます。
HTML5では、タグ(要素)や属性により明確な目的を持たせ、構造的な意味を厳格にしています。
たとえば、smallタグは単に文字を小さくするタグでしたが、HTML5では免責条項・著作権表記・警告などの細目テキストを記述する役目を持ちます。ページフッターなどで記述する著作権表記などに使います。
新しいタグとしてはsectionタグのようなドキュメントアウトラインの役目を持つタグや音声や動画を扱うタグなどがあります。
もちろん、廃止されたタグもあります。
タグの持つ意味を無視して記述したところで、(必ずしも)表示がおかしくなるわけではありませんが、webページのデータとしての意味や機能が半減してしまうので、使用する際はやはりタグや属性の意味に則った形で記述することが望ましいです。
別途記述しますが、とくにドキュメントアウトライン(文書構造)の役目を持つタグについては、勘違いしたまま扱ってしまいがちです。
使用の際は、注意して使いましょう。
全てのタグについて説明するのは困難なので、参考になるサイトを列挙しましたが、これら以外にもいろいろあります。google先生に訊いてみてください。
また、これらのサイトやgoogle先生が提供してくれる情報が必ずしも正確な情報ではないということについては、理解しておいてください。
これらの記事が記述された時期によっては、個人が正確な情報を得るのが困難だったり(その後状況が変わって仕様変更されたり)、日本語訳が誤っていたり、内容を勘違いして記述されたりしている場合もあります。
私も勘違いしてたり、全く見当違いな理解をしていたり、誤解を生む言い回しをして記事を書いているかも・・・(人間だもの。ごめんなさい。)
必ず複数のサイトで調べて、情報の信頼性・正確性を確認するようにしてください。
HTML5勧告前に追加予定(変更予定)だった要素が勧告後廃止になったもの(hgroupなど)や逆に復活したものなどもあるので注意です。2016年に勧告予定のHTML 5.1になると、このへんの事情がまた変わってくるかもしれません。
html5のタグをひとつひとつ確認していくのは退屈だと思うので、むしろ間違いやすいものから把握していく方が良いかもしれません。
HTML5(+CSS3)はマークアップがシンプルになったり、動画などが扱えたり、良い面がたくさんあります。
でも、残念ながら、現在普及しているwebブラウザすべてが(すべての機能に)対応しているわけではないです。
最新バージョンなら対応しているブラウザでも、古いものからバージョンアップしていないユーザは結構います。
スマートフォンなどのスマートデバイスでも、OSやブラウザ(およびそれらのバージョン)の組み合わせによって、表示や動作にばらつきがあるのが現状です。
そういった現状を理解したうえで、HTML5やCSS3を適度に利用して、たまには妥協して、折り合いをつけてコーディングしていってください。
とりあえずは、HTML4やXHTMLのつもりでHTML5を組んでも表示的に極端におかしくなることはないので、まずは持てる知識で組んでみて、あとからタグの使い方を間違えていないかチェックしてみるというように実践でおぼえていっても問題ないと思います。
また、2015/07/29リリース予定のwindow10から、マイクロソフトの標準ブラウザはIEではなくMicrosoft Edge(Project Spartan)に変更されるようです。
しかも互換性維持のためにIE11も搭載されるとの噂。
どのみち、すべてのwindowsユーザが一斉にwin10になるわけはないので、あらたにwebページの動作・表示のクオリティをある程度確保しなければならないブラウザが増えることになります。
CSS3にしても、デザインを1ピクセル単位で厳密に再現しろというクライアントやどのブラウザでも全く同じ表示にしろというクライアントでなければ、たとえば、状況によってIE7や8で角丸(border-radius)が表示できないけど、そこはそんなに重要ではないから、良しとする・・・というようにしても良いのではないでしょうか。
もちろん、jqueryなどを駆使して、oldIEでは無理なものも表現できるようにしたり、いっそ画像にしたりすることもできます。
厳密にするところ、ブラウザ間で多少表示が違っても問題ないところ、メリハリをつけてコーディングしていくと良いでしょう。
ディレクターやデザイナー(コーディングするのが本人の場合もありますが)と相談しながら、工数・納期・公開後の管理などコスト面も意識しながら判断すると良いと思います。