Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

ホームページ制作に役立つ情報を東京・池袋のWebクリエイターが配信!
  1. ホーム > 
  2. html5 > 
  3. 2014年に正式勧告予定のHTML5!これからのHTML5とコーディングのルールおさらい

2014年に正式勧告予定のHTML5!これからのHTML5とコーディングのルールおさらい

  • 2014.07.19(Sat)
  • html5

HTML5は2008年からスタートして、ブラウザが各種実装していきました。
特にスマートフォンのサイト制作では必須になっていますよね。
でも、実はまだ「草案」、つまりまだ仕様を確定していない原案の状態なのは知っていましたか?
まだ確定していないものを使っているというのはすごく不思議ですよね。

HTML5は2014年に正式勧告予定

実は、今年(2014年)に正式勧告予定です。
この正式勧告が行われると、その時点で世界的な標準化が完了することになります。
ここから先の機能追加はHTML5.1以降のバージョンとして扱われる予定です。

実は2月にも仕様が変更されています

HTML5はまだ草案の状態だけに、仕様がまだ確定していません。
2月にも草案が更新されており、大きいところでいうと、templateという要素が追加になっていますね。

XHTMLからHTML5への変更点

個人的にはHTML4.01やXHTMLとくらべ、タグがすっきりしているのがHTML5の印象です。
特別なことをしないのであれば、書かなくても良いよというものが多いですね。

内容を省略できるタグ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
↓↓↓↓↓
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
↓↓↓↓↓
<html lang="ja">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
↓↓↓↓↓
<meta charset="urf-8">
<script src="*****.js" type="text/javascript"></script>
↓↓↓↓↓
<script src="*****.js"></script>
<style type="text/css"></style>
↓↓↓↓↓
<style></style>

終了タグを省略できるタグ

また、いくつかのタグは終了タグを省略しても良いことになっています。
終了タグを省略して良いのは以下のとおりとなっています。

li, dt, dd, p, tr, td, th,rt, rp, optgroup, option, thread, tfoot

例えばliだと以下のような感じですね。

<ul>
<li>テスト1</li>
<li>テスト2</li>
</ul>
↓↓↓↓↓
<ul>
<li>テスト1
<li>テスト2
</ul>

記述自体を省略しても良いタグ

最初にを書いて、を書いて・・・というのが慣れてしまっていますが、実はHTML5はこのような部分自体、書かなくても良いとされています。
記述しなくても良いタグは以下のとおりです。

html, head, body, tbody, colgroup

例えば、以下のようなXHTMLをHTML5で書き直すとこうなります。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>タイトル</title>
</head>
<body>
<p>テキストテキストテキスト</p>
</body>
</html>
↓↓↓↓↓
<meta charset="urf-8">
<title>タイトルです。</title>
<p>本文です。

びっくりするくらいシンプルになりますね!

終了タグが必要のないタグ(末尾の「/」含む)

<img>タグや<hr>タグのような終了タグが必要ないタグは、XHTMLでは「<br />」や「<hr />」と記述していました。
しかし、HTML5では「/」は特に必要なくなっています。
終了タグが必要のないタグは以下のとおりです。

br, img, hr, meta, input, embed, area, base, col, keygen, link, param, source

使用例としては以下のとおりです。

<img src="test.jpg" alt="" />
<hr />
<input type="submit" value="送信する" />
↓↓↓↓↓
<img src="test.jpg" alt="">
<hr>
<input type="submit" value="送信する">

新しく追加されるタグ

新しく追加されるタグは便利なものが多いので、クロスブラウザでの問題(大体IEですが…)さえ解決すれば、とても役立ちそうですね。
追加されるタグは以下のとおりです。

article, aside, audio, bdi, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, template, time, track, video, wbr

廃止されるタグ

HTML5からは非推奨とされるタグもあります。
ブラウザはXHTMLやHTML4.01等も対応しているので、表示はできるかと思いますが、仕様上は正しくない書き方となります。

acronym, applet, sefont, big, center, dir, font, frame, frameset, isindex, noframes, s, strike, tt, u

最後に

まだまだ正式勧告前なので、仕様が変わる可能性はありますが、現時点は上記のような感じです。
あなたは全部知っていましたか?
PCサイトではまだまだXHTMLがメインとなっていますが、2014年の正式勧告を境に、そろそろHTML5にシフトしていくころなのかと思っていますので、しっかりと覚えて置きましょう! HTML5の詳しい書き方等はまた後日書きたいと思っています。


ページの先頭へ