Html5

はじめてのHTML5


ホームページ作成を行う上でこれから主流になっていくと思われるHTML5。 このサイトも一応「HTML5」と「CSS3」で構成されています。 実際に使ってみて、今までのHTMLとどう違うのか、どんな使い方が便利だったのか、などの点について説明してみたいと思います。

その1.これまでのHTMLとの違い。

結局のところHtml5やCSS3が今までのHTMLやXHTMLと何が違うのか?といわれると違いを感じた点は次の通りです。

「Dogtype」が変わりました。

HTMLを書く際に最初の数行でDogtype宣言と呼ばれるコードを書くのですが、いままではこれが何種類もあってかなり面倒な記述でした。 それがHTML5になって、とてもシンプルなものになりました。個人的にここはすごく気に入っている改変部分です。

HTML5
  1. !DOCTYPE html
  2. html lang="ja"
  3. head
XHTML
  1. !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
  2. html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"
  3. head

その他にもhead~headの中で記述で変わった点もいくつかあります(説明)。

「CSS3」で表現できる幅が実用的に広がりました。

見出し部分なんかの背景画像にグラデーションをかけたり、文字にシャドウをかけたり、Boxにもシャドウをかけたり。 これまではこれは全部画像で処理してきましたが、CSS3からは全部CSSで書くことができます。これが本当に便利です。

この部分ってコーディングする時にかなりの頻度で使う部分だと思います。実際にCSSで書くにも簡単にソースを吐き出してくれるジェネレーターがあるので難しくありません。 フォトショップで画像作成するより遥かにかんたんにグラデーションやシャドウの実装が出来るようになりました。

新しいタグの登場

いままではh1、h2、h3なんかの部分に注意してマーックアップしてきたと思いますが、それに加えてアーティクルやセクションなんかの タグを利用して文章構造を表現するようになりました。

ただ、大手企業サイトのソースを見てもアーティクルがなかったりセクションの使い方も本当にばらばらなので、 今後はわかりませんが、今のところ、この辺りはアバウトなのかなーと思って自分もまったく意識しないでいます。そのため当サイトでは「article」や「section」の記述はありません。

HTML5

head

meta

文章構造

article
section

CSS3

グラデーション

ドロップシャドウ