- ベストアンサー
HTML5とブラウザ・SEO、videoについて
現在、XHTMLでサイトを作成しています。HTML5に変更するに当たり、メリットとデメリットを教えてください。 １、XHTMLで作っているサイトで上位表示できている場合、HTML5に乗り換えのメリットはありますか？ ２、HTML5でサイトを作った場合、ブラウザの表示などに影響はありますか？ ３、video を組み込めるという事でしたが、サーバー側での設定などが必要になってくるのでしょうか？今のブラウザ、IE６．７．８、で、うまく反映されるのでしょうか？ サイトは、DreamweaverCS4で作成、CS5.5に変更しています。 よろしくお願いします。
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
＞＞HTML5で、一番の打撃を受けるのはオーサリングツールではないかと・・・。 ＞こちらは、Dreamweaverのようなソフトの事ですよね？前々から独自のタグを加えると ＞いうことは聞いていましたが、 実は、XHTMLを作成するほうがオーサリングツールは楽なのです。XHTMLはXMLで書かれているため、機械的な処理がはるかに楽だからです。 独自のタグ---これは、XHTMLのほうの説明です。この説明は省きます。 HTML4.01では、終了タグを省略できる要素<p><li>・・もあり、それ以上の意味はありませんでしたが、ブラウザ、オーサリングツールがその文書を解析するためのルールは決められていませんでした。XHTMLでは、そもそもそれを否定して処理を目指し、HTML5では、その解釈方法まで決めることにした。 いずれを選ぼうと、ブラウザもオーサリングツールもその意味では楽になるし、著者も互換性に悩む必要もなくなるでしょう。 「セマンティクなマークアップをしろ」と言われると、オーサリングツールを使う人間自身が文脈や文意を解釈する必要があります。ある文書の中でそれがarticleなのかsectionなのかasideか、はたまた、figureなのかは、著者自身が決めなければなりません。ある文書の中で、それがどのような要素であるかを知ることができるのは、今のところ人間の頭脳を使うしかないということです。それが出来れば、わざわざツールの力を頼らなくてもテキストエディタで、<aside></aside>と書けばよい。 また、そんな様々な要素で組み立てられた文書の中のある要素をスタイルシートでプレゼンテーションを決めたい場合、たとえば本文-章(section)中の各項目(section>section)中のfigure要素については、0.9emのサイズで本文の右にフロートさせたいと言う場合、オーサリングツールでそれをしようとすると、その部分をidで指定して配置することになります。それが文書に一箇所しか登場しないならそれで良いですが、今後何箇所も登場するとなると厄介です。なぜなら、オーサリングツールは、未来を予測できませんから・・。 となると著者自身がそのようにHTML <body> <section> <section> <figure> を作成して、スタイルシートも、 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をつくってみるのが良いでしょう。 <body> <div class="header"> <div class="hgroup"> <h1></h1> <h2></h2> </div> <div class="nav"> </div> </div> <div class="section"> <h2></h2> <p><p><p>・・ <div class="aside"> </div> </div> <div class="footer"> </div> </div>
その他の回答 (5)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞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/20110329/358847/?ST=cloud&P=2 )］より 実はHTML4.01の時代から、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より と、書かれていたもので、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#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で、一番の打撃を受けるのはオーサリングツールではないかと・・・。
お礼
ORUKA1951様 ありがとうございます。 >HTML5で、一番の打撃を受けるのはオーサリングツールではないかと・・・。 こちらは、Dreamweaverのようなソフトの事ですよね？前々から独自のタグを加えるということは聞いていましたが、現時点で、ソフトを使わなければ、自分の力量では難しいかな？という感じです。 良い方法があればご伝授下さい。 それとHTML5に関しての、ORUKA1951様のオススメの書籍など情報があれば教えて頂ければ助かります。
- Chaire
- ベストアンサー率60% (79/130)
まず、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!）における対応の仕方を知っているはずなのに、なぜ今になってことさらに心配をするのでしょうか？
お礼
Chaire 様 ありがとうございます。 videoに関してですが、宣伝などでは、いかにも簡単にビデオがサイトに組み込めるという表現の仕方が多かったので、飛びついてびっくりですが。IE6 というは、まだ、しばらくは無視できないのですかね～ IE6がある利点は少ないように思えます。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
私も、一時期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を一緒に含められるとか、自分オリジナルのタグ<mypage:見出し>とかが使えるとか、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を使う 文字を画像に置き換える これらはダメと言うこと。たとえば<div id="wrapper"> <div id="contaner">とか<div id="left">とかじゃなくて、HTML4.01なら、<div class="article"> <div class="section"><div class="nav">としなさいと言うことです。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 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の代わりに <article><section><nav><aside>や<footer><header><figure>が追加されました。 ★SEOで大事なことは、文書をその文書を構成する要素に分解してきちんとマークアップされているかです。 14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )に書かれているようなテクニックやオーサリングツールを使わない。 きちんと文書構造を理解して適切なマークアップをすることはオーサリングツールでは無理ですね。 <body> <header> ヘッダ <nav>ナビゲーション</nav> </header> <section> 本文 </section> <footer> </footer> </body> HTML4.01では、それぞれclass名として使われていたもの。 最近のブラウザは、HTML5の一部機能には対応しています。HTML5では、単にどの要素をどのようにマークアップするかだけでなく、DOMの解釈やエラー処理なども細かく規定されます。HTML4.01ではstrictとtransitinalだったものが「ユーザーが使えるもの」「ブラウザが対応すべきもの」と、より明確に規定されています。--HTML4.01もtransitionalは、「古いブラウザへの対応のため」と書かれていたのに、使われ続けてしまった-- １、XHTMLで作っているサイトで上位表示できている場合、HTML5に乗り換えのメリットはありますか？ 関係ありません。 ２、HTML5でサイトを作った場合、ブラウザの表示などに影響はありますか？ 古いブラウザでは、適切に表示されない場合があります。 ３、video を組み込めるという事でしたが、サーバー側での設定などが必要になってくるのでしょうか？今のブラウザ、IE６．７．８、で、うまく反映されるのでしょうか？ サーバーの設定の必要はありませんが、古いブラウザは対応していません。 ★ウェブ標準、HTML5を本当に意識するなら、オーサリングツールに頼らず、HTML4.01strrictが作成できる技量が必要でしょう。 そしたら、 HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/ )
お礼
ORUKA1951様 ありがとうございます。 XHTMLとHTML4.01は基本的に同じで戻す必要はあるのでしょうか？ W3Cなど、ウェブ標準は意識はしていますが、W3CがHTMLの正当性をうたっていても、実際YAHOOやGoogleなどが取り入れない場合は、技術者の正論と、実用レベルなら、どっちが有利となった場合、後者が優先されるのではないでしょうか？
- localica
- ベストアンサー率52% (202/385)
>実用的には、まだまだということで、解釈していいようですね。 完全移行は時期尚早だと思います。 >標準化まで、１年では、難しいのでしょうか？ HTML5は単なる名称で、本質的には「標準化技術」の話だと思います。 ブラウザが標準化されれば、OSへの依存が少なくなりM社は大変かもしれません。 簡単に言えば、組込みOSにブラウザを載せたデバイスがあればほとんどの人はPCが必要なくなります。 テレビとか、カーナビとか、画面が表示できれば何でも構わないということです。 システムで言えば、例えば駅の券売機やPOSなど専用機は不要となりタッチパネル搭載の低価格化が可能かもしれません。 もちろん前提となるインフラの整備など、問題や紆余曲折はあるので簡単ではないでしょう。
お礼
ありがとうございます。 DreamweaverCS5.5でHTML5でサイトを作って、Videoなどの要素を入れなくても、表示で不具合が出るのでしょうか？ DreamweaverCS5.5せ制作した場合、XHTMLで作った方が今のところ、良い、ということですね。
- localica
- ベストアンサー率52% (202/385)
A1 メリットはよりインタラクティブな表現が可能となる。 プラグインに依存しなくても良くなる。 標準化すればさらに大きなメリットが出てくる。 デメリットはまだ対応ブラウザが少ない。 A2 ある。 A3 IEは8以上が対応ですが、ほかにも制限がある。 http://www.atmarkit.co.jp/fwcr/design/benkyo/html5_09/01.html
お礼
localica 様 ありがとうございます。 良いことばかり宣伝していますが、実用的には、まだまだということで、解釈していいようですね。 標準化まで、１年では、難しいのでしょうか？ Videoなど組み込めれば、大きな戦力になると思うのですが・・・・・
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_3_thumbnail_img_sm.png)
お礼
大変勉強になりました。ありがとうございました。