これは、「HTML5のおかげで、HTMLマークアップがどのようにセマンティックにできるのですか?」という質問をするコミュニティのwikiです。下にHTML5のサンプルページのソースコードがあります。目的は、できるだけ少数のクラスとIDを使用して、非常に使いやすく、アクセス可能なスタイル可能なWebページを作成することです。セマンティックはHTML 5をどのように入手できますか?
また、HTML5の実装を開始する予定はありますか?ドラフトが最終化されるまで10年以上待つか、ブラウザサポートが急速に増えているので、あなたは「アーリーアダプター」になる予定ですか?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Site Name • 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>© <time datetime="2009-01-01">2009</time>, <cite>Site Owner</cite></p>
</footer>
</body>
</html>
最後にボディータグを閉じるのを忘れてしまった! –
彼は正確にそれを忘れていませんでした。インデントがないと、コードブロックから省略されました。 –
インデントの問題を修正しました。ありがとうございます! :-) – Kerrick