Question

我目前正在构建具有以下结构的WebApp： Structure of the WebApp

但是，我并不经常为Web开发，我想知道应该使用哪些HTML标记来包含应用程序的不同部分。

我应该使用标题栏的<header>标记，菜单<nav>，通知<aside>和正文的<article>或其他内容吗？（如果你能给我一些骨架，我也会很感激）

Answer 1

我认为任何人都不会以任何标准方式实现它，但我真的建议考虑使用smacss - 可扩展和模块化的css架构。 https://smacss.com/book/type-layout关于如何组织和命名css / html，这是一个很好的哲学。

根据smacss，您将根据页眉，页脚和文章划分内容。而导航是标题或文章的子元素，因此您可以选择使用标记（如果导航在整个Web结构中保持不变），或者如果它是灵活的和更改的，您应该坚持标记导航一个类或id，而不是使用标签本身（这是为了确保你可以尽可能多地重用css ...阅读整篇smacss文章，了解更多关于重用css和进一步阅读oocss - 面向对象的css）

Answer 2

是的，我相信你走在正确的轨道上。

就个人而言，我使用

<header id="site-header">
<nav id="menu">
<section id="main">
<aside id="notifications">

虽然使用article对于切片没有错误，但我喜欢将布局视为页面划分为部分。然后，在主要部分内，可能会有很多文章 - 可能有自己的页眉，页脚，部分等。

我也喜欢在页面的每个重要部分使用id - 除了使内容语义更加清晰之外，id还使得使用JavaScript查找和选择它们变得更容易（也更快）。

只是一个小小的注意事项：我要避免调用主要内容部分＆＃34; body＆＃34;只是因为它可能与<body>标签混淆。

Answer 3

就像你上面列出的一样使用它们。值得参考这个handy guide来确保您选择的标签跨浏览器工作（参见并举例说明）。没有错误或正确的答案。

Answer 4

使用 HTML5 标记，例如标题，导航，页脚，旁边，部分可以帮助您和其他开发人员更好地了解您的结构。这是示例。你可以去link查看它是如何使用的！

<!DOCTYPE html>
<html>
<head>
    <title>Title of the page</title>
</head>
<body>
<header>
    <h1>Here is <span>HTML5</span> Page</h1>
</header>
<nav>
  <header>
    Navigation menu
  </header>
    <ul>
        <li><span>Blog</span></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
    </ul>
</nav>
<section>
  <header>    
    <h1>Blog posts for April 2012</h1>    
  </header>
  <article>
    <header>
      <h1><a href="">Information about this example</a></h1>
      This example is a modified version of <a href="http://netstream.ru/htmlsamples/html5-blog/index.html">http://netstream.ru/htmlsamples/html5-blog/index.html</a>
    </header>
    <p>Try to move the mouse on different elements. The structure will be highlighted and you will be able to see the different inclusions of elements one in each other. If you move the cursor to this sentence, it will be highlighted in dark grey, showing the presence of an &lt;article&gt; element, surrounded by a &lt;section&gt; element (light grey), etc. So we have some articles in a single section element. The page title at the top is a &lt;header&gt; element, while  the tag cloud on the right is a &lt;aside&gt; element. The main menu on top (with Blog, About, Contact) is a &lt;nav&gt; element.</p>
     <figure>
  <img src="http://www.fredcavazza.net/files/2009/09/html5_structure.png" alt="Example of HTML5 structuring tags" />
  <figcaption>
    Fig. 1 : an example of how new structuring elements could be used. This page put a &lt;nav&gt; on top, and does not have headers and footer for each article, like in this figure, but it could... By the way, this is a &lt;figcaption&gt; inside a &lt;figure&gt; element...
  </figcaption>
