2009-06-22 6 views
6

これは、「HTML5のおかげで、HTMLマークアップがどのようにセマンティックにできるのですか?」という質問をするコミュニティのwikiです。下にHTML5のサンプルページのソースコードがあります。目的は、できるだけ少数のクラスとIDを使用して、非常に使いやすく、アクセス可能なスタイル可能なWebページを作成することです。セマンティックはHTML 5をどのように入手できますか?

また、HTML5の実装を開始する予定はありますか?ドラフトが最終化されるまで10年以上待つか、ブラウザサポートが急速に増えているので、あなたは「アーリーアダプター」になる予定ですか?

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8" /> 
     <title>Site Name &bull; Page Title</title> 
    </head> 
    <body> 
     <nav> 
      <h1><a href="/">Site Name</a></h1> 
      <ul> 
       <li><a href="#">Nav Link</a></li> 
       <li><a href="#">Nav Link</a></li> 
       <li><a href="#">Nav Link</a></li> 
      </ul> 
     </nav> 
     <header> 
      <p>Welcome to the site!</p> 
      <a href="#">Call to action!</a> 
     </header> 
     <section> 
      <aside> 
       <!-- Sidebar --> 
      </aside> 
      <article> 
       <header> 
        <h2>Article Name</h2> 
        <p>Posted by <cite>Kerrick Long</cite> on <time datetime="2009-06-21">June 21</time>.</p> 
       </header> 
       <p>Lorem ipsum dolor sit amet...Aliquam erat volutpat.</p> 
       <figure> 
        <img src="/images/eclipse.jpg" width="640" height="480" alt="Solar Eclipse" /> 
        <label>Here we can see the solar eclipse that happened <time datetime="2009-05-28">recently</time>.</label> 
       </figure> 
       <p>Lorem ipsum dolor...</p> 
      </article> 
     </section> 
     <footer> 
      <p>&copy; <time datetime="2009-01-01">2009</time>, <cite>Site Owner</cite></p> 
     </footer> 
    </body> 
</html> 
+0

最後にボディータグを閉じるのを忘れてしまった! –

+0

彼は正確にそれを忘れていませんでした。インデントがないと、コードブロックから省略されました。 –

+0

インデントの問題を修正しました。ありがとうございます! :-) – Kerrick

答えて

5

10年以上はありません。その期間は「最終補完」であり、すべてのブラウザが仕様のすべての部分をサポートしています。今年末、早期に候補者になり、2011年2月までに承認される予定です。

私は今できるところでそれを段階的に進めています。私がどれくらい使っているかは、聴衆に依存しますが、IEのシェアは絶えず低下しているので、サポートしていないものはもはや殺人者ではありません。特にJohn Resigの「HTML5 shiv」は、

さらに重要なことは、明日(div class = "nav")HTML5タグになるクラスのために、今日のクラスを使用して、私の思考をHTML5行に移行し始めていることです。そうすれば、チャンスが発生したときにHTML5の言葉で考えるのに慣れていきます。

+0

それで、それらの日付はそれをかなり素晴らしいものにします!私はあなたが移行に来るとき、あなたは正しいアイデアを持っていると思う。 – Kerrick

2

私は新しい機能を見て非常に幸せですが、私のクライアントがIE6(および同様のブラウザ)を使用しているという真理はまだ変わっていません。現代のブラウザを使ってみんなが見たいと思うほど、アップグレードする必要のない技術を使わなければならないということではありません。

+1

ユーザーはIE6になっていますが、上のコードを書いてください。きちんとしたjavascript-hackを使ってIE6ユーザに同じセマンティックHTMLを提供することができます:document.createElement( "header"); これで、CSSを通常のようにスタイルできます。 (: – peirix

0

HTML 5を採用している人のための主なドライバは、より良い検索エンジンの配置です。それがなければ、採用する大きな理由はありません。

(たぶん人々が何らかの形でウェブがより多くのデータのようなので、相互運用性が向上するであろう、そして、私はやや確信かもしれませんが、それは過度に楽観ビットに聞こえるかもしれないことを私に納得させることができれば)私は行くよ

2

をブラウザがサポートするとすぐにそれを使用することができます。私が作ったサイトは主にFirefoxユーザが主に訪れる趣味のプロジェクトです。 (トラフィックの80%がFFの最新バージョンを使用しています)。

0

私はjonothan sampsonをエコーし​​ます。妥当な数の人々が古いブラウザを使用している限り、そのジャンプをするのは難しいです。

一方、ブラウザを検出して理にかなったバージョンを送信することはおそらく賢明です。 2つの言語の違いは中程度であるため、ユーザーエージェントに応じてHTML5ページをHTML4に変換することはおそらく実現可能です(おそらく少しサーバー側のxsltを使用します)。それは、私はそれが利用可能になった場合、私はそれを使用するだろうが、私はその技術を発明する人になるとは思っていませんでした。

+0

HTML 5の唯一の部分がセマンティックタグである限り、シンプルなJavascriptは旧式のブラウザにもサポートされます: document.createtag( 'header'); document.createtag( 'footer'); document.createtag( 'section'); document.createtag( 'aside'); document.createtag( 'nav'); document.createtag( 'article'); document.createtag( 'figure'); document.createtag(「時間」); – Kerrick

+0

それはそう、JavaScriptをサポートするブラウザに多くをもたらすことができますが、それは、RSSリーダーやモバイルブラウザ、たとえば、のために何もしません繰り返しますが、私は私よりも賢く、誰かがライブラリを作成することを願っています。情報豊富なHTML5を実際のユーザーのエイジングに最も適したものに変換するt。 – SingleNegationElimination

1

cite要素は、人の名前には適切でないことに注意してください。HTML5「人の名前は仕事のタイトルではなく、人々がその人を仕事の一部と呼んでも、その要素は人々の名前をマークアップするために使用することができます。また、末尾のスラッシュは<meta charset="UTF-8" />である必要はありません。

+0

後ろのスラッシュは悪い考えではありません。一目で、終了タグを期待しないことをすぐに知っています。また、すべての例では、本格的なHTMLの書き込みを行う場合、私はあなたがそれはメタタグだという事実から、ということを知っているよかなり確信してhttp://www.w3schools.com/html5/tag_meta.asp – bobobobo

+0

、それを使用します後続のスラッシュにかかわらず、しかし、。 – Ms2ger

+0

[this](http://wiki.whatwg.org/wiki/Cite_element)を読んでください。 – Knu

0

人々は、ie6などの古いブラウザのjavascriptソリューションについて言及していますが、JavaScriptがサポートされていない場合はどうなりますか?

申し訳ありませんが、これがポイントであるので、意味のあるhtml5とIEのサポートは得られません。

あなたは、常に古いブラウザ

<nav><div id="nav"> some nav stuff</div></nav> 

用ベルトと中括弧を行くことができるしかし、それは私に汚い感じていますか?

関連する問題