HTML5と従来のHTML、何が違う？文法で知っておくべき6つのポイント

2017年5月 7日

今、HTML5を使用したWebサイト制作のニーズが高まっています。また、HTML5はWebサイト制作にとどまらず、ブラウザを搭載した家電などIoT(Internet of Things)の分野での活用も期待されています。
Web・IT業界への就職・転職をお考えの方は、様々な場で活用できるHTML5のスキルをつけて、転職を有利にしましょう。今回は、HTMLをすでに勉強したことがある方向けに、HTML5を学ぶ上で知っておくべき6つの重要ポイントをご紹介します。

マークアップする前の指定方法

DOCTYPE宣言

HTML4.01では、HTMLの先頭に記述するDOCTYPE宣言は長いものでしたが、HTML5の場合は以下のように簡潔になりました。

<!DOCTYPE html>

DOCTYPE宣言において、大文字・小文字は区別されません。ファイルの先頭にこの宣言があることで、ブラウザはレンダリングモードをHTML5対応に切り替えます。

文字エンコーディングの指定方法

従来は以下のようなmetaタグを使用して指定していました。

この方法はHTML5でも引き続き有効ですが、このmetaタグに追加された「charset」属性を用いての指も可能になりました。

記述がずっとシンプルになりましたよね。

タグの記述の省略について

タグによる記述を省略できる要素

html、head、body、colgroup、tbody

これらの要素については、タグ自体を省略しても問題なく表示されるようになりました。もっとも、これらを省略しても要素はこれまで通りに存在します。たとえばbodyタグを省略しても、DOMツリー上には存在します。

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

li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th

これらのタグに関しては、終了タグを使って閉じる必要はありません。

終了タグを書いてはいけない要素

area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr

brタグを使って記述例をご紹介します。終了タグを書かないというのは、「<br>」という書き方、もしくは「<br />」というように空要素タグで記述するべきタグです。そのため、「<br><br />」という書き方は誤りですので気を付けましょう。

属性の引用符の省略

HTML5では、属性値の中に「<」「>」「'」「"」「`」「=」、あるいは空白を含まなければ、属性の引用符を省略できるようになりました。

<input type="text" />
<input type='text' />
<input type=text />

上記の書き方がいずれも許容となります。

廃止された要素について

HTML5では廃止された要素もあります。CSSで扱うべきと判断されたり、他の要素でよりよい処理が可能だったり、あるいはユーザビリティの視点から廃止されたというものもあります。
廃止された要素の多くは現在あまり使われていませんが、HTML5で記述する際は念のため、廃止タグを利用していないか確認しましょう。

廃止された要素

basefont、big、center、font、strike、tt、frame、frameset、noframes、acronym、applet、isindex、dir

HTML5で変更された要素

a、address、b、cite、hr、i、s、small、strong、u

以上の要素は以前から存在したもので引き続き使えますが、意味が変わりました。使用の際はHTML5での意味内容に沿うように記述しましょう。

アウトラインにより文章の意味を明確に

HTM5では、文章のアウトライン（階層構造）を意識することが重要になります。
新聞や本などを読む際は、人間はまず大見出しで題名を認識し、小見出しで各章のタイトルを認識します。人間は文字の大きさ、スペースなどで見出しと文章のかたまりを判別し、アウトラインをつかむことができますが、機械には判別ができませんでした。

そのため、HTM5では数多くの意味的要素（セマンティック要素）が追加されています。これにより、階層構造が検索エンジンなどの機械にも理解できるようになりました。

今後は「section要素」と「article要素」などにより、階層構造を明確化した記述をする事が求められます。

まとめ

いかがでしたか？　これまでのHTMLやXHTMLを勉強されている方の場合、変更点や廃止点などに今一度目を通されてから、実際にコーディングをするとスムーズに理解をしやすいのではないでしょうか。

インターネット・アカデミーでは、「ホームページ制作講座」や「W3C公式HTML5講座」でHTML5について学ぶことができます。インターネット・アカデミーは、教育業界唯一のW3Cメンバーであり、かつHTML5の技術開発を行っているW3Cの公式講座もご用意しているため、HTML5について正確かつ最新の内容を学ぶことができます。HTMLについての基礎知識がある方も、HTML5の知識を学ぶことでさらに柔軟性と表現力の高いWebサイト制作ができるようになるため、ぜひお気軽にお問合せください。