実験！あなたのブラウザを判別

正解していますか？出力結果→「」

var _ua = (function(){
return {
ltIE6:typeof window.addEventListener == "undefined" && typeof document.documentElement.style.maxHeight == "undefined",
ltIE7:typeof window.addEventListener == "undefined" && typeof document.querySelectorAll == "undefined",
ltIE8:typeof window.addEventListener == "undefined" && typeof document.getElementsByClassName == "undefined",
IE:document.uniqueID,
Firefox:window.sidebar,
Opera:window.opera,
Webkit:!document.uniqueID && !window.opera && !window.sidebar && window.localStorage && typeof window.orientation == "undefined",
Mobile:typeof window.orientation != "undefined"
}
})();
if(_ua.ltIE6){
document.write('あなたがお使いのブラウザはIE6以下っぽいです');
}else if(_ua.ltIE7){
document.write('あなたがお使いのブラウザはIE7以下っぽいです');
}else if(_ua.ltIE8){
document.write('あなたがお使いのブラウザはIE8以下っぽいです');
}else if(_ua.webkit){
document.write('あなたがお使いのブラウザはchromeもしくはsafariっぽいです');
}else if(_ua.Firefox){
document.write('あなたがお使いのブラウザはFirefoxっぽいです');
}else if(_ua.Opera){
document.write('あなたがお使いのブラウザはOperaっぽいです');
}else if(_ua.IE && !_ua.ltIE8){
document.write('あなたがお使いのブラウザはIE9以上っぽいです');
}else if(_ua.Mobile){
document.write('あなたはスマートフォンとかタブレット端末っぽいです');
}

jQuery.support同様、機能をサポートしているかどうかの条件文にのみこだわったブラウザの判別です。IEの判別は実用的にしておきました（詳しい解説はこちらで説明しているので参照してください）。

なお、IE10からは、window.attachEventが消えるという噂もあるのであえて使わないようにしています。それと、safariが、window.webkitNotificationsに対応していれば、Webkitの部分はもっと単純な条件で書けるはずなのですが。。。

テストオープン期間を設けています

実際、どんなサイトなのかは「来て・見て・触って」いただくのが一番良いかと思いますので、4月末(4月30日)までをテストオープンとして、投稿(スレッドの作成)や返信投稿を自由に試していただける期間を設けています。

とくに質問や相談したいことに関係なく、テストオープン期間は自由に投稿(スレッドの作成)や返信投稿を試してみて、もし利用されている最中に不具合や障害、表示が崩れているところ等を見つけられたら、こっそりと教えていただけると嬉しいです。また、いろいろな意見や感想、要望もお寄せ頂けると幸いです。

Twihelpme

Twihelpme(ツイヘルプミー)は、エンジニア、プログラマー、デザイナー、クリエイターなどのコンピュータに携わる多くの分野の人たちがつながり・助け合えるTwitterと連動したソーシャル型のリアルタイムQ&Aサイトです。Q&A用途に限らず、多くの人とノウハウを共有したり・意見収集等にも利用できます。

オープン告知用のキャンペーンなんかもちゃっかりやっているので、よろしければ是非そちらもどうぞ
Twihelpme(ツイヘルプミー)オープン記念キャンペーン

諸背景と実現したいこと

UAが処理するにあたっては、blockquoteやq要素のcite属性に引用元のURI（リソースの所在や名前）と、title属性に引用元の説明情報があれば、適切に解釈されることになっていようとは思うのですが、残念ながら主要な視覚環境のUAにおいてcite属性、title属性で示された情報が視覚的に表され、それをハイパーリンク等で利用できるようにはなっていません。

そこで、利用者にとってもblockquote, q要素で示されている引用元の情報が視覚化され、ハイパーリンクで利用できるようになっている方が便利なはずであろうということで、スクリプトを利用して、今回は利用頻度が多いであろうblockquote要素のみに対象を絞り、引用元へのリンク、及び引用元を示すテキストを生成するためのスクリプトを考えてみたいと思います。

今回実現したいことは次のようなスクリプトです。

• blockquote要素のcite属性に指定された引用元のリソースの所在(URL)、title属性に指定された引用元の説明情報をそれぞれリンク先とリンクタイトルに置き換わるようにする。
• もし、引用元のリソースの所在が書籍のためにURLでない場合は、URNとしてISBNが与えられていれば、オンラインショッピングサイトのamazon.co.jpへのリンクへ変換するなど、できるだけハイパーリンクを通して情報を得られる機会を工夫する。

サンプルコード

スクリプトを自分で書こうと思ったのですが、他にも似たようなスクリプトがないか探してみたところ、Unformed Buildingさんにて、今回実現したいことのほとんど完成形がすでにあったので、基本となるスクリプトには公開されていたものを利用させて頂きました(@ub_pnrさんにお礼申し上げます)。jQueryのライブラリを利用しています。

jQuery(function ($) {
$('blockquote').each(function(){
var trakingID = 'w3g-22';
var title = $(this).attr('title');
var cite = $(this).attr('cite');
var url = $(this).filter('[cite^=http]').attr('cite');
var isbn = $(this).filter('[cite^=urn:isbn]').attr('cite');
$(this).wrap('<dl class="quote"><dd></dd></dl>');
if (cite === url) {
if (title != '') {
$(this).parent('dd').before('<dt><cite><a href="' + cite + '">' + title + '</a></cite>より</dt>');
} else {
$(this).parent('dd').before('<dt><cite><a href="' + cite + '">' + cite + '</a></cite>より</dt>');
}
} else if (cite === isbn) {
isbn = isbn.replace(/^urn:isbn:/i,'').replace(/-/g,'');
if(trakingID != ''){
isbn = 'http://www.amazon.co.jp/o/ASIN/' + isbn + '/' + trakingID + '/rel=nofollow';
}else{
isbn = 'http://www.amazon.co.jp/o/ASIN/' + isbn;
}
if (title != '') {
$(this).parent('dd').before('<dt><cite><a href="' + isbn + '">' + title + '</a></cite>より</dt>');
} else {
$(this).parent('dd').before('<dt><cite><a href="' + isbn + '">' + cite + '</a></cite>より</dt>');
}
} else if ((cite === '') && (title != '')) {
$(this).parent('dd').before('<dt><cite>' + title + '</cite>より</dt>');
}
});
});

変数trakingIDの値に入っているw3g-22の部分は適宜、自分のAmazonアソシエイトIDに変更してください。もし、AmazonアソシエイトIDをお持ちでない場合は、var trakingID = '';と、値を空(undefined)で利用してください。後ほど、AmazonアソシエイトIDを取得されることがあったら、後日埋められると良いかと思います。

