Question

我需要从下面所示的布局中编写HTML5语义标记。

到目前为止，我的HTML代码如下。我不确定我所拥有的是语义。有什么建议吗？

<body>
    <header>
        <h1>slogen+logo</h1>
    </header>
    <div id="login_or_register"></div>
    <nav><!--main menu-->
        <ul>
            <li>home</li>
            <li>about us</li>
            <li>deals</li>
        </ul>
    </nav>

    <select id=sort>
        <option>new</option>
        <option>price</option>
        <option>discount</option>
    </select>

    <select id=main_sort_by>
        <option>usa</option>
        <option>england</option>
        <option>japan</option>
    </select>

    <select id=main_sort_by>
        <option>category1</option>
        <option>category2</option>
        <option>category3</option>
    </select>
    <section>
        <article>
            <p>our price</p>
            <p>price</p>
            <p>details</p>
            <header>
                <h1>deal title</h1>
                <h2>deal description</h2>
                <img src="" id="deal_image"/>
            </header>
            <footer>
                <p>items left</p>
                <p>end of the deal</p>
            </footer>
        </article>

        <article>
            <p>our price</p>
            <p>price</p>
            <p>details</p>
            <header>
                <h1>deal title</h1>
                <h2>deal description</h2>
                <img src="" id="deal_image"/>
            </header>
            <footer>
                <p>items left</p>
                <p>end of the deal</p>
            </footer>
        </article>


    </section>

    <aside>
        <div id="newsletter"></div>
        <div id="rss"></div>
    </aside>

    <footer></footer>
</body>

Layout I am trying to markup

Answer 1

我确实有一些评论可以提供。首先，您不应该只为一个元素添加header标记。也许登录或注册也可以进入，取决于你的设计。

您正在使用article，现在这可能是因为我不知道这里会包含哪些内容，但是如果每个内容本身都有意义，则只使用此标记，例如。在RSS提要阅读器中。如果没问题，如果不使用section标签。

您正在使用section标记作为articles的包装。您不应该将此标记用作容器，文档大纲算法不会为此部分选择标题，因此div就足够了。

我发现有助于html5语义的工具之一是html5 Outliner，这将帮助您了解应该或不应该使用切片元素的位置。

这是一个很棒的resource on html5 semantics。

Answer 2

对我来说很好看。

可能会将<select>包装在容器中。

HTML5语义标记

2 个答案: