HTML5ことはじめ

2010-08-22 15:52 投稿

制作者側にはかなり普及してきた感もあるHTML5。
情報は溢れていますが、自身も少しづつ勉強してきたのでXHTML1.0との違いなどをメモがわりにアウトプットしてみました。
(マークアップメインの話です)

HTML5はW3Cより2008年1月22日に草案が発表され、2010年8月現在も草案の段階です。
勧告はW3Cが2012年3月、WHATWGは2022年としており、どちらにしてもまだ先ですが、新しいブラウザは段階的に対応していくと予想されるし、JSを使えばIEもカバーできるので、現状利用することも可能でしょう。
メリット・デメリットについては賛否両論?あるでしょうが…

※このサイト自体もHTML5で組んでいますが、HTML5、WordPressともに未熟なため、制御できず正しく組めていない箇所があります。
また下記内容についても間違っている可能性があるので、その場合は指摘していただけると助かります。

HTML5を利用するにあたって

2010年8月現在多くのブラウザはHTML5での新要素はデフォルトスタイルが用意されていないため、必要な要素には予めCSSでdisplay:blockを指定するのが一般的です。

article, aside, canvas, details, figcaption, figure, header,
footer, hgroup, menu, nav, section, summary {
	display: block;
}

指定する要素は必要に応じて調整が必要かもしれません。

Intenet Explorer8以下のHTML5対応

IEはHTMLの新要素に対して正しいDOMを構成しないので、JavaScriptのdocument.createElement()を利用して、要素を新たに作り出す必要があるようです。
IE8以下にはgoogleコードでそれを実現してくれるhtml5.jsを読み込んでおけばOKでしょうか。
※なんかごめんなさい、不要な部分を削除しました。(2010-08-23)

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

DOCTYPE

これまでのDOCTYPE宣言は長ったらしく暗記して書ける人も多くはなかったかもしれませんが、HTML5は物凄く短くなりました。

<!DOCTYPE html>

たったこれだけなのでコピペしなくてもいけそうです。
ぶっちゃけ従来のXHTML1.0で書かれた文書のDOCTYPEを変更するだけで、基本的にはHTML5に準拠したものになったりしますw
※WordPress3のデフォルトテーマのtwentytenも新要素を使わずDOCTYPEだけHTML5といったところでしょうか。

head内の要素他

<html lang="ja"><!--日本語サイトの場合-->
<head>
<meta charset="文字コード" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />

※html要素にはlang属性を指定するのみ。
※文字コードはmetaタグのcharset属性で指定。

<link rel="stylesheet" href="ファイル名.css" type="text/css" />
<script src="ファイル名.js" type="text/javaScript"></script>

※上記はtype属性を指定しなくてもOKです。

マークアップ方法

終了タグの省略

終了タグが必須だったXHTMLとは異なり、HTML4のように終了タグを省略が許されます。
※もちろん全部じゃなく条件つきです。

<ul>
<li>2010年8月
<li>2010年9月
<li>2010年10月
</ul>

※<li>の終了タグを省略しています。

空要素について

空要素は<br>もしくは<br />とマークアップします。
ただし<br></br>のように中身なしの開始・終了タグといった書き方は許されないようです。

コンテンツ属性について

コンテンツ属性の引用符は省略できますが、値自体に”、’、<、>、=、\などが含まれる場合は省略不可です。

<input type = text value= HTML5 name = search />
<input type = "text" value = "HTML5" name= "search" />

※どちらもOK(ただし値に”、’、<、>、=、\などが含まれる場合は下の書き方で)

比較的柔軟な書き方が許されますが、なんにしても一つのサイトで書き方の統一は必要でしょう。
個人的には慣れたXHTML1.0の書き方をそのまま移行が分かりやすいかなと思ってます。

セクショニングコンテンツについて

個人的にはマークアップするときに最も意識したいのがアウトラインかなと思うのですが、セクショニングコンテンツはその中でも重要なのではないでしょうか。
セクショニングコンテンツに分類される要素はarticle、aside、nav、section要素です。

section要素

セクションは章や節を表し、見出しとその内容で構成されます。
逆に言えば見出しが書けない場合はsectionでのマークアップは適していないということです。
※sectionを利用すればこれまでのようなdivの多用を減らせると思いますが、sectionは新しいdivではありませんw

セクション内は見出しのレベル(h1～h6)をリセットできます。
※セクションのネストに沿った見出しレベルで書くことも可能。

見出しのレベルをリセットした書き方

<body>
<h1>HTML</h1>
<p>HTMLについて</p>
	<section>
		<h1>HTML5</h1>
		<p>HTML5について</p>
		<section>
			<h1>section要素</h1>
			<p>section要素の特徴</p>
		</section>
	</section>
</body>

見出しのレベルを継承した書き方

<body>
<h1>HTML</h1>
<p>HTMLについて</p>
	<section>
		<h2>HTML5</h2>
		<p>HTML5について</p>
		<section>
			<h3>section要素</h3>
			<p>section要素の特徴</p>
		</section>
	</section>
</body>

どちらで書くかによって(場合によっては)CSSのセレクタの作りやすさが変わってくると思いますが、どちらにしても統一した書き方が出来ていればOKなのでしょう。
※現状でh1を多様すると検索エンジンにスパム扱いされるなんて噂を聞いた気がするんですがどうなんでしょ？大丈夫だとは思いますが

article要素

article要素はブログの記事、ニュース記事などのように、それだけで独立したコンテンツをマークアップします。
それ自身が独立していればいいので、掲示板の投稿や、ブログへのコメント、通販サイトの商品説明コンテンツにも利用できるのではないでしょうか。
article要素を利用できる基準としてよくいわれるのはRSSフィードなどの1つのエントリーとして成り立つか否かだそうです。

aside要素

aside要素はメインとなるコンテンツと関連性の薄い、もしくは間接的にしか関連しないコンテンツに利用します。
aside要素には見出しを含めなくても問題はないです。
article要素の中でaside要素を入れる場合は、補足記事やイメージ写真に使用できます。
逆にarticle要素の外側ではサイドばーやバナー広告などへの使用でしょうか。

nav要素

nav要素は主要なナビゲーションを形成するリンクの集まりに利用します。
「主要な」ということでグローバルナビゲーションへの利用がまず考えられますかね。
内容が同じでも主要でないページ下部のフッターにあるページナビゲーションには適さないようです。
サイドナビやパン屑リストも主要なナビゲーションと見なせば利用できるようです。

サイトマップで利用できるか?

※サイトマップはナビゲーション自体がメインコンテンツなのでnav要素でのマークアップは適さず、section要素などでマークアップが適切のようです。

参考にしたサイト・参考になるサイト

ざーっと書いて長くなったのでここまでですが、いつか続きを書きたいです。
いたるところにありふれた情報ですがアウトプットの練習ということで。
以下ためになるサイトです。

HTML5についてのおさらい – W3G Blog Studies
とても参考になります…これを読めばぶっちゃけ自分の記事はいらない(｀・ω・´)
HTML5 における HTML4 からの変更点
HTML Working Group による「HTML5 differences from HTML4」を日本語訳してくれてます。
【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1 – CSS HappyLife
こちらのテンプレートはHTML5を勉強する際にも参考になります。このブログにも利用させて頂きました。

なんちゃってWebデザイナーの備忘録など…