たとえば、次のようなblockquote要素でマークアップしたものがあったとします。

<blockquote cite="urn:isbn:4873114683" title="jQueryクックブック">
<h1>1章　jQueryの基礎</h1>
<ul>
<li>レシピ1.1   HTMLページでjQueryライブラリコードをインクルードする</li>
<li>レシピ1.2   ページの読み込みが完了する前にjQuery/JavaScriptコードを実行する</li>
<li>レシピ1.3   セレクタとjQuery関数を使ってDOM要素を選択する</li>
<li>レシピ1.4   指定されたコンテキストでDOM要素を選択する</li>
<li>レシピ1.5   DOM要素のラッパーセットのフィルタリング</li>
</ul>
</blockquote>

上記のソースコードがスクリプトを通すことで、引用元を視覚化できるようにHTMLを追加生成します。ここでは、引用元を示すcite要素と組み合わせて、できるだけ引用元のブロックとの対応が関連づけられるようなマークアップを出力するようにしています。

<dl class="quote">
<dt><cite><a href="http://www.amazon.co.jp/o/ASIN/4873114683/w3g-22/rel=nofollow">jQueryクックブック</a></cite>より</dt>
<dd><blockquote cite="urn:isbn:4873114683" title="jQueryクックブック">
<h1>1章　jQueryの基礎</h1>
<ul>
<li>レシピ1.1   HTMLページでjQueryライブラリコードをインクルードする</li>
<li>レシピ1.2   ページの読み込みが完了する前にjQuery/JavaScriptコードを実行する</li>
<li>レシピ1.3   セレクタとjQuery関数を使ってDOM要素を選択する</li>
<li>レシピ1.4   指定されたコンテキストでDOM要素を選択する</li>
<li>レシピ1.5   DOM要素のラッパーセットのフィルタリング</li>
</ul>
</blockquote></dd>
</dl>

CSSによる装飾のサンプル

CSSによる装飾例を示します。引用元を視覚化した部分が最後に表示されるような装飾にしています。引用部分をわかりやすくするためにクォーテーションマークを模した背景画像を利用します。

この装飾例の画像を含むサンプル一式はこちらよりダウンロードして利用してください。

