-1

私の質問は次のとおりです。

  1. HTML5 のヘッダー、フッター、ナビゲーション、記事、および脇のタグを正しく使用していますか?
  2. 私は div タグを使いすぎていますか?

アドバイスをいただければ幸いです。ありがとう。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>
        Simple Blog!
    </title>
    <link rel="stylesheet" type="text/css" href="simple_blog.css" />
</head>
<body>

<!-- Menu navigation -->
<div id="header">
<nav id="centerDiv">
    <ul class="centerUL">
        <li id="blog"><a href="">Blog</a></li>
        <li id="projects"><a href="">Projects</a></li>
        <li id="about"><a href="">About</a></li>
    </ul>
<nav>
</div>

<!-- Main content -->
<div id="column-holder">
<div id="main-content">

<article>
    <header>
        <h1>Main Content!</h1>
        <p>Published date</p>
    </header>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pharetra aliquam dolor non egestas. Mauris nec urna et tellus sodales pellentesque. Duis consequat porta urna eu sagittis. Nulla rhoncus, eros nec feugiat iaculis, tortor nibh molestie metus, nec fringilla augue lectus non justo. Nullam id tellus magna. Phasellus sit amet mi felis. Donec tempor cursus dignissim.</p>

    <p>Nunc semper enim vitae sem fringilla quis scelerisque tortor mollis. Vivamus ac nibh vitae ipsum adipiscing rutrum sit amet scelerisque dui. Curabitur interdum enim vitae nibh sollicitudin consectetur. Fusce venenatis, diam eu accumsan hendrerit, justo nisi egestas leo, ac vehicula sapien velit et mi. Mauris vehicula metus non lacus sodales feugiat. Praesent felis magna, interdum in consectetur vel, imperdiet vitae libero. Curabitur sed neque non enim eleifend pharetra ac a ante. Phasellus viverra auctor nulla, vitae placerat felis semper at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi risus felis, vehicula id pharetra sed, fermentum nec ligula. Maecenas pulvinar tristique quam, sed porttitor ligula ullamcorper eget. Aliquam at felis ante, sit amet faucibus nibh. Aliquam metus ante, ultrices quis dapibus non, placerat et mauris. Donec at ligula dolor. Phasellus non orci arcu.</p>

    <p>Mauris ut mi ipsum, eget rutrum nibh. Nulla et arcu in diam tristique ultricies eget non lectus. Praesent sit amet leo nisl, in suscipit metus. Mauris sapien eros, lobortis vel lacinia id, pretium sit amet tortor. Aliquam pretium mollis erat, aliquet fermentum velit placerat dictum. Nullam mattis convallis molestie. Aenean ullamcorper faucibus congue. Sed sem erat, bibendum id pulvinar ac, rhoncus sed velit. In posuere erat sit amet leo volutpat eleifend. Ut a odio sit amet nisl viverra euismod.</p> 
    <footer>
        <p><small>Creative Commons...</small></p>
    </footer>   
</article>  
</div>

<!-- Side article -->
<aside>
    <div id="sidebar">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pharetra aliquam dolor non egestas. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pharetra aliquam dolor non egestas. </p>    
</aside>


</div>
</div>
</body>
</html>
4

2 に答える 2

1

悪くはありませんが、よりセマンティックにするために改善すべき点がいくつかあります。

<div id="header">
<nav id="centerDiv">
    ...
<nav>
</div>

navそれ自体がブロック要素です。別の div にネストする必要はありません。headerナビゲーションは (おそらく) サイトのナビゲーションの一部であるため、おそらくグローバル タグ内にナビゲーションを配置します。ロゴか何かもそこに入るでしょう。

<div id="column-holder">
<div id="main-content">

<article>
    ...
</article>  
</div>

1 つの div を使用して「メイン」エリアをマークすることは、通常は問題ありません。ただし、より単純な ID を指定する必要がmainあります。さらに良いのは、mainタグを使用することです。これには、必要なセマンティック ロールも付属しています。

column-holderそれとは別に、 divがそこにあるべきではないと思います。

<footer>
    <p><small>Creative Commons...</small></p>
</footer>

そのようなものを複数入れ子にするだけなら、それはすでにうまくやっていないという兆候です。footerテキストを直接保持できるので、それが<footer>Creative Commons...</footer>短いテキストの場合にのみ実行できます。そこに表示するものがもう少しある場合は、追加の段落で問題ありません。ただし、スタイリングはsmallタグを介して行うべきではありません (css を介してフッター全体をスタイルします)。

<aside>
    <div id="sidebar">
    <p>...</p>
    <p>...</p>    
</aside>

div は閉じられませんでした。ヘッダーについても上記と同じです。div にさらにネストする必要はありません。はasideすでにその仕事をすることができます。

于 2013-04-22T08:09:08.800 に答える