はちど

ボードゲームのレビューなど。

*

HTML5がやってきた。ヤァヤァヤァ

      2013/04/01

Hachiです。
こないだの土日、急に両親が来たので(QRK)、塩尻のそば屋 しみずにいってきました。


一時期塩尻に居を構えていたとき、たまたま住まいがこのそば屋さんの隣のアパートでした。
十割そばにこだわったお店で、メニューは蕎麦と天ぷらのみ。佇まいは古民家という趣あるお店です。
両親が福島から来たことを告げると、蕎麦を1枚サービスして頂いて、有り難かったです。全部私が食べました。
# おなかいっぱいすぎて夜の居酒屋ではほとんど食べられなかったです。

閑話休題。
みなさんが目にしているWebページがHTMLという言語で書かれていることはご存知だと思います。
そして、その大きな改訂版であるHTML5が策定中であることも、少し知識のある方には周知の事実でしょう。
では、具体的にどう変わるのか、知っていますか?

改訂の主要目的のひとつとして人間にも読解可能でコンピューターやディバイス(ウェブブラウザ、構文解析器など)にも矛盾せず読解されるとともに最新のマルチメディアをサポートする言語に向上することである。HTML5ではHTML 4だけでなくXHTML1やDOM2HTML(特にJavaScript)も加える意向である。

[出典 HTML5 – Wikipedia]

上記引用部分の日本語の助詞が少し妙に見えますが、原文ママなのでご容赦ください。
要するに、

  • 人間が読んでわかる構造にする。
  • マルチメディアをサポートする。

ということに重きが置かれた改訂である、ということです。
本記事では、特に前者について触れてみたいと思います。

ところでこのソースコードを見てくれ。こいつをどう思う?


読み飛ばしてここまでいらした方。正常です。
すごく…読みづらいです…と言わんばかりのソースコードであります。
これが昔のソースコードでした、というと語弊がすごくありますが、WYSIWYGエディタでhtmlを作るとこんなソースをよく吐いてきました。
ソースコードなんかブラウザが読めれば良い、人の目に映るのはWebページでありソースコードではない、という思想がビッシビシ伝わってくる汚い良いソースコードですね。

では、これがHTML5でどう変わるのか。
こうなります。


どっちも変わらないですか?いくらかは見易くなっていると思います。

大きく変わった点を挙げると、上の例では複数のtableが入り組んでデザインを構成していた部分がばっさりとなくなって、headerやnavといったタグになりました。
このheaderやnavはHTML5から新たに導入されたセクションを表すタグです。
headerは文字通りヘッダ。Webページの冒頭部分、主にタイトルなどが入っている場所です。
navはナビゲーション。Webサイト内の各コンテンツへのリンク一覧を入れます。
それ以外にも、広くセクションを定義するsectionタグ、blogなどの記事を入れるarticleタグ、余談・補足情報のasideタグ、連絡先情報のaddressタグなどがあります。

これらのタグは、ブラウザの認識とすれば、ひとまとまりの何かでしかありません。
だからたとえば<div class=”header”>や<div class=”navi”>と書いても、HTMLタグとしての働きは同じです。
それをなぜわざわざ独自のタグを新たに準備したのかといえば、人の目で見てわかるということを重視した結果となるわけです。

そういえばtableによるデザインをばっさりカットしたわけですが、じゃあデザイン要素どこいった、となりますよね。
実は、デザイン要素は<link rel=”stylesheet” href=”./common.css” />の一行に全て含まれています。
HTML5では、デザイン要素は全てCSS(カスケードスタイルシート)にお任せすることになっています。
HTMLタグによるデザインは、余程で無い限り行いません。
この分業体制によって、構造的にクリーンなHTMLが維持されるわけです。

HTML5の使い方はとても簡単です。
HTMLの書き出しを<!DOCTYPE html>とすれば、そのHTMLはもうHTML5で書かれていることになります。
この1行目をドキュメントタイプ宣言と言います。
過去のHTML4.01やXHTML1.0では、長くて複雑でいくつか種類のあるDOCTYPEを使っていました。
複数種類があったのは、それがHTMLのルールにどれくらい沿っているかをあらかじめ宣言していたからでした。
しかし、HTML5ではそんなことを宣言する必要がなくなりました。
なぜなら、HTML5は過去のHTMLにおける記述のルールを全て許可しているからです。
なんて寛容な精神。
# 結局のところ、昔の記述方法を今でもずっと使い続けてる人がいるから、もう禁止にできない、って理由みたいです。

最後に。
最近、自分で作るWebサイトも、HTML5の書き方に準拠したものにするようにしています。
やはり、人が読んでわかるように書けるというのは、社内インフラ屋をやっている私にはすばらしいことです。
というのは、私の書いたHTMLを他の人が触る(メンテする)、ということが、往々にしてあるからです。
慣れてない人でも、headerやnavなどのセクションで分かれていれば、どこを触ればどうなるというのが、わかりやすいはずです。
CSSのデザインは完全に別ファイルなので、tableのごちゃごちゃしたデザイン要素に惑わされることもありません。
ただ、デザインに関わることについては、私に言ってね、としか言えないのがもどかしいですが。

sns-widget

更新情報の確認にはこちら!

 - Web技術