dl.quote{
margin:1em 0;
}
dl.quote dd{
margin:0;
}
dl.quote,
dl.quote dd{
padding:0;
position:relative;
}
blockquote {
border:1px solid #f9f9f9;
background:#eee;
padding:0 25px;
margin:1em 10px;
color:#666;
quotes:none;
display:block;
position:static;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
dl.quote dd blockquote{
padding:0 25px 25px 25px;
margin:0 10px;
background:#eee url(/img/blockquote_start.gif) no-repeat 10px 15px;
}
blockquote h1{
font-size:115%;
font-weight:100;
border-bottom:1px dotted #0f527d;
color:#0f527d;
margin:1em 0 .5em 0;
padding:0 0 4px 0;
text-shadow:0 1px 1px #d0d0d0;
}
dl.quote dt{
background:transparent url(/img/blockquote_end.gif) no-repeat 100% 0;
position:absolute;
bottom:10px;
right:20px;
clear:none;
float:none;
border:0 none;
margin:0;
padding:15px 10px 0 0;
display:block;
z-index:10;
}

なお、IEにおいては、IE9未満のバージョンでborder-radiusをサポートしていないため角丸の装飾は反映されません。

動作サンプル

IEは6から動作します。その他の主要ブラウザにおいても問題なく動作します。

<blockquote cite="http://www.amazon.co.jp/o/ASIN/4873114683/w3g-22/rel=nofollow" title="jQueryクックブック">
<h1>1章　jQueryの基礎</h1>
<ul>
<li>レシピ1.1   HTMLページでjQueryライブラリコードをインクルードする</li>
<li>レシピ1.2   ページの読み込みが完了する前にjQuery/JavaScriptコードを実行する</li>
<li>レシピ1.3   セレクタとjQuery関数を使ってDOM要素を選択する</li>
<li>レシピ1.4   指定されたコンテキストでDOM要素を選択する</li>
<li>レシピ1.5   DOM要素のラッパーセットのフィルタリング</li>
</ul>
</blockquote>

<blockquote cite="urn:isbn:4873114683" title="jQueryクックブック">
<h1>1章　jQueryの基礎</h1>
<ul>
<li>レシピ1.1   HTMLページでjQueryライブラリコードをインクルードする</li>
<li>レシピ1.2   ページの読み込みが完了する前にjQuery/JavaScriptコードを実行する</li>
<li>レシピ1.3   セレクタとjQuery関数を使ってDOM要素を選択する</li>
<li>レシピ1.4   指定されたコンテキストでDOM要素を選択する</li>
<li>レシピ1.5   DOM要素のラッパーセットのフィルタリング</li>
</ul>
</blockquote>

<blockquote cite="http://www.amazon.co.jp/o/ASIN/4873114683/w3g-22/rel=nofollow" >
<h1>1章　jQueryの基礎</h1>
<ul>
<li>レシピ1.1   HTMLページでjQueryライブラリコードをインクルードする</li>
<li>レシピ1.2   ページの読み込みが完了する前にjQuery/JavaScriptコードを実行する</li>
<li>レシピ1.3   セレクタとjQuery関数を使ってDOM要素を選択する</li>
<li>レシピ1.4   指定されたコンテキストでDOM要素を選択する</li>
<li>レシピ1.5   DOM要素のラッパーセットのフィルタリング</li>
</ul>
</blockquote>

<blockquote cite="urn:isbn:4873114683" >
<h1>1章　jQueryの基礎</h1>
<ul>
<li>レシピ1.1   HTMLページでjQueryライブラリコードをインクルードする</li>
<li>レシピ1.2   ページの読み込みが完了する前にjQuery/JavaScriptコードを実行する</li>
<li>レシピ1.3   セレクタとjQuery関数を使ってDOM要素を選択する</li>
<li>レシピ1.4   指定されたコンテキストでDOM要素を選択する</li>
<li>レシピ1.5   DOM要素のラッパーセットのフィルタリング</li>
</ul>
</blockquote>

<blockquote title="jQueryクックブック">
<h1>1章　jQueryの基礎</h1>
<ul>
<li>レシピ1.1   HTMLページでjQueryライブラリコードをインクルードする</li>
<li>レシピ1.2   ページの読み込みが完了する前にjQuery/JavaScriptコードを実行する</li>
<li>レシピ1.3   セレクタとjQuery関数を使ってDOM要素を選択する</li>
<li>レシピ1.4   指定されたコンテキストでDOM要素を選択する</li>
<li>レシピ1.5   DOM要素のラッパーセットのフィルタリング</li>
</ul>
</blockquote>

hgroup要素 - 見出しのグループ化

hgroup要素は、複数の見出しをグループ化します。hgroup要素の中に入れることができるのはh1要素からh6要素までの見出しのみです。見出しのグループ化によって得られる効果は、副題やキャッチフレーズを伴う場合に意味的・構造的にそれを一つの見出しとして構成することができることと、加えて無駄なアウトラインの形成を抑止できることです。

<body>
<h1>A</h1>
<h2>A'</h2>
<h2>B</h2>
<p>C</p>
</body>

上記のHTML5ドキュメントであれば、HTML5適合UAは暗黙のセクションに基づいて次のアウトライン（階層構造）を形成します。

1. A...bodyセクションの見出し(レベルはh1)
   1. A'...暗黙のセクションを開始する見出し(レベルはh2)
   2. B...暗黙のセクションを開始する見出し(レベルはh2)で、段落のCを含んでいる

もし、制作者が意図的にA'の見出しをAの見出しの副題やキャッチフレーズとして含めたくても従来のマークアップではアウトラインが生成されてしまい、構造的にもわかれてしまう問題がありました。そこでhgroup要素を利用することで、従来のマークアップが抱えていた問題を解決することができます。

<body>
<hgroup>
<h1>A</h1>
<h2>A'</h2>
</hgroup>
<h2>B</h2>
<p>C</p>
</body>

hgroup要素を用いることにより、HTML5適合UAにおける上記のHTML5ドキュメントのアウトライン（階層構造）は次のように形成されます。

1. A+A'...bodyセクションの見出し(レベルはh1)
   1. B...暗黙のセクションを開始する見出し(レベルはh2)で、段落のCを含んでいる

hgroup要素内にある複数の見出しはグループ化が行われ、その見出しのレベルは複数の見出しの中で、もっとも高いレベルに準じ、意味的にも1つの見出しとして構成されます。そして、形成されるアウトラインも見出し1つ分であることがhgroup要素のもっとも注目すべき点です。

なお、ここでは説明にあたって便宜上わかりやすくするために暗黙のセクションを用いましたが、マークアップの際は暗黙のセクションに依存するのではなく、次のように必ずセクショニング・コンテンツ(article, aside, nav, section要素)を用いるようにしましょう。形成されるアウトライン（階層構造）は同じです。

<body>
<hgroup>
<h1>A</h1>
<h2>A'</h2>
</hgroup>
    <section>
    <h2>B</h2>
    <p>C</p>
    </section>
</body>

header要素 - ページ全体のヘッダと各セクションのヘッダ

header要素は導入部分（コンテンツの概略や目次）、ナビゲーションなどをグループ化して提供するために使います。header要素内に、header要素とfooter要素を入れることはできません。header要素はセクションの一部であって、新しいセクションを開始するものでもなければ、アウトラインにも影響を及ぼしません。そして、bodyセクション内で使うか、各セクション内で使うかによって、それぞれ違った役割を果たすケースが多いはずです。

<body>
<header>
<hgroup>
<h1>サイト名</h1>
<h2>サブタイトル</h2>
</hgroup>
    <nav>
    <ul>
    <li><a href="/contents1/">主コンテンツその1</a></li>
    <li><a href="/contents2/">主コンテンツその2</a></li>
    <li><a href="/contents3/">主コンテンツその3</a></li>
    </ul>
    </nav>
</header>
...
</body>

各セクションのヘッダ

各セクションのヘッダとは、暗黙のセクション、またはセクショニング・コンテンツによって生成されたセクションの中で使われるheader要素を言います。ページ・ヘッダはサイト全体に関するナビゲーションをグループ化して提供するために使用されるケースが多いのに対し、各セクションのヘッダはセクション内のコンテンツについての概略（見出しと概要）や目次といった、そのコンテンツの導入部分を提供するために使用するケースが多くなるでしょう。たとえば、次のようにarticle要素のセクション内で本文の導入部分として提供するような使い方です。

<body>
...
    <article>
    <header>
    <h2>続HTML5についてのおさらい</h2>
    <p>TML5についてのおさらい続編です。前回の内容を受けて...</p>
    </header>
...
    </article>
...
</body>

footer要素 - ページ全体のフッタと各セクションのフッタ

footer要素はそのセクションに関する情報をグループ化して提供するために使用します。header要素と使用ケースが似ているため説明がやや冗長ですが、文法等はheader要素と同様で、footer要素内にheader要素とfooter要素を入れることができず、新しいセクションを開始するものでもなければ、アウトラインにも影響を及ぼしません。また、bodyセクション内で使うか、各セクション内で使うかによって、こちらもそれぞれ違った役割を果たすケースが多いはずです。

<body>
...
<footer>
<ul>
<li><a href="/sitepolicy/">サイトポリシー</a></li>
<li><a href="/privacy/">個人情報の取り扱いについて</a></li>
<li><a href="/sitemap/">サイトマップ</a></li>
</ul>
<small>Copyright 〜〜〜. All right reserved.</small>
</footer>
</body>

もしセクショニング・コンテンツの使い方で迷ったら?

質問の多かったところで、セクショニング・コンテンツであるarticle, aside, nav, section要素のいずれでマークアップするのが良いのか使い分けに迷うような場合は、次のように意味がわかりやすいものから順に当てはめていくことで、必ずしも適当ではありませんが、どのセクショニング・コンテンツでマークアップするのが良いのかの手引きにはできるかもしれません。

strong, em, b, i, mark要素の使い分け

これまでのセクションについての内容から話が大きくそれてしまいますが、読者の方から質問があったことに対する、一見解としてあわせてここに記載しておくことにします。

XHTML1.1でプレゼンテーションモジュールに分類されていた要素は、本来XHTML2.0からは削除予定であったのに対し、HTML5からb要素, i要素が削除されずに残っていることから、strong, em, b, i要素、加えて新たなmark要素をそれぞれ必要以上に使い分けなければならないのではないかと混乱される方が多いようです。

HTML5では、これらの要素における定義は明確にわけられており、strong要素とem要素の使い分けはわかりやすくなったかと思うのですが、i要素とb要素については使い分ける必要も、また無理に使う必要もない要素であると考えます。

<h1><strong>まぜるな<strong>危険</strong></strong></h1>
<p><strong>酸性タイプ</strong>の製品と一緒に使う（まぜる）と有毒な塩素ガスが出て<strong>危険</strong>です。</p>

<p>魚が<em>好き<em>です。でも、<em>お肉は<em>もっと好き</em>です。</em></p>

以上、最後がマークアップについての見解コーナのようになってしまいましたが、HTML5のマークアップに関するおさらいはこれにて一段落とします。ご購読どうもありがとうございました。

補足事項

jQuery.browserは非推奨

if(jQuery.browser.msie){
alert('あなたがお使いのブラウザはIEです');
}else if(jQuery.browser.mozilla){
alert('あなたがお使いのブラウザはFirefoxです');
}else if(jQuery.browser.webkit){
alert('あなたがお使いのブラウザはchromeもしくはsafariです');
}else if(jQuery.browser.opera){
alert('あなたがお使いのブラウザはoperaです');
}

jQuery.browserを使えば、上記の簡単なコードだけでブラウザを判別した条件分岐が行えます。加えてバージョンの判別もjQuery.browser.versionを使ってできます。

if(jQuery.browser.msie && parseInt(jQuery.browser.version) == 8){
alert('あなたがお使いのブラウザはIE8です');
}else if(jQuery.browser.msie && parseInt(jQuery.browser.version) == 7){
alert('あなたがお使いのブラウザはIE7です');
}else if(jQuery.browser.msie && parseInt(jQuery.browser.version) == 6){
alert('あなたがお使いのブラウザはIE6です');
}

jQuery.browserとjQuery.browser.versionはすごく便利ですが、jQuery1.3からはどちらも非推奨となっています。1.3以降のバージョンでは後方互換とプラグイン利用のためにまだ含まれていますが、今後のjQueryのバージョンアップに伴い、この機能は廃止される見通しです。また、飽くまでもこれらはnavigator.userAgentの値をもとにしており、UA情報は簡単に偽装することもできます。そこで、代わりにブラウザがサポートする機能に基づいて判別を行うjQuery.supportを使うことが推奨されています。

jQuery.supportについて

jQuery.supportは、ブラウザごとの各機能のサポート状態をBoolean型の true or falseの値で返すAPIです。各機能にあたるプロパティには次のようなものがあります。

leadingWhitespace

innerHTMLで、先頭に空白があった場合にそれを残して返すブラウザであればtrueです。

tbody

table要素内に、tbody要素が無い状態を許可する(省略時に自動的に付加しない)ブラウザであればtrueです。

htmlSerialize

innerHTMLを用いた際に、シリアライズされた値を返すブラウザであればtrueです。

style

getAttribute("style")で要素に記述されたstyle属性値を取得できるブラウザであればtrueです。

hrefNormalized

href属性の値を取得する際に、属性値をそのまま返す（勝手に補完しない）ブラウザであればtrueです。

opacity

opacityによる透明度を指定する機能を実装しているブラウザであればtrueです。

cssFloat

floatの値を取得する場合にstyle.cssFloatで取得できるブラウザであればtrueです。

checkOn

チェックボックスの値が指定されていない場合のデフォルト値が"on"であるブラウザであればtrueです（webkitはデフォルト値が""の空なので、falseです）。

deleteExpando

拡張した要素の属性を、delete演算子で削除できるブラウザであればtrueです。

checkClone

cloneNode()を使用して要素を複製する場合に要素のチェック状態も含めコピーできるブラウザでればtrueです。

scriptEval

appendChild()やcreateTextNode()で要素を追加した際、そこにスクリプトが含まれていると、それを自動的に実行できるブラウザであればtrueです。

noCloneEvent

要素がコピーされる場合に、元の要素がもっていたイベントハンドラをコピーしないブラウザであればtrueです。

boxModel

W3C CSS Box Model に基づいてページをレンダリングしているブラウザであればtrueです。

これらのプロパティのブラウザ毎の値を一覧表にまとめると、次の通りです。Yoursの欄はご覧になられている環境での結果がそれぞれtrue or falseで返ります。IE9は最新のRC版におけるデータです。

chromeとsafariを対象とする場合

if(!jQuery.support.checkOn){
alert('あなたがお使いのブラウザはChromeもしくはSafariっぽいです');
}

if文の条件式の中で!をつけたので、checkOnがfalseであればこの条件文に該当します。該当するのはwebkitだけなので、これでchormeとsafariのみに振り分けたコードを記述できます。なお、Android標準ブラウザ、iPhone / iPad標準ブラウザといったスマートフォンも同じChromeとSafariなので、この条件に合致します。

FirefoxとOperaを対象とする場合

if(jQuery.support.checkOn && jQuery.support.noCloneEvent){
alert('あなたがお使いのブラウザはFirefoxもしくはOperaっぽいです');
}

まず、checkOnがtrue条件なので、chromeとsafariがこれにはじかれ、IEの全バージョンでfalseが返るnoCloneEventをand条件に加えることで、FirefoxかOperaのみに振り分けたコードを記述できます。さらにここから、FirefoxかOperaかを判別するには、jQueryではなく、window.globalStorageを使います。globalStorageを使うのはFirefoxのみです。ただし、問題があります。globalStorageがWeb Storageの仕様自体から削除されたため、今後FirefoxのアップデートによってglobalStorage自体が削除されると、以下のOperaとFirefoxの判別は今後通用しなくなるかもしれませんということで注意してください。一応、Firefox4 betaではglobalStorage自体は残されていたので問題なく動作確認できています。

if(jQuery.support.checkOn && jQuery.support.noCloneEvent && window.globalStorage){
alert('あなたがお使いのブラウザはFirefoxっぽいです');
}else if(jQuery.support.checkOn && jQuery.support.noCloneEvent && !window.globalStorage){
alert('あなたがお使いのブラウザはOperaっぽいです');
}

IEのみを対象として各バージョンでの振り分けもできるようにしたい場合

ブラウザ判別でのコード分岐は特にIEにおいて活躍することが多いので、いろいろなアプローチを取り上げてみます。

if(!jQuery.support.opacity){
alert('あなたがお使いのブラウザはIE6,7,8っぽいのいずれかです');
}

if(!jQuery.support.opacity){
    if(!jQuery.support.style){
    alert('あなたがお使いのブラウザはIE6,7っぽいのどちらかです');
    }else{
    alert('あなたがお使いのブラウザはIE8っぽいです');
    }
}

if(!jQuery.support.opacity){
    if(!jQuery.support.style){
        if (typeof document.documentElement.style.maxHeight != "undefined") {
        alert('あなたがお使いのブラウザはIE7っぽいです');
        }
        else {
        alert('あなたがお使いのブラウザはIE6っぽいです');
        }
    }else{
    alert('あなたがお使いのブラウザはIE8っぽいです');
    }
}

if(!jQuery.support.noCloneEvent && jQuery.support.opacity){
alert('あなたがお使いのブラウザはIE9っぽいです');
}

実験！あなたのブラウザを判別

alertだと鬱陶しいので、ここではdocument.write()に書き換えて地味に実験です。

正解していますか？出力結果→「」

if(!jQuery.support.checkOn && jQuery.support.checkClone){
document.write('あなたがお使いのブラウザはchromeもしくはsafariっぽいです');
}else if(jQuery.support.checkOn && jQuery.support.noCloneEvent && window.globalStorage){
document.write('あなたがお使いのブラウザはFirefoxっぽいです');
}else if(jQuery.support.checkOn && jQuery.support.noCloneEvente && !window.globalStorage){
document.write('あなたがお使いのブラウザはOperaっぽいです');
}else if(!jQuery.support.noCloneEvent && jQuery.support.opacity){
document.write('あなたがお使いのブラウザはIE9っぽいです');
}else if(!jQuery.support.opacity){
    if(!jQuery.support.style){
        if (typeof document.documentElement.style.maxHeight != "undefined") {
        document.write('あなたがお使いのブラウザはIE7っぽいです');
        } else {
        document.write('あなたがお使いのブラウザはIE6っぽいです');
        }
    }else{
    document.write('あなたがお使いのブラウザはIE8っぽいです');
    }
}else{
document.write('ごめんなさい、あなたのブラウザを特定できませんでした');
}

以上、jQuery.supportに加えて、機能をサポートしているかどうかの条件文にのみこだわったブラウザの判別でした。IEの判別はまあまあ使えるでしょうか。それ以外のブラウザはサポートしている機能が同じなので、条件分岐させる必要もないことでしょう。

書き出す必要のあるHTML5の新要素

まず最初に、IE8以下では未知の要素となるために書き出す必要のあるHTML5の新要素名を列挙しておきます。

• article要素
• aside要素
• nav要素
• section要素
• hgroup要素
• header要素
• footer要素
• figure要素
• figcaption要素
• time要素
• mark要素

この他にも、HTML5の新要素にはcanvas要素, audio要素, embed要素, video要素, source要素, progress要素, meter要素, ruby要素, rt要素, rp要素, details要素, summary要素, datalist要素, keygen要素, output要素, command要素, menu要素(※menu要素はHTML2から規定されている要素名ですが全く異なる用途として新たに導入されています)があるのですが、この内、embed要素はIE3から、ruby要素,rt要素,rp要素はIE5のバージョンから既に先行実装済みであり、その他の要素についてはCSSで整形できるものでなっかり、全く機能すらしないのでdocument.createElement()で書き出す必要はありません。

Minify化のポイント

latest logさんからポイントを抜粋させてもらいます。

ドット演算子以降を自力で Minify する

JavaScriptは動的な言語なので、ドット演算子以降は基本的に minify しても圧縮されません。

document.createElement("div");
document.createElement("a");
document.createElement("p");

↓ このままだと、minify しても縮まらない

document.createElement("div");document.createElement("a");document.createElement("p")

ドット演算子によるアクセス( Object.property )は、Object["property"] のシンタックスシュガー(糖衣構文)です。

これらは、同じ処理速度でほぼ同じ価値を持ち、見た目がちょっと違うだけ(ドット演算子は制限も多いけど)。

そこで minifier が処理しやすいように、シンタックスシュガーを解除すると

var doc = document, createElement = "createElement";
doc[createElement]("div");
doc[createElement]("a");
doc[createElement]("p");

↓ minify

var a=document,b="createElement";a[b]("div");a[b]("a");a[b]("p")

すごいですよね、可読性は犠牲になりますが、同じ処理速度で且つここまで削ることができるというのは、目から鱗でした。

早速この書き方を取り入れて、HTML5の新要素を書き出してみます。

HTML5の新要素をIE8以下で認識させるためのコード例

代表的なライブラリにhtml5.jsがありますが、これと同様のことができる最小コードへの試みです。

var a=document,b="createElement",c="article,aside,nav,section,hgroup,header,footer,figure,figcaption,time,mark".split(','),i=c.length;while(--i>=0)a[b](c[i]);

よしなかなかシンプルにできたぞと思っていましたら、ppBlog officialさんでもまったく同じようにHTML5新要素のdocument.createElement()の最小書き出しがエントリーされていました。書き出している要素は便宜上異なっていますが、ppBlogさんで紹介されているコードの方がいろいろなアプローチで断然ショートでした。

どこで最初に見かけたのか失念しましたが、これを一行（ワンライナー）で簡潔に済ませたスクリプトを見たときはいたく感心しました。Dean Edwards氏のブログ もこうなっています。

"header,nav,article,section,aside,footer".replace(/¥w+/g, function(a){document.createElement(a)});

上のポイントは、replaceメソッドの引数に関数を指定できて、その関数内では、正規表現にマッチした要素を適宜適用していく点です。ループみたいなことを勝手にやってくれる点ですね。おそらくこれ以上短くは書けないのではないかと思うのですが、息抜きに自分なりにいくつか考えてみました。

"header,nav,article,section,aside,footer".split(',').sort(function(a){return document.createElement(a)*1});

これも、似たような発想からですね。自動でなんかやってくれるという。

with("header,nav,article,section,aside,footer".split(',')))while(length)document.createElement(pop());

