1

HTML5/CSS3 で新しい Web サイトを開発しています。PSD ファイルを HTML5 / CSS3 に変換するとき、HTML5 Web サイトの正しいマークアップは何か疑問に思います。

以下は私のウェブサイトの単純なワイヤーフレームです。ご覧のとおり、少なくともさまざまな領域で、ウェブサイトを全幅にしたいと考えています。

これはレイアウトです：

ここでわかるように、ホームページに別のセクションを設けて情報を提供したいと考えています。

ご覧のとおり、ホームページに別のセクションを設けて情報を提供したいと考えています。

そして、私はこのマークアップを思いつきました：

すべてのリストをコピーすると表示されなくなるため、このコードのコンテンツ、テキスト、画像は省略されています。画像またはテキストが下のコメントに直面する場所。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>

<!-- Meta Tags -->

<!-- Stylesheets -->
<link href="css/style.css" rel="stylesheet">
<link href="css/960.css" rel="stylesheet">

<!-- Icons -->
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-retina.png">

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>

<body>

<!-- Start container website -->
<header id="header">
    <div class="container_12">
            <div class="grid_12">

 <!-- // Here will be position the logo with a link \\ -->

                <nav id="primary-navwrapper">
                 <!-- // Here will be an unordered list with menu items \\ -->

            </nav>

        </div><!-- End .grid_12 -->

    <div class="clear"></div><!-- End .clear -->
    </div><!-- End .container_12 -->
</header><!-- End header -->

<section id="hero">
    <div class="sliderbox">

         <!-- // An list of image for a slider \\ -->

    </div><!-- End .sliderbox -->

</section><!-- End section#hero -->

<section id="introduce">
    <article class="container_12">

          <!-- // 3 colomn with a h-tag and some text inside a paragraph \\ -->

          <!-- // 3 colomn with a h-tag and some text inside a paragraph \\ -->

          <!-- // 3 colomn with a h-tag and some text inside a paragraph \\ -->


    </article><!-- End article.container_12 -->


    <article class="container_12">
        <div class="grid_12">

          <!-- // A image tag \\ -->

        </div><!-- End .grid_12 -->

    </article><!-- End article.container_12 -->

</section><!-- End section#introduce -->

<hr class="dark-grey"> <!-- Divider for the section -->

<section id="work" class="alt">
    <article class="container_12">

           <!-- // a h-tag and some text inside a paragraph + 3 column portfolio items \\ -->

    </article><!-- End article.container_12 -->

</section><!-- End section#work.alt -->

<hr> <!-- Divider for the section -->

<section id="blog" class="even">
    <article class="container_12">
        <aside class="grid_4">

            <!-- Sidebar with some text -->

        </aside><!-- End aside.grid_4 -->

        <ul class="recentbox">

             <!-- List of 2 latest blog items -->

        </ul><!-- End ul.recentbox -->

    </article><!-- End article.container_12 -->

    <article class="container_12">
        <div class="grid_12">

            <!-- Contact banner -->

        </div><!-- End .grid_12 -->
    </article><!-- End article.container_12 -->

</section><!-- End section#blog.even -->

<footer id="footer">

     <!-- Footer markup here -->

</footer><!-- End footer -->


</body>
</html>

いくつかの追加情報。ご覧のとおり、ヘッダーの<header>-タグから始めます。その後、グリッド 960 を使用できるようにするために、- タグを使用して-タグでいくつかの領域を設定します。その中に<section>-タグIテキスト、画像などを設定します。<article>class<article class="container_12"><article>

知っておくと良いことは、よく使用するいくつかのセクションで記事にタグを付けるということです。これを行うのは、特定のセクションのいくつかの記事を区別するためです。With Articles は互いに関連性がありますが、投稿する 1 つの記事が異なります。

これまでの私のマークアップと、あなたがどのように取り組むかについて、あなたの意見を聞くのが大好きです.

ありがとうございました。

4

1 に答える 1

1

あなたのマークアップは完全に受け入れられます。id タグをそれほど重くするのではなく、よりオブジェクト指向のアプローチで CSS を作成することをお勧めします。詳細については、http: //coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-directional-css-oocss/を参照してください。

それ以外の場合、マークアップは問題ありません。

于 2013-02-14T14:57:18.637 に答える