MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

这篇翻译不完整。请帮忙从英语翻译这篇文章

除了定义网页的各个部分(例如“段落”或“图片”)外,HTML还拥有一些用于定义网站区域的块级元素 作为“头部”,“导航菜单”,“主要内容列”。)本文研究如何规划基本网站结构,并编写HTML以表示此结构。

要求: Basic HTML familiarity, as covered in Getting started with HTML. HTML text formatting, as covered in HTML text fundamentals. How hyperlinks work, as covered in Creating hyperlinks.
目标: 了解如何使用语义标签来构建文档,以及如何制定简单网站的结构

文档的基本部分

网页可以看起来彼此不同,但它们都倾向于使用类似的标准组件,除非页面显示全屏视频或游戏,是某种艺术项目的一部分,或者是结构不当:

标题
通常在顶部有一个大标题和(或)标志。 这是一个网站的主要常见信息通常从一个网页到另一个网页。
导航栏
链接到网站的主要部分; 通常由菜单按钮,链接或选项卡表示。 与标题一样,这些内容通常在一个网页与另一个网页之间保持一致 - 在您的网站上导航不一致只会导致混乱,沮丧的用户。 许多Web设计师认为导航栏是标题的一部分,而不是单个组件,但这不是一个要求; 实际上有些人认为,两个独立的是更好的可访问性accessibility),因为如果他们分开,屏幕阅读器可以更好地阅读两个功能。
主要内容
中心的一个大区域,包含给定网页的大部分独特内容,例如您要观看的视频,或您正在阅读的主要故事,或您要查看的地图,或新闻标题等......这是网站的一部分,绝对会因页面而异。
侧栏
一些外围信息,链接,报价,广告等。通常这是与主要内容中包含的内容相关(例如在新闻文章页面上,侧边栏可能包含作者的生物或相关文章的链接),但有 还有一些情况下,你会发现一些重复的元素,如辅助导航系统。
页脚
横跨页面底部的条纹,通常包含精细打印,版权通知或联系信息。 它是一个放置公共信息(如标题)的地方,但通常该信息不是关键或次要的网站本身。 通过提供用于快速访问热门内容的链接,页脚有时也用于SEO目的。

一个“典型的网站”可能会这样布局:

a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer.

用于结构化网站的HTML

上面显示的简单示例不是很漂亮,但是非常适合用于说明典型的网站布局。 一些网站有更多的列,有些网站更复杂,但你会有你的想法。 使用正确的CSS,您可以使用几乎任何元素来装饰不同的部分,并得到您想要的结果,但如前所述,我们需要遵守语义,并使用正确的元素进行语义化工作。

这是因为视觉效果并不能说明整个故事。 我们使用颜色和字体大小来吸引用户对内容最有用的部分的关注,例如导航菜单和相关链接,但是视觉障碍的人该怎么办,这难道也对那些没有“粉红色”和“大”的概念的人来说非常有用?

Note: 色盲患者大概占了世界人口的 8%(8% of the world population). 盲人和视障人士占世界人口的4-5%左右(2012年全球有2.85亿人 285 million such people in the world, 总人口约70亿 around 7 billion.)

在您的HTML代码中,您可以根据其功能标记内容部分 - 您可以明确地使用表示上述内容部分的元素,并且屏幕阅读器等辅助技术可以识别这些元素,并帮助执行“找到主导航 “或”找到主要内容“。 正如我们前面提到的那样,没有使用正确的元素结构和语义去构建网页会有很多的不良影响 consequences of not using the right element structure and semantics for the right job.

为了实现这样的语义标记,HTML提供了可以用来表示这些部分的专用标签,例如:

自主学习: 探索例子的代码

我们上面所看到的例子用下面的代码表示 (你也可以在这找到 find the example in our Github repo). 我们希望你看看上面的例子,然后看看下面的列表,观察哪些部分组成上面所讨论的内容(标题、导航栏、主要内容、侧栏、页脚)。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>My page title</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="style.css">

    <!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer-->
    <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

  <body>
    <!-- Here is our main header that is used accross all the pages of our website -->

    <header>
      <h1>Header</h1>
    </header>

    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Our team</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>

       <!-- A Search form is another commmon non-linear way to navigate through a website. -->

       <form>
         <input type="search" name="q" placeholder="Search query">
         <input type="submit" value="Go!">
       </form>
     </nav>

    <!-- Here is our page's main content -->
    <main>

      <!-- It contains an article -->
      <article>
        <h2>Article heading</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

        <h3>subsection</h3>

        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>

        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>

        <h3>Another subsection</h3>

        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>

        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
      </article>

      <!-- the aside content can also be nested within the main content -->
      <aside>
        <h2>Related</h2>

        <ul>
          <li><a href="#">Oh I do like to be beside the seaside</a></li>
          <li><a href="#">Oh I do like to be beside the sea</a></li>
          <li><a href="#">Although in the North of England</a></li>
          <li><a href="#">It never stops raining</a></li>
          <li><a href="#">Oh well...</a></li>
        </ul>
      </aside>

    </main>

    <!-- And here is our main footer that is used across all the pages of our website -->

    <footer>
      <p>©Copyright 2050 by nobody. All rights reversed.</p>
    </footer>

  </body>
</html>

花一些时间来查看代码并理解它 - 代码中的注释也应该帮助您理解它。 我们不要求你在这篇文章中做很多其他事情,因为理解文档布局的关键是编写一个完整的HTML结构,然后用CSS布局。等你学习到 CSS 部分的时候才能完全理解上面代码。

HTML布局元素细节