ここではwith構文を使ってみました。これもなかなかシンプルです。同じくwithと、Enumeratorを使って、

with(new Enumerator("header,nav,article,section,aside,footer".split(',')))for(;!atEnd();moveNext())document.createElement(item());

これは、ちょっと長いし、Enumerator Object はマイナーですかね。

短さ命で、グローバル変数の汚染なんて気にしないぜっ、という向きには以下のようなものもありかと思います。

s="header,nav,article,section,aside,footer".split(',');while(s[0])document.createElement(s.pop());

for文関連では、

for(i in s="header,nav,article,section,aside,footer".split(','))document.createElement(s[i]);

とか

for(i=0;n="header,nav,article,section,aside,footer".split(',')[i++];document.createElement(n));

とかですかねぇ。

コードを短くためのアプローチは本当勉強になります。なお、これらの書き方をしたからといってパフォーマンスがどの程度最適化されるのか等についてはわからないので、飽くまでもコード自体をMinify化するためのアプローチとして受け取ってください。

Google採用に至った経緯

現在のYahoo!JAPANが採用している検索エンジンは、米Yahoo!が開発したYSTことYahoo Search Technologyです。YSTはもともと、米Yahoo!が2002年12月に検索エンジン大手のInktomiを買収し、そこからオリジナルの検索技術を加えつくりあげていったものです。

