HTML5について

ここ最近WEBでは変革がおきています。HTML5の登場です。このHTML5はHTML4.01以降十数年ぶりに新しく登場するHTMLです。そのため、今までXHTMLを使っていた人もHTML5を使ったりするようになって行くと思います。ただ、HTML5はまだ正式にリリースされているものではないです。そんな中僕が思っている事を少々書いて行きたいと思います。

HTML5はプログラマ向け言語?

最近HTML5でプログラムを作ったとか、ゲームを作ったというサイトを見ます。それを見て多くの人はHTML5はプログラム言語なのかなと言う人がいます。HTMLを理解していないDTPあがりのデザイナーもそういう人がいます。ソースを見ないで判断している人もいます。

本当にそう思うのですか?HTML5になっても、HTMLの基本概念は変わりません。そもそもHTML5ではプログラムの要素なんか追加されてないです。プログラマ向け言語とか言っている人はソースを見てない人がおおいです。その多くのサイトは全てJSが入っています。そのサイトの多くはJSによって作られています。音楽をいれたりビデオを入れるとこでHTML5の要素が使われていてとても使う事はあります。そういうとこだけしか使っていないのでプログラマ向け言語ではないです。

WEBデザイナーがより文章構造しやすい言語

そもそも、HTML5は新しい要素が加わり、より文章構造を意識しやすい言語になっています。プログラマ向けというよりもむしろWEBデザイナー向けの言語です。XHTMLやHTML4.01よりも面倒な事になっていたら使いたいと思う人はいないでしょう。

新しく追加されたタグ

新しく追加されたタグを少し書いて行きたいと思います

header 見出し要素に使われるヘッダーというタグです。本文の中に何回も出てきても良いタグです。
<header>
<h1>見出し1</h1>
</header>
hgroup 小見出し、キャッチフレーズとか、見出し、副題のように見出し要素が複数からなるときに使います。

<hgroup>
<h2>小見出し</h2>
<h3>キャッチフレーズ</h3>
</hgroup>

footer そのセクションに関する情報を記述します。誰が書いた等の情報から関連ドキュメントへのリンク等です。
<footer>
&copy: 2011
</footer>
article 独立した記事で使うタグ 主にブログやニュース系サイトで使用。それ以外のサイトでは殆ど使われない
<article>
<header>
ここに見出しがはいります。
</header>
<p>本文がはいります。</p>
<footer>
コメント
</footer>
</article>
内容が分かれる場合は本文の中にsection要素をいれてもいいですね。見出し毎にsectionを分ける等

section 一般的なセクションやドキュメントをここに書いていきます。ブログ・ニュース系サイト以外はこの要素をメインに使われると思います。
<article>
<section>
<h1>小見出し</h1>
<p>本文が入ります</p>
</section>
</article>

<article>
<hgroup>
<h1>大見出し</h1>
<h2>キャッチフレーズ</h2>
</hgroup>
<section>
<h1>小見出し</h1>
<p>本文が入ります</p>
</section>

<section>
<h1>見出し</h1>
<ul>
<li>箇条書き</li>
<li>箇条書き</li>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>
</section>
</article>

他にもnav要素やオーディオ・ビデオ要素等が追加されていますが省略してます。

考え方が変わっているHTML5

HTML5では、今までと違って変更になっているのに考え方があります。XHTMLではブロック要素、インライン要素というのがあり分かれていました。しかし、HTML5からはこの考え方は無くなりました。HTML5ではブロック要素、インライン要素というような考え方ではなく、コンテンツ・モデルという考え方になっています。コンテンツモデルにはメタデータ・コンテンツ、フローコンテンツといったような考え方になっています。

備考

今回の記事では、特にHTML5を詳しくとか従来と変わって点をあげているわけではないです。そのため詳しく書いたりもしてないです。まだまだ僕も勉強中なので、間違っている箇所はご指摘していただければ幸いです。

ここでは今までとは違うんだなとか、そういうのがわかっていただければ充分だと思っています。コンテンツ・モデルや要素については別で紹介して行きたいと思っています。

個人支援・寄付について

サイトラボでは個人支援・寄付を受けております。ご協力いただける方はお願いいたします。当サイトではビットコインで受け付けております。

  • ビットコイン:3LHnADwZwUbic2L45EnVJEykiG6KfbqrwS