从总体详细的理解HTML的元素是不错的——随着你web开发经验的逐渐积累,你将会逐渐理解HTML的元素。你可以通过查阅HTML元素参考找到更多的细节。现在,你需要理解这些主要的元素定义:

  • <main> 展现了页面内容的独特性。只可以在每一个页面上使用一次<main>,直接把它放到<body>中。在理想情况下,不应该把它嵌套进其他的元素中。
  • <article> 闭合一块与自身相关的内容,这块内容能够解释它自身而不是页面上其他的内容(例如一篇单独的博客)。
  • <section> 近似于<article>,但是它更多的是伴随着由一个单独功能构成的页面(例如一个小型的地图,或者是一组文章的标题和摘要)。它被认为最好的实际应用是用标题作为每一部分(section)的开头;也要注意的是你可以把不同的<article>分到不同的<section>中,或者把不同的<section>分到不同的<article>中,这要取决于内容。
  • <aside> 包含的内容并不与主要内容有直接的联系,但是它可以提供额外的不直接有联系的信息(术语表条目,作者简介,相关链接等等)。
  • <header> 展现了一系列的介绍性内容。如果它是<body> 的子元素,它就定义了网站的全局页眉。但是如果它是 <article><section> 的子元素,它就定义了这些部分的特定的页眉(不要把这些与ititles and headings混淆)。
  • <nav> 包含了页面主要的导航功能。二级链接等,不会进入导航功能部分。
  • <footer> 包含了页面的页脚部分。

Non-semantic wrappers

有时候,你会遇到一种情况——你找不到理想的语义元素来包含项目或内容。有时候你可能只想仅仅用CSSJavaScript将一组元素作为一个单独的实体来修饰。为了应对这种情况,HTML提供了<div><span>元素。你应该最好使用class属性来提供一些标签,这样他们就能容易的被找到。

<span> 是一个行内无语义元素,你应该仅仅当无法找到更好的语义元素包含内容时使用,或者不想增加特定的含义。例如:

<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>

在这种情况中,the editor’s note 应该仅仅是提供额外的对导演戏剧的说明;它没有额外的语义。对于用户来说,CSS可能用于从主文本中抽离这些note。

<div> 是一个块级无语义元素,你应该仅仅当找不到更好的块级元素时使用,或者不想增加特定的意义。例如,想象当你浏览一个电子商务网站时,有一个购物车部件一直都在你可以选择的地方。

<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/" alt="Silver earrings">
    </li>
    <li>
      ...
    </li>
  </ul>
  <p>Total cost: $237.89</p>
</div>

这并不是一个<aside>,因为它和主要内容并没有必要的联系(你想在任何地方都能看到它)。它甚至不能用<section>来特定的指定,因为它不是页面上主要内容的一部分。所以在这种情况下用<div>是合适的。我们已经把它包含进head标签里作为帮助屏幕阅读者找到它的引导。

警告: Divs是可以如此便利的使用以至于很容易就被滥用。因为它们不携带语义值,所以会让你的HTML代码变的混乱。要小心的使用它们,只有当没有更好的语义解决方案才能使用,而且要尽可能把它的使用量降到最低,否则,当你升级和维护你的文档时会非常困难。

换行与水平分割线

<br><hr>将会是你偶尔使用并且想要了解的两个元素:

<br>在一个段落中创建一个换行;在你想要生成一系列的短行的地方,<br>是唯一能够生成这种结构的元素。例如一个邮寄地址或一首诗。比如:

<p>There once was a girl called Nell<br>
Who loved to write HTML<br>
But her structure was bad, her semantics were sad<br>
and her markup didn't read very well.</p>

没有<br>元素,这一段会直接表示在一行中(正如我们之前在课程中看到的HTML ignores most whitespace);有了<br>元素,会生成下面这样的:

There once was a girl called Nell
Who loved to write HTML
But her structure was bad, her semantics were sad
and her markup didn't read very well.

<hr>元素在文档中生成一条水平分割线,表示文本中主题的变化(例如主题或场景的变化)。看起来就是一条水平线。像下面的例子:

<p>Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.</p>
<hr>
<p>Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hasily, and lept to his feet; "better get back to work then", he mused.</p>

将会表示成这样:

Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.


Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hasily and sighed; "better get back to work then", he mused.

Planning a simple website

Once you've planned out the content of a simple webpage, the next logical step is to try to work out what content you want to put on a whole website, what pages you need, and how they should be arranged and link to one another for the best possible user experience. This is called Information architecture. In a large, complex website, a lot of planning can go into this process, but for a simple website of a few pages this can be fairly simple, and fun!

  1. Bear in mind that you'll have a few elements common to most (if not all) pages — such as the navigation menu, and the footer content. If your site is a for a business, for example, it's a good idea to have your contact information available in the footer on each page. Note down what you want to have common to every page. the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy
  2. Next, draw a rough sketch of what you might want the structure of each page to look like (it might look like our simple website above.) Note what each block is going to be. A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer
  3. Now, brainstorm all the other (not common to every page) content you want to have on your website — write a big list down. A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info
  4. Next, try to sort all these content items into groups, to give you an idea of what parts might live together on different pages. This is very similar to a technique called Card sorting. The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things
  5. Now try to sketch a rough sitemap — have a bubble for each page on your site, and draw lines to show the typical workflow between pages. The homepage will probably be in the center, and link to most if not all of the others; most of the pages in a small site should be available from the main navigation, although there are exceptions. You might also want to include notes about how things might be presented. A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page

Active learning: create your own sitemap

Try carrying out the above exercise for a website of your own creation. What would you like to make a site about?

Note: Save your work somewhere; you might need it later on.

Summary

At this point you should have a better idea about how to structure a web page/site. In the last article of this module, we'll study how to debug HTML.

See also

文档标签和贡献者

 最后编辑者: HashubWang,