そして、YSTを採用する以前は、2001年から2004年5月末までYahoo!JAPANはGoogleの検索エンジンを採用していました（後述しますが、さらにその前となるとgooの国産検索エンジンを採用していました）。ゆえに7月27日に発表された今回のYahoo!JAPANと米Googleの提携は、丸6年ぶりに再びGoogleの検索エンジンに戻ってきたことになります。

一年前の2009年に米Yahoo!はMicroSoftと提携し、YSTからBingに切り替えることを発表してから、Yahoo!JAPANもBingを搭載していく可能性が高いと言われていたようですが、Googleは確固たる日本語環境の検索エンジンと広告配信システムを持っており、その機能も現時点ではベストと判断したということに至り、Yahoo!JAPANはGoogleの採用を決めたようです。

このニュースはウェブ業界におけるここ数年来でもかなり大きな出来事であり、ウェブでビジネスを展開する人にとっては、何かしらの影響を受けることは避けれません。

Yahoo!JAPAN独自の味付け!?

ネットレイティングス調べによれば、2010年4月時点での日本国内の検索シェアは、Yahoo!JAPANがトップで53%、次いでGoogleが37%と、Yahoo!JAPANがGoogleのエンジンを採用すれば、実質、国内検索エンジンシェアの9割をGoogleが握ることになります。

しかしながら次のようなコメントが発表されているように、もちろんGoogleとは競合関係であり、単純にGoogleの検索結果と同じものを提供するだけにはならないようです。

「独自の味付け」でGoogleと勝負

ヤフーにとっては「技術の提供元が変わる」（井上社長）というイメージ。技術の上に、ユーザーの要望に合わせた"味付け"を加えて独自サービスを展開することで、Googleとは引き続き競合していく。

現在、検索キーワードによっては、検索結果ページに地図や天気などWeb検索以外の要素も表示されるが、これらは「検索エンジン以外から出している」味付けに当たる部分。Googleの検索エンジンに変わっても「付加価値を付ける自由度は極めて高い」とした。

ここで言及されている一部の味付け以外にも、どのような味付けが施されていくのか。ウェブ業界で仕事をしていると検索エンジンで上位に表示してくれというクライアントの要望が尽きることはありませんが、これまでYahoo!の検索結果の独自の味付けには苦い経験を強いられてきました。今では影響力が薄れてきたと言われていますが、数年前まで確かにひどい味付けがあったのです。

これまでにもあった独自の味付け

Yahoo!JAPANは日本のインターネットビジネスがまだ黎明期であった1996年4月からディレクトリによるウェブサイト検索サービスを提供開始しました。当時、Yahoo!JAPAN以外にもディレクトリサービスを提供する検索サイトは乱立していましたが、Yahoo!JAPANの利用者数はその中でも圧倒的であり、別格の存在でした。他の検索サイトにはいくら登録されてもアクセス数にはほとんど影響しなかったのに対し、Yahoo!JAPANのディレクトリにひとたび登録されればアクセス数はうなぎ上りに激増しました。

1990年代後半、一般家庭におけるインターネット回線の普及率が高まるとともにウェブも爆発的に普及し、人の手を介したディレクトリサービスだけでは満足な検索サービスを提供できなくなってきました。そこで、infoseekやgooといったロボット型検索エンジンが人気を集め始める中、ディレクトリ型検索サービスしかなかったYahoo!JAPANも、99年よりgooのロボット型検索エンジンを採用し、従来のディレクトリ検索にロボット検索を加えた検索サービスを開始しました。

大きなターニングポイントとなったのが2001年5月の出来事です。Yahoo!JAPANはこれまで無料で登録を受け付けていたディレクトリサービスから、有料（5万円、一部の指定業種は15万円）にて優先的に登録を受け付けるビジネスエクスプレスサービスを開始しました（さらに2005年4月から商用目的のサイトは完全有料登録となりました）。これを機に無料の登録申請で、Yahoo!JAPANに登録されることは非常に狭き門となり、「このサイトはYahoo!JAPANに登録されています」ということを掲げられているサイトが多く見られるようになるなど、Yahoo!JAPANのディレクトリに登録されることがサイト管理者にとっては一種のステータスとなっていました。

当時のYahoo!JAPANの検索結果は、ディレクトリに登録されているサイトの中で検索キーワードに該当するサイトが先行して表示され、その後にロボット検索の結果が続いて表示されるという形式でした。調査結果によって数値はいろいろと異なりますが、2ページ目以降を見るのは半数以下等の調査結果があったように、ディレクトリに登録されていなければ、ほとんどアクセスが期待できるはずもなく、多くのサイト管理者がYahoo!JAPANのディレクトリに登録されることを目標に日夜頑張られていたのです。

月日は流れ、検索ニーズは多様化していき、これに応じるため、2005年10月よりようやくディレクトリに登録されているサイト中心の検索結果から現在のYahoo!JAPANの検索結果と同じロボット検索による検索結果中心の形式となりました。しかしながら、その検索結果もディレクトリに登録されているサイトが優遇して表示され、ディレクトリに未登録だったサイトが目的のキーワードを含んでディレクトリに登録されれば検索結果の順位は見違えるほど上がるなど、これまでのYahoo!JAPANの検索結果にはディレクトリ登録に基づく独自の味付けが施されてきたのは紛れもない事実です。

検索エンジンにおけるユーザの違い

Googleが日本にやってきたのは、2000年9月のことです。Yahoo!JAPANの検索結果とは違い、Googleの検索結果は当初からロボット検索によるもので、すっきりとしたインターフェースに、クエリーに対して的を得た検索結果を返してくれると、インターネットの活用になれた利用者は、Yahoo!JAPANの検索結果に満足できず、続々とGoogleへと流れていきました。

しかしながら、日本のインターネット利用者をレベル分けすると、ライトユーザ層が大半で、Yahoo!JAPANはそのライトユーザ層にとって絶対的な地位を今日まで築き続けてきました。その結果、Yahoo!JAPANにはライトユーザーや女性・若年層が多く、Googleにはヘビーユーザーや男性が多いといった、日本の検索エンジン市場にはいつのまにか独自の棲み分けが形成されてしまいました。

仕事のためとペテン師も演じてきた

ここまで長々と書いてきましたが、ポイント部分を抜粋してみると、

• Yahoo!JAPANの検索結果ではディレクリに登録されているサイトが優遇して表示されてきた。
• 商用目的のサイトは有料のビジネスエクスプレスサービスでしかディレクトリ登録を受け付けていない。
• ライトユーザおよび、女性・若年層はYahoo!JAPANに定着してしまっている。

と纏めることができるのですが、この条件が揃っているということは、たとえばウェブ上で女性をターゲットとした商売をする場合、対象となる女性ユーザ層の多くがYahoo!JAPANを利用することから検索エンジンによる入り口はYahoo!JAPANに絞られ、その結果、Yahoo!JAPANの検索結果で上位に表示されるためには有料のディレクトリ登録が必須要件であり、もはやビジネスエクスプレスサービスに頼らざるを得なかったというのが実態でした。

