Document and website structure

要有 header: navigation bar: main content: sidebar: footer:

为了视障人群，在你的HTML代码里，you can mark up sections of content based on their functionality

• header:<header>.
• navigation bar:<nav>.
• main content:<main>,with various content subsevtions represented by <article>,<section>,and<div>elements.
• sidebar:<aside>;often placed inside<main>.
• footer:<footer>.

<main> <article> <section>可有很多在article里 <aside> <header>可以是<article>或者<section>的specific header <nav> <footer>

Non-semantic wrappers

有时候你需要一些东西来把一系列元素包在一起来共同应用CSS或者JavaScript，或者一些content。所以有<div>和<span>，和class属性。

<span>is an inline non-semantic element.

<p>
  The King walked drunkenly back to his room at 01:00, the beer doing nothing to
  aid him as he staggered through the door.
  <span class="editor-note">
    [Editor's note: At this point in the play, the lights should be down low].
  </span>
</p>

<div>is a block level non-semantic element.

<div class="shopping-cart">
  <h2>Shopping cart</h2>
  <ul>
    <li>
      <p>
        <a href=""><strong>Silver earrings</strong></a>: $99.95.
      </p>
      <img src="../products/3333-0985/thumb.png" alt="Silver earrings" />
    </li>
    <li>…</li>
  </ul>
  <p>Total cost: $237.89</p>
</div>

这不是<aside>因为不是必须与网页的主文本有联系，甚至不能特别正当的使用<section>，因为不是主要文本的一部分。

警告

Warning: Divs are so convenient to use that it's easy to use them too much. As they carry no semantic value, they just clutter your HTML code. Take care to use them only when there is no better semantic solution and try to reduce their usage to the minimum otherwise you'll have a hard time updating and maintaining your documents.