HTML5
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href=""> <!--[if lte IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!--[if lte IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]--> <style> article, aside, dialog, figure, footer, header, main, menu, nav, section { display: block; } </style> <script src=""></script> </head> <body> <div id="container"> <header> <h1><span>★</span>うちのにゃんこ<span>★</span></h1> <p>我が家のアイドル、にゃんこ達を紹介します！</p> <nav> <ul> <li>我が家のにゃんこ紹介</li> <li>飼い主紹介</li> <li>猫写真募集</li> </ul> </nav> </header> <section id="content"> <h1>我が家のにゃんこ紹介</h1> <section id="subaru"> <h1>●すばる（白キジトラ・オス）</h1> <p>目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。幼少期を1Kアパートで過ごしたせいか、他のネコにあまり関心がないらしく、性格はいたってマイペース。<br> 段ボール箱のかどや柱で爪とぎをするのが大好き。</p> <p><img src="img/subaru.jpg" alt="subaru"></p> <dl> <dt>特徴：</dt> <dd>大きな目と耳。まがったしっぽ。</dd> <dt>性格：</dt> <dd>マイペース。</dd> </dl> <p><a href="#">もっと見る→</a></p> </section><!-- /#subaru --> <section id="gureko"> <h1>●ぐれ子（灰色毛皮・メス）</h1> <p>生まれたての時はアメショーのような模様があったはずなのに、成長するに従ってただの灰色ネコに。長毛種の血が少し混じっているのか毛皮がフワフワしていて家族から「綿ぼこり」呼ばわりされている。<br> しゃがれ声と貫禄のある顔つきからは想像できないほどの甘え上手で、初対面でも誰彼かまわずゴロゴロ擦り寄ってくるのでお客さんにはめっぽう評判が良い。</p> <p><img src="img/gureko.jpg" alt="gureko"></p> <dl> <dt>特徴：</dt> <dd>しゃがれ声。ゴロゴロすりすり攻撃。</dd> <dt>性格：</dt> <dd>甘え上手。腹黒。</dd> </dl> <p><a href="#">もっと見る→</a></p> </section><!-- /#gureko --> <section id="nezuko"> <h1>●ねず子（白茶トラ・メス)</h1> <p>ぐれ子と共に我が家にやってきた白茶トラの女の子。ぐれ子と違って典型的な「ネコっぽい」性格。ツンデレというよりむしろツンツン（涙）。ぐれ子との勢力争いに敗北して家を追い出され、現在ほぼ半ノラ状態。<br> 見た目はもともと純日本猫風のキレイ系だったけど、ノラ生活中にカラスに攻撃され、片目を失う。孤高の猫。</p> <p><img src="img/nezuko.jpg" alt="nezuko"></p> <dl> <dt>特徴：</dt> <dd>片目。小顔。</dd> <dt>性格：</dt> <dd>プライド高い。人間に対しては女王様。</dd> </dl> <p><a href="#">もっと見る→</a></p> </section><!-- /#nezuko --> </section><!-- /#content --> <section id="profile"> <h1>飼い主紹介</h1> <dl> <dt>H.N. ：</dt> <dd>roka404</dd> <dt>仕事 ：</dt> <dd>フリーランスでWeb関係のお仕事してます</dd> <dt>mail ：</dt> <dd><a href="#">info@hogehoge.com</a></dd> <dt>Web ：</dt> <dd><a href="#">http://www.hogehoge.com/</a></dd> </dl> </section><!-- /#profire --> <section id="entry"> <h1>猫写真募集</h1> <p>ギャラリーページを企画中のため、みなさまの大切なにゃんこ様を紹介してください♪<br> 10にゃんこ集まったら紹介ページを開設します！</p> <p><a href="#">応募はこちら→</a></p> </section><!-- /#entry --> <footer> <p><small>Copyright © UCHI NO NYAN'S All Rights Reserved.</small></p> </footer> </div><!-- /#container --> </body> </html>
HTML 5 Outlinerで正しい文書構造になっているか確認する。