そして、私の仕事の話へと移るのですが、現在のフロントエンドエンジニア職に転身する前はWebプランナー兼ディレクター職だったということもあり、クライアントから検索結果で上位に表示してくれとSEOに関する仕事依頼がおりてくることは少なくありませんでした。その都度、企画書を作成し、クライアントのもとへ説明に行くのですが、こういった仕事をしている時は何とも言えない虚無感に苛まされていました。

お金さえ払えば上位に表示されるということ自体は単純で分かり良いのですが、人の手を介していないロボットによる平等の検索結果が提供されるはずが、そうではなく恣意的に操作された検索結果であることがどうも納得できなかったのです。結局、お金で検索結果の順位を買っているようなものであり、自分がクライアントに説明している姿を客観的に想像すると、まるでペテン師を演じていたようなものでした。これでは親の経済力により学力に格差が生じ、教育機会に平等がないのと同じことだと、こんな仕事が自分のやりたかった仕事ではないと、3年間経験してきたプランナー・ディレクター職を離れることにしたひとつの理由がこのYahoo!JAPANに振り回されてきた愚かな過去にあります。

新たに生まれ変わるYahoo!JAPANの検索結果では、ロボット検索にディレクトリの登録有無による影響を受けることのないような、平等な検索結果を提供してくれるものであることに期待します。

HTML5の記述方法

まず最初に、必ずDOCTYPE宣言を行います。HTML5には公式のDTDがないので、すごくシンプルになっています。

<!DOCTYPE html> 

続いて、html要素にドキュメントの言語を宣言します。

<html lang="ja">

そして順番にhead要素ときて、文字エンコーディングの指定ですが、charset属性が新たに利用できるようになりました。

<meta charset="UTF-8"> 

あとは今までで慣れ親しんだ書き方と同じなので、だいたいの骨格をまとめると次のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5についてのおさらい - W3G</title>
<link rel="stylesheet" type="text/css" href="/common.css">
</head>
<body>
...
</body>
</html>

なお、html,head,body要素とlink, script要素に設定するtype属性（例：type="text/css", type="text/javascript"）は省略可能です。こうするとさらにすっきり。

<!DOCTYPE html>
<meta charset="UTF-8">
<title>HTML5についてのおさらい - W3G</title>
<link rel="stylesheet" href="/common.css">
...

XHTMLの記法になれてしまった方には朗報。終了タグの存在しない要素については、HTMLシリアライゼーションでもXHTMLのように />を付け足すこともできます。

<meta charset="UTF-8" />

HTML5の新要素を使うには

Firefox, Chromeが着々とシェアを伸ばしてはいますが、まだまだ全体的に見るとInternet Explorerがブラウザシェアの過半数を占めており、現在正式リリースされている最新バージョンであるInternet Explorer8でさえも、HTML5の新要素は未知の要素として、無視して取り扱われます。そのためHTML5の新要素を使うには、IEにとって未知の要素であるHTML5の新要素をレンダリングが行われる前に、その存在を覚えさせてあげる必要があります。

その方法とはdocument.createElement(HTML5の新要素名);をhead内など先に記述しておきます。ですが、新要素の数はけっこうあるので、これを一つずつ記述するのは非常に面倒です。そこで、古いブラウザでもHTML5が使えるようになる便利なオープンソースのライブラリが用意されていますので、次のJavaScriptをhead内に読み込ませれば、すぐにHTML5の新要素が使えるようになります。

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

最初の<!--[if lt IE 9]>と<![endif]-->がコメントで囲まれていますが、これはIEの独自仕様でIEだけ「もしIE9未満だった場合にのみ実行する」というコードとしてこれを解釈します。IE9からはHTML5に標準対応予定なので、このライブラリを読み込む必要がないためにこのように記述します。

カテゴリ分けを知っておこう

HTML5では要素ごとに目的に応じたグループ分けがなされており、従来のインライン要素にブロック要素を含めることができないといった概念と同様、そのカテゴリに属する要素にはどんなコンテンツ（要素およびテキスト）を含めることができるのかが定義されています（コンテンツ・モデルを参照）。

このグループ分けによってできたカテゴリには次の8つがあります。

Aの要素の中にBの要素を含めてはいけないなどの構文については間違っていれば単純に文法エラーとなりますので、そこはコンテンツ・モデルを参照してもらうとして、以上の8つのカテゴリ分けの中でもアウトライン（階層構造）に関わるところを強調したように、HTML5でのマークアップをはじめるにあたって重要になってくるのがアウトライン（階層構造）を意識したマークアップです。HTML5でのマークアップをはじめる際にはセクションとアウトラインの関係についてしっかりと理解しておく必要があります。ここからが本題で、以下、主にアウトラインを意識したマークアップのための説明です。

暗黙のセクションについて

これから説明するセクションというのは、section要素のことではなく、概念上のセクションという意味です。

<body>
<h1>A</h1>
<p>B</p>
<h2>C</h2>
<p>D</p>
<h3>E</h3>
<p>F</p>
<h2>G</h2>
<p>H</p>
</body>

HTML4やXHTML1では、どこからどこまでがその範囲なのかを明示的に示す要素はなかったため、h1〜h6の見出し要素を使って、その手がかりとしていました。HTML5に適合するUAであれば、HTML5のドキュメントにおいては、上記のようにセクショニング・コンテンツで明示されていない場合、アウトライン・アルゴリズムに従って、見出し要素が登場する度に、自動的に新たなセクションが始まるものと見なします。つまり次のようなアウトライン（階層構造）が形成されます。

1. A...bodyセクションの見出しで、段落のBを含んでいる
   1. C...暗黙のセクションを開始する見出しで、段落のDを含んでいる
      1. E...暗黙のセクションを開始する見出しで、段落のFを含んでいる
   2. G...暗黙のセクションを開始する見出しで、段落のHを含んでいる

今度は上記の内容をセクショニング・コンテンツを使ってセクションを明示したマークアップを例にとってみましょう。なお、暗黙のセクションを取り上げましたが、HTML5のマークアップをする際は、この暗黙のセクションに依存するのではなく、必ずセクショニング・コンテンツでセクションを明示するようにしましょう。

セクショニング・コンテンツを使ったセクションについて

先の内容であれば、マークアップにはsection要素が妥当なので、section要素でセクションを明示していきます。

<body>
<h1>A</h1>
<p>B</p>
    <section>
    <h2>C</h2>
    <p>D</p>
            <section>
            <h3>E</h3>
            <p>F</p>
            </section>
    </section>
    <section>
    <h2>G</h2>
    <p>H</p>
    </section>
</body>

これで上記でもHTML5に適合するUAであれば暗黙のセクションの際と同じアウトライン（階層構造）が形成されます。

1. A
   1. C
      1. E
   2. G

このようにHTML5ではセクションを明示したマークアップで、アウトライン（階層構造）を形成していく要領がつかめたかと思います。セクションを明示するセクショニング・コンテンツはsection要素だけでなく、他にもarticle,aside,navが存在し、どのように使い分ければ良いのかを迷うところでもあるのでそれぞれの用途について簡単に触れておきます。

では、以上をふまえて、次のようなHTML5ドキュメントの場合はどのようなアウトラインが形成されるか想像がつくでしょうか。

<body>
    <nav>
    <p><a href="/">Home</a></p>
    </nav>
<p>Hello world.</p>
    <aside>
    <p>My cat is cute.</p>
    </aside>
</body>

上記にはbody,nav,aisdeの3つのセクションが存在しますが、問題はセクショニング・ルートであるbody要素に対する見出しが存在しないことです。このため、この場合のアウトライン（階層構造）は次のように形成されてしまいます。

1. Untitled document
   1. Navigation
   2. Sidebar

これもHTML5の使いはじめの際によくやってしまいがちな間違いですので気をつけましょう。

また自分のドキュメントにて、どのようなアウトライン（階層構造）が形成されているかを確認できるオンラインツール（HTML 5 Outliner）もあるので、ぜひ利用しましょう。このツールでは、aside, navのデフォルトの見出しは生成しないので、Untitled sectionとなりますが、aside, navによるセクションの場合のUntitled sectionは間違いではありませんので気にしなくて大丈夫です。

見出しレベルの正しい使い方

最後にもうひとつ、以下は推奨事項ですが、HTML5でのマークアップの際には気をつけておくべきなのが、見出しレベルの使い方です。

セクション内には、h1からh6までのどのレベルの見出しをも含むことができるのですが、h1要素だけを使うか、または、セクションのネストに合ったレベルの見出し要素を使うかの、どちらかの見出しレベルの出現ルールに沿ったマークアップをすることが強く推奨されています。

また、「暗黙のセクションに依存するのではなく...」と先述していたように一つのセクション内に複数の見出しを入れるのではなく、見出しごとにセクションを明示的に包含させていくことが推奨されています。

h1要素だけを使った場合は、下記のようになります。

<body>
<h1>A</h1>
<p>B</p>
    <section>
    <h1>C</h1>
    <p>D</p>
            <section>
            <h1>E</h1>
            <p>F</p>
            </section>
    </section>
    <section>
    <h1>G</h1>
    <p>H</p>
    </section>
</body>

<body>
<h1>A</h1>
<p>B</p>
    <section>
    <h2>C</h2>
    <p>D</p>
        <blockquote>
        <h1>E</h1>
        <p>F</p>
            <section>
            <h2>G</h2>
            <p>H</p>
            </section>
        </blockquote>
    </section>
</body>

この罠に嵌ることが想定される事態

HTML5でリニューアルされているサイトが散見されるようになってきた今日この頃ですが、表題の問題で混乱が起こることが想定される事態としては、IE6～8の環境用にHTML5.jsのライブラリを組み込んでいたり、もしくは事前にHTML5の新要素群をdocument.createElement()で作成済みなので、「よし、これでjQueryでもHTML5の新要素群が操作できるね！」と思い込んでしまうところに罠が潜んでいるのです。つまり、jQueryでの操作の際には、IE6～8にはまだHTML5の新要素群が認識できていないのです。じゃあ、どうすれば良いのさということで、解決のアプローチを！

ネイティブのDOM操作と組み合わせる

ネイティブっていうのは、JavaScriptのことを指します。HTML5の新要素群が認識できないIE6～8のようなブラウザに対しては、jQueryのメソッドを使うのではなく、ネイティブのJavaScriptでのDOM操作を上手く組み合わせてあげる必要があります。では作例を。

var testSection = document.createElement('section');
testSection.id = "test";
document.getElementById('追加したい部分のID名').appendChild(testSection);
$('#test').html('これで安心してjQueryでも操作できるよ!');

まず最初に追加したいHTML5の新要素は、document.createElement('ここに追加したいHTML5の要素名')で作成しておいてあげる必要があります。これを変数に格納し、加えてDOM操作がしやすいようにID名も付与（先の変数名.id="ID名"）しておいてあげます。あとは追加したいところに対して、appendChild等で追加します。最後の$('#test')の行にはjQueryの書式を用いているように、この流れで追加してあげたHTML5の新要素については、IE6～8+jQueryでも操作することができます。

ですが、これだけでは万事がOKとは中々いかないですよね。ネイティブのJavaScriptのDOM操作であるappendChild()だと追加したい要素の子ノードリストの末尾にしか追加できないため、他にも要素を追加されていると、順番がうまく制御できません。では、もう少しネイティブのJavaScriptで追加したい場所の選択肢を広げられる方法を模索してみましょう。

追加できる場所の選択肢を広げる

jQueryだと、prepend(), append(), appendTo(), before(), after()などDOM操作は自由自在で、こういう時にこそ、jQueryの偉大さを痛感します。普段、jQueryでDOMを操作している人が、ネイティブのJavaScriptでDOMを操作するとなると不便を感じますが、近しいことができるように以下にいくつかのアプローチ例を示します。

var testSection = document.createElement('section');
testSection.id = "test";
var target = document.getElementById('追加したい部分のID名');
変数targetの親ノード.insertBefore(testSection, target);
$('#test').html('これで安心してjQueryでも操作できるよ!');

var testSection = document.createElement('section');
testSection.id = "test";
var target = document.getElementById('追加したい部分のID名');
target.insertBefore(testSection, target.firstChild);
$('#test').html('これで安心してjQueryでも操作できるよ!');

var testSection = document.createElement('section');
testSection.id = "test";
var target = document.getElementById('追加したい部分のID名');
変数targetの親ノード.insertBefore(testSection, target.nextSibling);
$('#test').html('これで安心してjQueryでも操作できるよ!');

var testSection = document.createElement('section');
testSection.id = "test";
var target = document.getElementById('追加したい部分のID名');
target.insertBefore(testSection, target.childNodes.item(数字));
$('#test').html('これで安心してjQueryでも操作できるよ!');

これでjQueryでHTML5の新要素を追加しようとしていたのと同様のことが、IE6〜8のようにHTML5の新要素を認識していないブラウザにおいてもカバーさせることができるようになったのではないかと思います。