html容器标签

容器标签 (Container tags)

HTML provides a set of container tags. Those tags can contain an unspecified set of other tags.

HTML提供了一组容器标记。 这些标签可以包含一组未指定的其他标签。

We have:

我们有：

• article

  article

• section

  section

• div

  div

and it can be confusing to understand the difference between them.

理解它们之间的差异可能会造成混淆。

Let’s see when to use each one of them.

让我们看看何时使用它们中的每一个。

article (article)

The article tag identifies a thing that can be independent from other things in a page.

商品标签标识，可以是独立于页面其他东西的事情 。

For example a list of blog posts in the homepage.

例如，主页中的博客文章列表。

Or a list of links.

或链接列表。

     
	
      
		
       
A blog post
		
       Read more	
      
	
      
		
       
Another blog post
		
       Read more	
      
     

We’re not limited to lists: an article can be the main element in a page.

我们不仅限于列表：文章可以是页面中的主要元素。

     
	
      
A blog post
	
      
Here is the content...
     

Inside an article tag we should have a title (h1-h6) and

内部article标签，我们应该有一个标题( h1 - h6 )和

section (section)

Represents a section of a document. Each section has a heading tag (h1-h6), then the section body.

代表文档的一部分。 每个节都有一个标题标签( h1 - h6 )，然后是节正文 。

Example:

例：

     
	
      
A section of the page
	
      
...
	
      
     

It’s useful to break a long article into different sections.

将较长的文章分成不同的部分很有用。

Shouldn’t be used as a generic container element. div is made for this.

不应用作通用容器元素。 div是为此而设计的。

div (div)

div is the generic container element:

div是通用容器元素：

     
      	...
     

You often add a class or id attribute to this element, to allow it to be styled using CSS.

您经常向该元素添加class或id属性，以允许使用CSS设置其样式。

We use div in any place where we need a container but the existing tags are not suited.

我们在需要容器的任何地方使用div ，但现有标签不合适。

与页面相关的标签 (Tags related to page)

nav (nav)

This tag is used to create the markup that defines the page navigation. Into this we typically add an ul or ol list:

此标记用于创建定义页面导航的标记。 通常，向其中添加一个ul或ol列表：

aside (aside)

The aside tag is used to add a piece of content that is related to the main content.

aside标签用于添加与主要内容相关的内容。

A box where to add a quote, for example. Or a sidebar.

例如，在其中添加引号的框。 或侧边栏。

Example:

例：

     
  
      
some text..
  
        
      
other text...
     

Using aside is a signal that the things it contains are not part of the regular flow of the section it lives into.

使用aside表示它包含的内容不是它所在的部分的常规流程的一部分。

header (header)

The header tag represents a part of the page that is the introduction. It can for example contain one or more heading tag (h1-h6), the tagline for the article, an image.

header标记表示页面的一部分，即简介。 例如，它可以包含一个或多个标题标签( h1 - h6 )，商品的标语，图像。

     
  
      
	  
       
Article title
  
      
  ...
     

main (main)

The main tag represents the main part of a page:

main标签代表页面的主要部分：

  ....  
     
    
      
....
  
     

footer (footer)

The footer tag is used to determine the footer of an article, or the footer of the page:

footer标记用于确定文章的页脚或页面的页脚：

     
       ....	
      
     

翻译自:

html容器标签