</figure>

  </article>
    <article>
        <header>
            <h1><a href="">History</a></h1>
        </header>

        <p>Work on HTML 5 originally started in late 2003, as a proof of concept to show that it was possible to extend HTML 4's forms to provide many of the features that XForms 1.0 introduced, without requiring browsers to implement rendering engines that were incompatible with existing HTML Web pages. At this early stage, while the draft was already publicly available, and input was already being solicited from all sources, the specification was only under Opera Software's copyright.</p>
        <p>In early 2004, some of the principles that underlie this effort, as well as an early draft proposal covering just forms-related features, were presented to the W3C jointly by Mozilla and Opera at a workshop discussing the future of Web Applications on the Web. The proposal was rejected on the grounds that the proposal conflicted with the previously chosen direction for the Web's evolution.</p>
        <p>Shortly thereafter, Apple, Mozilla, and Opera jointly announced their intent to continue working on the effort. A public mailing list was created, and the drafts were moved to the WHATWG site. The copyright was subsequently amended to be jointly owned by all three vendors, and to allow reuse of the specifications.</p>
        <p>In 2006, the W3C expressed interest in the specification, and created a working group chartered to work with the WHATWG on the development of the HTML 5 specifications. The working group opened in 2007. Apple, Mozilla, and Opera allowed the W3C to publish the specifications under the W3C copyright, while keeping versions with the less restrictive license on the WHATWG site.</p>
        <p>Since then, both groups have been working together.</p>
    </article>
    <article>
        <header>
            <h1><a href="">HTML vs XHTML</a></h1>
        </header>
        <p>This specification defines an abstract language for describing documents and applications, and some APIs for interacting with in-memory representations of resources that use this language.</p>
        <p>The in-memory representation is known as  DOM5 HTML , or  the DOM  for short.</p>
        <p>There are various concrete syntaxes that can be used to transmit resources that use this abstract language, two of which are defined in this specification.</p>
        <p>The first such concrete syntax is  HTML5 . This is the format recommended for most authors. It is compatible with most legacy Web browsers. If a document is transmitted with the MIME type text/html, then it will be processed as an  HTML5  document by Web browsers.</p>
        <p>The second concrete syntax uses XML, and is known as  XHTML5 . When a document is transmitted with an XML MIME type, such as application/xhtml+xml, then it is processed by an XML processor by Web browsers, and treated as an  XHTML5  document. Authors are reminded that the processing for XML and HTML differs; in particular, even minor syntax errors will prevent an XML document from being rendered fully, whereas they would be ignored in the  HTML5  syntax.</p>
        <p>The  DOM5 HTML ,  HTML5 , and  XHTML5  representations cannot all represent the same content. For example, namespaces cannot be represented using  HTML5 , but they are supported in  DOM5 HTML  and  XHTML5 . Similarly, documents that use the noscript feature can be represented using  HTML5 , but cannot be represented with  XHTML5  and  DOM5 HTML . Comments that contain the string  ->  can be represented in  DOM5 HTML  but not in  HTML5  and  XHTML5 . And so forth.</p>
    </article>
</section>
<aside>
    <h1>Tag cloud</h1>
    <ul class="tag-cloud">
        <li><a href="" rel="tag" class="w2">ajax</a></li>
        <li><a href="" rel="tag" class="w8">apple</a></li>
        <li><a href="" rel="tag" class="w3">css</a></li>
        <li><a href="" rel="tag" class="w6">firefox</a></li>
        <li><a href="" rel="tag" class="w8">google</a></li>
        <li><a href="" rel="tag" class="w2">html</a></li>
        <li><a href="" rel="tag" class="w2">internet explorer</a></li>
        <li><a href="" rel="tag" class="w6">iphone</a></li>
        <li><a href="" rel="tag" class="w9">css3</a></li>
        <li><a href="" rel="tag" class="w2">ipod</a></li>
        <li><a href="" rel="tag" class="w5">javascript</a></li>
        <li><a href="" rel="tag" class="w1">jquery</a></li>
        <li><a href="" rel="tag" class="w2">mac</a></li>
        <li><a href="" rel="tag" class="w4">opera</a></li>
        <li><a href="" rel="tag" class="w2">rss</a></li>
        <li><a href="" rel="tag" class="w10">html5</a></li>
        <li><a href="" rel="tag" class="w2">web</a></li>
        <li><a href="" rel="tag" class="w8">web 2.0</a></li>
        <li><a href="" rel="tag" class="w1">web-??????????</a></li>
        <li><a href="" rel="tag" class="w3">windows</a></li>
        <li><a href="" rel="tag" class="w2">yahoo</a></li>
        <li><a href="" rel="tag" class="w7">youtube</a></li>
    </ul>
</aside>
<footer>
    <p>&copy; 2009 Some blog</p>
</footer>
</body>
</html>

HTML标签结构

4 个答案: