HTML5とブラウザ・SEO、videoについて

Question

現在、XHTMLでサイトを作成しています。HTML5に変更するに当たり、メリットとデメリットを教えてください。

１、XHTMLで作っているサイトで上位表示できている場合、HTML5に乗り換えのメリットはありますか？

２、HTML5でサイトを作った場合、ブラウザの表示などに影響はありますか？

３、video　を組み込めるという事でしたが、サーバー側での設定などが必要になってくるのでしょうか？今のブラウザ、IE６．７．８、で、うまく反映されるのでしょうか？

サイトは、DreamweaverCS4で作成、CS5.5に変更しています。

よろしくお願いします。

ORUKA1951 · Accepted Answer

＞＞HTML5で、一番の打撃を受けるのはオーサリングツールではないかと・・・。＞こちらは、Dreamweaverのようなソフトの事ですよね？前々から独自のタグを加えると＞いうことは聞いていましたが、　実は、XHTMLを作成するほうがオーサリングツールは楽なのです。XHTMLはXMLで書かれているため、機械的な処理がはるかに楽だからです。　独自のタグ---これは、XHTMLのほうの説明です。この説明は省きます。　HTML4.01では、終了タグを省略できる要素

・・もあり、それ以上の意味はありませんでしたが、ブラウザ、オーサリングツールがその文書を解析するためのルールは決められていませんでした。XHTMLでは、そもそもそれを否定して処理を目指し、HTML5では、その解釈方法まで決めることにした。　いずれを選ぼうと、ブラウザもオーサリングツールもその意味では楽になるし、著者も互換性に悩む必要もなくなるでしょう。　「セマンティクなマークアップをしろ」と言われると、オーサリングツールを使う人間自身が文脈や文意を解釈する必要があります。ある文書の中でそれがarticleなのかsectionなのかasideか、はたまた、figureなのかは、著者自身が決めなければなりません。ある文書の中で、それがどのような要素であるかを知ることができるのは、今のところ人間の頭脳を使うしかないということです。それが出来れば、わざわざツールの力を頼らなくてもテキストエディタで、と書けばよい。　また、そんな様々な要素で組み立てられた文書の中のある要素をスタイルシートでプレゼンテーションを決めたい場合、たとえば本文-章(section)中の各項目(section>section)中のfigure要素については、0.9emのサイズで本文の右にフロートさせたいと言う場合、オーサリングツールでそれをしようとすると、その部分をidで指定して配置することになります。それが文書に一箇所しか登場しないならそれで良いですが、今後何箇所も登場するとなると厄介です。なぜなら、オーサリングツールは、未来を予測できませんから・・。　となると著者自身がそのようにHTML 　

　を作成して、スタイルシートも、 section>section figure{} と指定しなければなりません。そうすると、オーサリングツールで作成するよりはるかにシンプルで、後日メンテナンスも極めて楽になるでしょう。　この二点がオーサリングツール・・・というよりオーサリングツールに頼っての製作の打撃になるでしょう。オーサリングツールは、videoやcanvas、SVGの作成---これは手で書くのは無理----に任せ、HTML自体のマークアップやCSSの製作は著者自身が製作する形にならざるを得ないでしょう。＞現時点で、ソフトを使わなければ、自分の力量では難しいかな？という感じです。　HTML自体のマークアップは、「HTML5の仕様書」や「HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/ )」を読めば難しくは無いでしょう。HTML自体は、もともと人がマークアップすることを目的に作成されています(XMLと違い)から。HTML5では、「著者が使えるもの」と明確に決められましたし、XMLと異なり、様々な書き方が出来ますからHTML4.01よりはるかに簡単になったと思います。　video,canvas,audio,SVGは、オーサリングツールに任せればよい。＞それとHTML5に関しての、ORUKA1951様のオススメの書籍など情報があれば教えて頂ければ　こちらが難題、進歩の早い世界ですから半年前の最先端が気がついたら陳腐な話になっている。昨日まで世を挙げてXHTMLと言っていたのに、気がついたらHTML5です。(^^) 　私は基本的には、ネット上の情報を追いかけているのが現実です。それでもあえてと言われれば・HTML5&API入門: 白石俊平, 株式会社あゆた: 本 ( http://www.amazon.co.jp/HTML5-API%E5%85%A5%E9%96%80-%E7%99%BD%E7%9F%B3-%E4%BF%8A%E5%B9%B3/dp/4822284220/ref=sr_1_10?s=books&ie=UTF8&qid=1316793165&sr=1-10 ) ・徹底解説HTML5マークアップガイドブック: 羽田野太巳: 本 ( http://www.amazon.co.jp/%E5%BE%B9%E5%BA%95%E8%A7%A3%E8%AA%ACHTML5%E3%83%9E%E3%83%BC%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97%E3%82%AC%E3%82%A4%E3%83%89%E3%83%96%E3%83%83%E3%82%AF-%E7%BE%BD%E7%94%B0%E9%87%8E%E5%A4%AA%E5%B7%B3/dp/4798025291/ref=pd_bxgy_b_img_b ) ・・・・などかな? 基礎知識としては・連載インデックス「HTML5“とか”アプリ開発入門」 - ＠IT ( http://www.atmarkit.co.jp/fwcr/design/index/index_html5appli.html ) とか　現状では、資料の豊富なHTML4.01strictをしっかり身に着けるとに、「HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/ )」のセマンティクな要素の使い方を参考にして、HTML4.01strictをつくってみるのが良いでしょう。　　

・・　　

ORUKA1951 · Answer

＞XHTMLとHTML4.01は基本的に同じで戻す必要はあるのでしょうか？

　ありません。

＞W3Cなど、ウェブ標準は意識はしていますが、W3CがHTMLの正当性をうたっていても、実際YAHOOやGoogleなどが取り入れない場合は、技術者の正論と、実用レベルなら、どっちが有利となった場合、後者が優先されるのではないでしょうか？

　そういう問題ではありません。Googleについて、順番から言うと先日IE6への対応をやめ(2010/3--Yahoo!Japanも2010/121)、さらにIE7への対応も停止すると公表しています。しかもHTML5に対応するIE9はいまだにシェア50%を超えるWindowsXPにはインストールできません。(しかし、MicrosoftはいずれWindowsXPに対してもHTML5対応のブラウザ(IE9)がWindowsXPにインストールできる対応を迫られると見ています。)
　Microsoftがどう対応するか（新しいOS(+PC)に半ば強制的に移行させるか、XPをサポートし続けるか）に関わらず、世の中はHTML5の方向に確実に進んでいます。そのため、技術者は、否が応でもHTML5への対応を迫られているのです。W3CのXHTMLへの完全移行の目論見(技術者の正論)が外れて、HTML5への移行がW3Cに方針になったのは、「Yahoo!やGoogle、Appleなどの意向が優先された」ためです。『技術者が実用レベルに従わざるを得ない』その実例がW3Cなのですよ。

　少し古い記事ですが
HTML5が持つ本当の意味－＠IT ( http://www.atmarkit.co.jp/news/200801/25/html.html )

　ただ、見逃してならないのは、派手なcanvas,audio,videoタグや、API,DOMの話題だけではなく、セマンティックなHTMLマークアップです。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
単に、操作性や機能だけではない。HTML5の特徴の一つにセマンティックであることが挙げられる。セマンテックとは、情報を効率よく検索・収集するための技術のこと。HTML5では、そこに含まれるそれぞれのコンテンツの意味をメタデータとして持たせるようにタグを記述する。
　例えば、現在はWebページ内でブロックを区切るのに、div要素を使うことが多い。divはコンテンツの“入れ物”でしかなく、そこに入れられているコンテンツが何なのかは示されない。HTML5ではそれに代わって、article（記事）やnav（ナビゲーションリンク）などを使うことになる。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML5の波 - 変わるブラウザー：ITpro( http://itpro.nikkeibp.co.jp/article/COLUMN/20110 … )］より

　実はHTML4.01の時代から、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

と、書かれていたもので、Googleなどの検索エンジンは、<div class="section"><div class="nav">というclass名を解釈してきたのですが、現実には、著者の怠慢か無理解のため、「セマンティックなマークアップ」を不必要と思っている人が多いのも現実です。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
3.2.1 Semantics
　Elements, attributes, and attribute values in HTML are defined (by this specification) to have certain meanings (semantics). For example, the ol element represents an ordered list, and the lang attribute represents the language of the content.
　Authors must not use elements, attributes, or attribute values for purposes other than their appropriate intended semantic purpose. Authors must not use elements, attributes, or attribute values that are not permitted by this specification or other applicable specifications.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［3.2 Elements — HTML5( http://www.w3.org/TR/html5/elements.html#semanti … )］より

　オーサリングを使う場合、最も問題になるのがセマンティック(意味に従った)マークアップなのです。文書の内容は著者自身でないとわからないのですから、class名やid名はオーサリングツールに頼ることは不可能です。もし、これが出来ていれば、実際の作業は格段に用意になるはずです。
　たとえば、CSSに
div.header div.nav ul,div.header div.nav ul li{display:block;list-style-none;margin:0;padding:0;}
div.header div.nav ul li{float:left;width:20%;}
と、HTMLを見なくてもスタイルシートが書けますね。
　残念ながらオーサリングツールでは、このようなセレクタの指定は不可能なのです。だって意味を理解できないのですから・・

　HTML5で、一番の打撃を受けるのはオーサリングツールではないかと・・・。

というclass名を解釈してきたのですが、現実には、著者の怠慢か無理解のため、「セマンティックなマークアップ」を不必要と思っている人が多いのも現実です。【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 3.2.1 Semantics 　Elements, attributes, and attribute values in HTML are defined (by this specification) to have certain meanings (semantics). For example, the ol element represents an ordered list, and the lang attribute represents the language of the content. 　Authors must not use elements, attributes, or attribute values for purposes other than their appropriate intended semantic purpose. Authors must not use elements, attributes, or attribute values that are not permitted by this specification or other applicable specifications. ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［3.2 Elements — HTML5( http://www.w3.org/TR/html5/elements.html#semantics-0 )］より　オーサリングを使う場合、最も問題になるのがセマンティック(意味に従った)マークアップなのです。文書の内容は著者自身でないとわからないのですから、class名やid名はオーサリングツールに頼ることは不可能です。もし、これが出来ていれば、実際の作業は格段に用意になるはずです。　たとえば、CSSに div.header div.nav ul,div.header div.nav ul li{display:block;list-style-none;margin:0;padding:0;} div.header div.nav ul li{float:left;width:20%;} と、HTMLを見なくてもスタイルシートが書けますね。　残念ながらオーサリングツールでは、このようなセレクタの指定は不可能なのです。だって意味を理解できないのですから・・　HTML5で、一番の打撃を受けるのはオーサリングツールではないかと・・・。

Chaire · Answer

まず、HTML5 というのは「HTML 文書に対するブラウザの解釈」を統一したものです。

現在、ウェブには HTML 2.0、3.2、4.0 S/T/F、XHTML 1.0 S/T/F、1.1、および「壊れた」X/HTML 文書（タグスープなどと呼ばれます）が溢れています。このうち、「壊れた」X/HTML 文書は論外としても、XML ベースに移行することで 50 年、100 年先でもデータを読めるようにする、というのが XHTML の目的のひとつでした（たかだか 20 年前のワープロ文書でさえ、読み出しづらい現状と比べてみて下さい）。

しかし、XHTML への移行は事実上失敗しました。そこで、XHTML を使わずに「50 年、100 年先でもデータを読めるようにする」にはどうすれば良いか。別の試みの 1 つが HTML5 です。HTML5 では文書の形式を統一するのでなく、ブラウザの解釈を統一することで、どんなに「古い」あるいは「壊れた」文書であっても読み出せるようにしたわけです。今後のブラウザは、どの文書形式であっても、基本的には HTML5 のルールで解釈します。

HTML5 の勧告がまだ先であることを懸念する向きもありますが、そもそも HTML のバージョンは今年の一月に廃止されています。今後の HTML はバージョンなしで、絶えず修正される「生きた仕様」ということになりました。

一応、W3C に提出してしまった「HTML5」が勧告されるまでは慣習的に "5" をつけますが、もはやバージョン番号に意味はなく、勧告を待つ必要性も薄れました。

---
> XHTMLで作っているサイトで上位表示できている場合、HTML5に乗り換えのメリットはありますか？

ありません。上に述べた通り、今後は XHTML で作ったサイトであっても、text/html で提供される限りは HTML5 のルールで解釈されるからです（実は、今までもそうでした。現状の追認にすぎません）。

だったら、新しく作るページは最初から HTML5 で作ろう、というのはアリです。しかし、今まで作ったページを HTML5 で書き直す必要はない、ということです。

> HTML5でサイトを作った場合、ブラウザの表示などに影響はありますか？

既存の要素・属性を使う限り、ありません。上に述べた通り、HTML5 の主目的は既存の文書をできるだけそのまま使えるようにすることだからです。HTML5 を紹介するのに、ことさらに「新機能、新要素！」を強調する傾向がありますが、それは HTML5 の一部の側面でしかありません。

もちろん、新しく導入されたもの（video など）を使えば影響は出るでしょう。しかし繰り返しますが、今まで作ったページを HTML5 で書き直す必要などありません。今までちゃんと節構造を考慮してマークアップしていたのなら、section なんか使わずに今までのやり方を続ければ良いのです（見出しがあれば暗黙のセクションが作られるのですから）。

> video

IE6 が video を解釈することはありません（そのうち Flash と連携した JS コントローラが出るかもしれませんが）。しかし、video の使い方をよく見て下さい。

<video ...>
　<source src='video.mp4'>
　<source src='video.ogv'>
　...
</video>

このように複数の source 要素を持ち、ブラウザはこの中から再生可能なものを選ぶことができます。ちなみに source は空要素ですので、対応していないブラウザで何かが表示されることはありません。

であれば、もし IE6 を考慮するなら、IE6 が再生できそうな形式だけでもちょこんとリンクを置けば良い。

<a href="video.mp4">IE6 用</a>

これをクリックすると再生されるかダウンロードされるか分かりませんが、少なくとも IE6 利用者も動画を入手し、何らかの手段で再生することは可能です。

これらは、HTML 4.0 の frame、iframe、fieldset などの未対応問題、object のフォールバックとほとんど同じです。つまり、我々は 15 年前から互換性についてのノウハウを持っており、過渡期（Transitional!）における対応の仕方を知っているはずなのに、なぜ今になってことさらに心配をするのでしょうか？

このように複数の source 要素を持ち、ブラウザはこの中から再生可能なものを選ぶことができます。ちなみに source は空要素ですので、対応していないブラウザで何かが表示されることはありません。であれば、もし IE6 を考慮するなら、IE6 が再生できそうな形式だけでもちょこんとリンクを置けば良い。 IE6 用これをクリックすると再生されるかダウンロードされるか分かりませんが、少なくとも IE6 利用者も動画を入手し、何らかの手段で再生することは可能です。これらは、HTML 4.0 の frame、iframe、fieldset などの未対応問題、object のフォールバックとほとんど同じです。つまり、我々は 15 年前から互換性についてのノウハウを持っており、過渡期（Transitional!）における対応の仕方を知っているはずなのに、なぜ今になってことさらに心配をするのでしょうか？

ORUKA1951 · Answer

　私も、一時期XHTMLで作成していましたが、現在はHTML4.01に戻しています。 XHTMLは、XML方式で書き直されたHTMLです。XHTML1.0は、HTML4.01をそのままXML化したもの。XHTML1.1は、XHTML1.0(HTML4.01)strictと基本的に同じ。 XML 　　　　　　　　　　　　　　XHTML1.0 → HTML1.1 → XHTML2.0(×)　　XHTML5 ----------------------／----------------------------------------　　∥ 　HYML3.2 → HTML4.01　―――――――――――――――――――――→ HTML5 　XMLの長所は、XMLとして利用できることで、他のXMLを一緒に含められるとか、自分オリジナルのタグとかが使えるとか、XMLとして他のアプリケーションで使えるとか・・　HTML5は、XHTML5も含みますが、勧告予定はまだ先です。現状でサイトをHTML5で作成する意味は、試験的目的以外は無いでしょう。また、videoやcanvusを使いたいとか特段の理由がある場合でしょう。　HTML5は、HTML4.01strictの改訂版ですから、HTML4.01strictをきちんと身に着けていれば、 HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/ ) 　を追加して学べばよい。 ★合わせてウェブ標準とは何かも学ぶこと　　HTMLを文書構造にしたがってマークアップすること　・・レイアウトのためにHTMLをマークアップしないこと　　　例)レイアウトのためだけにtableをつかう。レイアウトのためにDIVを使う　　　　　文字を画像に置き換える　　　　これらはダメと言うこと。たとえば

とか

とかじゃなくて、HTML4.01なら、

としなさいと言うことです。【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML4.01 7.5.4要素のグループ化: DIV要素とSPAN要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より　ここでいう構造とは文書構造　HTML5では、これら構造を示すclassの代わりに

や

localica · Answer

>実用的には、まだまだということで、解釈していいようですね。

完全移行は時期尚早だと思います。

>標準化まで、１年では、難しいのでしょうか？

HTML5は単なる名称で、本質的には「標準化技術」の話だと思います。
ブラウザが標準化されれば、OSへの依存が少なくなりM社は大変かもしれません。

簡単に言えば、組込みOSにブラウザを載せたデバイスがあればほとんどの人はPCが必要なくなります。
テレビとか、カーナビとか、画面が表示できれば何でも構わないということです。
システムで言えば、例えば駅の券売機やPOSなど専用機は不要となりタッチパネル搭載の低価格化が可能かもしれません。

もちろん前提となるインフラの整備など、問題や紆余曲折はあるので簡単ではないでしょう。

localica · Answer

A1
メリットはよりインタラクティブな表現が可能となる。
プラグインに依存しなくても良くなる。
標準化すればさらに大きなメリットが出てくる。

デメリットはまだ対応ブラウザが少ない。

A2
ある。

A3
IEは8以上が対応ですが、ほかにも制限がある。
http://www.atmarkit.co.jp/fwcr/design/benkyo/html5_09/01.html

HTML5とブラウザ・SEO、videoについて

＞＞HTML5で、一番の打撃を受けるのはオーサリングツールではないかと・・・。

＞XHTMLとHTML4.01は基本的に同じで戻す必要はあるのでしょうか？

まず、HTML5 というのは「HTML 文書に対するブラウザの解釈」を統一したものです。

私も、一時期XHTMLで作成していましたが、現在はHTML4.01に戻しています。

>実用的には、まだまだということで、解釈していいようですね。

A1

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

　私も、一時期XHTMLで作成していましたが、現在はHTML4.01に戻しています。