hajipion.com

UI/UX designer blog & creative portfolio

2014年の正式勧告前に!HTML5の基礎ルールをおさらい

html5のルール

HTML5の基礎ルール

2012年に仕様が策定され、今年2014年中には正式勧告される予定のHTML5。

まだ正式に勧告されてないとはいってももはやHTML5はWeb業界でコーディングするにあたって標準となっています。

そこで、もうそろそろなされる正式勧告の前に、HTML5のルールをおさらいしておきましょう!

とっても省略できる!

HTML4.01からの変更点としてまず言えるのは、コードの大部分が省略できること。

ムダで冗長な宣言や、わかりきった属性など、色々と省略できることが増えたのでひとつずつ見ていきましょう。

doctype宣言

html4のdoctype

doctype宣言は、どの文書型定義に従って記述しているかを示すものですが、この長ったらしいものはHTML4のdoctype宣言の一例です。

未だに多くのサイトがこのままになっています。

長ったらしいですね〜

これをHTML5ではこう書きます。

html5のdoctype

すっきりしました!

htmlタグ

htmlタグは、たとえばxhtml形式だと、

xhtmlのhtml

このように書かなければなりませんでしたが、HTML5では、

html5のhtml

こうです。ドシンプル!(笑)

metaタグ

metaタグでタグで文字コードを指定するときに、今までは結構長い文を書いていたことでしょう。

前までのmeta

いつも大抵いじるのはutf-8の部分だけです( ̄▽ ̄)

なので↓のように省略して書けることになりました。

HTML5のmeta

「省略してかける」と記述しましたが、むしろこれがHTML5のルールなので、省略しなければならない、と言ったほうが適切かもしれません。

まとめるとこんな感じですね!

html5だとこんなにシンプルに!

Simple is very Good!

僕はこの違いを見ただけでもHTML5が好きになりました。

<style> <script>のtype属性

CSSファイルを読み込むために<link>type=”text/css”と属性を追加したり、htmlファイルに<style><script>を直書きしたりした経験が誰しもあると思いますが、このtype属性はHTML5では書かないでよいことになりました!

html5はtype属性いらない

「<style>は大抵type=”text/css”だし、<script>はどうせtype=”text/javascript”でしょ? だったらそこは自動でこっちでやったげるよ。」というHTML5さんの優しさが垣間見えます。

終了タグも省略できる!?

なんと、HTML5では、<p>タグや<li>タグの終了タグ(</p>、</li>)を書かなくていいことになっています。

終了タグが省略できる

これは今のところ風潮としては「つけても省略してもどちらでもいい」という感じですが、個人的にはつけたほうがパッと見で分かりやすいので必ずつけるようにしてます。

ただし、Googleのガイドラインによれば、省略することを推奨されていますね〜

» Google HTML/CSS Style Guide

たしかにインデントを正しく使えば、省略した方が見やすいという人もいるかもしれません。お好きな方を!

なお、終了タグを省略できる要素は以下のとおり。

終了タグが省略できるタグ一覧

img要素について

alt属性

HTML5であっても、その画像が何を表すのかを記述する<img>タグのalt属性は、省略することができません。

では↓のような装飾用の画像はどうでしょう?

装飾用の画像

実はこのような意味のない(デザイン用の)画像においても、alt属性を省略することは認められていないのです。

装飾用の画像であってもalt属性は↓のように空文字で付属させます。

装飾用の素材でもalt属性はつけなきゃダメ

末尾の「/」について

空要素と呼ばれる<img>タグや<hr>タグのような「それ単体で完結しているため終了タグがいらないタグ」では、XHTMLの記述ルールでは「/」を最後につけることになっていました。

今までは末尾に「/」をつけていた

しかし、HTML5では基本的にHTML4.01のルールにのっとり、「/」をつけない方針で規則が定められています。

なくなった

ただし、寛容なHTML5では特に「つけてはならない」という約束も「どちらかに統一しなければならない」という規則もありませんので、既存のタグを修正する必要はないように思います。

以上がHTML5の超基本的なルールになります。

次の記事ではHTML5で新しく追加されたタグや、逆に廃止されたタグなどについて見ていきたいと思いますので、乞うご期待!

HTML5を学ぶのにオススメな本

前にCSS3をステップアップするのにオススメな本を載っけましたが、基礎からHTML5を学ぶのにもこの本はオススメ。

初心者向けのHTML5といった感じです。

まだ自分の作るコードがHTML5に移行していると思えない方はぜーひ( ̄▽ ̄)