コメント：構造が不足しているため、優れたHTMLページでさえ対処するのが困難です。タイトルのレベルを分析して、各部分がどのように分割されるかを確認する必要があります。サイドバー、フッター、ヘッダー、ナビゲーションバー、メインコンテンツ領域、および記事は、共通DIV要素で表されます。 HTML 5は、これらの一般的な構造を識別するための新しい要素を追加しました：・Sectio
構造が不足しているため、優れたHTMLページでさえ対処するのが困難です。タイトルのレベルを分析して、各部分がどのように分割されるかを確認する必要があります。サイドバー、フッター、ヘッダー、ナビゲーションバー、メインコンテンツ領域、および記事は、共通DIV要素で表されます。 HTML 5は、これらの一般的な構造を識別するための新しい要素を追加します。
・セクション：これは本の章やセクションである可能性があり、実際にはHTML 4に独自のタイトルを持つものは何でも可能です
・ヘッダー：ページに表示されるヘッダー。ヘッド要素とは異なります
フッター：フッター;電子メールに署名を表示できます
NAV：他のページへのリンクのセット
記事：ブログ、雑誌、記事の編集などの記事
典型的なブログのホームページを考えてみましょう。このホームページには、上部にヘッダーがあり、下部にフッターがあり、いくつかの記事、ナビゲーションエリア、サイドバーがあります。コード1の典型的なブログページを参照してください。
<html>
<head>
<title> mokka mit schlag </title>
</head>
<body>
<div id = page>
<div id = header>
<h1> <a href => mokka mit schlag </a> </h1>
</div>
<div id = container>
<div id = center class = column>
<div class = post id = post-1000572>
<h2> <a href =
/blog/birding/2007/04/23/spring-comes-and-goes-in-ssex-county/>
春はサセックス郡に来ます（そして行きます）</a> </h2>
<div class = entry>
<p>昨日、私はブルックリンバードクラブに参加しました
ニュージャージー州西部への毎年の旅行、特にハイパー
腐植、比較的最近発見されたホットスポット。それ
私たちが到着したとき、素敵な冬の朝から始まりました
午前7時30分にサイトで、春に進みました
午前10時、そして10時15分までに初夏に到達しました。 </p>
</div>
</div>
<div class = post id = post-1000571>
<h2> <a href =
/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/>
しかし、それはあなたのライフリストにカウントされますか？</a> </h2>
<div class = entry>
<p>今すぐ行くことができるようです<a
href =
2007/04/cone_sf>インターネット経由のバードウォッチング</a>。私
まだテストすることができていません（20ユーザー
どうやら制限）しかし、これは確かにクールです。
個人的には、それが置き換えるとは想像できません
実際、少量だけでフィールドに出ています。
一方、私はいつもそれをかなり見つけました
もはやできない年配の鳥に会うのは悲しい
双眼鏡を安定させるか、公園に着いてください。私はできます
これが彼らにとって興味があるかもしれないと想像してください。で
少なくとも1人の年配の鳥がテレビで大きな年を過ごしました。
彼はもうあまり出られませんでした。確かに
それを上にします。</p>
</div>
</div>
</div>
<div class = navigation>
<div class = alignleft>
<a href =/blog/page/2/>«_fcksavedurl =/blog/page/2/>«以前のエントリ</a>
</div>
<div class = align right> </div>
</div>
</div>
<div id = right class = column>
<ul id = sidebar>
<li> <h2>情報</h2>
<ul>
<li> <a href =/blog/comment-policy/>コメントポリシー</a> </li>
<li> <a href =/blog/todo-list/> dodo list </a> </li>
</ul> </li>
<li> <h2>アーカイブ</h2>
<ul>
<li> <a href = '/blog/2007/04/'> 2007年4月</a> </li>
<li> <a href = '/blog/2007/03/'> 2007年3月</a> </li>
<li> <a href = '/blog/2007/02/'> 2007年2月</a> </li>
<li> <a href = '/blog/2007/01/'> 2007年1月</a> </li>
</ul>
</li>
</ul>
</div>
<div id = footer>
<p> Copyright 2007 Elliotte Rusty Harold </p>
</div>
</div>
</body>
</html>
正しいくぼみがあっても、これらのネストされたdivはまだ非常に混乱していると感じています。 HTML 5では、これらの要素をセマンティック要素に置き換えることができます。HTML5で書かれたコード2の典型的なブログページを参照してください
<html>
<head>
<title> mokka mit schlag </title>
</head>
<body>
<ヘッダー>
<h1> <a href => mokka mit schlag </a> </h1>
</header>
<section>
<記事>
<h2> <a href =
/blog/birding/2007/04/23/spring-comes-and-goes-in-ssex-county/>
春はサセックス郡に来ます（そして行きます）</a> </h2>
<p>昨日、私はブルックリンバードクラブに参加しました
ニュージャージー州西部への毎年の旅行、特にハイパー
腐植、比較的最近発見されたホットスポット。それ
私たちが到着したとき、素敵な冬の朝から始まりました
午前7時30分にサイトは10:00頃に春に進みました
AM、そして10:15までに初夏に到達しました。 </p>
</article>
<記事>
<h2> <a href =
/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/>
しかし、それはあなたのライフリストにカウントされますか？</a> </h2>
<p>今すぐ行くことができるようです<a
href =
2007/04/cone_sf>インターネット経由のバードウォッチング</a>。私
まだテストすることができていません（20ユーザー
どうやら制限）しかし、これは確かにクールです。
個人的には、それが置き換えるとは想像できません
実際、少量だけでフィールドに出ています。
一方、私はいつもそれをかなり見つけました
もはやできない年配の鳥に会うのは悲しい
双眼鏡を安定させるか、公園に着いてください。私はできます
これが彼らにとって興味があるかもしれないと想像してください。で
少なくとも1人の年配の鳥がテレビで大きな年を過ごしました。
彼はもうあまり出られませんでした。確かに
それを上にします。</p>
</article>
<nav>
<a href =/blog/page/2/>«_fcksavedurl =/blog/page/2/>«以前のエントリ</a>
</nav>
</section>
<nav>
<ul>
<li> <h2>情報</h2>
<ul>
<li> <a href =/blog/comment-policy/>コメントポリシー</a> </li>
<li> <a href =/blog/todo-list/> dodo list </a> </li>
</ul> </li>
<li> <h2>アーカイブ</h2>
<ul>
<li> <a href = '/blog/2007/04/'> 2007年4月</a> </li>
<li> <a href = '/blog/2007/03/'> 2007年3月</a> </li>
<li> <a href = '/blog/2007/02/'> 2007年2月</a> </li>
<li> <a href = '/blog/2007/01/'> 2007年1月</a> </li>
</ul>
</li>
</ul>
</nav>
<フッター>
<p> Copyright 2007 Elliotte Rusty Harold </p>
</footer>
</body>
</html>
今ではDivは必要ありません。クラス属性を自分で設定する必要はなく、標準要素名から各部分の意味を推測できます。これは、オーディオブラウザー、モバイルブラウザ、その他の非標準ブラウザにとって特に重要です。
（つづく）