Code
2023-07-03 07:00:04

HTML5最佳实践;部分/头/ /条元素

网络上有足够多关于HTML5的信息(stackoverflow上也有)，但现在我对“最佳实践”很好奇。像section/headers/article这样的标签是新的，每个人都有不同的意见，关于何时/何处应该使用这些标签。你们觉得下面的布局和代码怎么样?

  1  <!doctype html>
  2      <head>
  3          <title>Website</title>
  4      </head>
  5  
  6      <body>
  7          <section>
  8              <header>
  9                  <div id="logo"></div>
 10                  <div id="language"></div>
 11              </header>
 12  
 13              <nav>
 14                  <ul>
 15                      <li>menu 1</li>
 16                      <li>menu 2</li>
 17                      <li>menu 3</li>
 18                      <li>menu 4</li>
 19                      <li>menu 5</li>
 20                  </ul>
 21              </nav>
 22  
 23              <div id="main">
 24                  <div id="main-left">
 25                      <article>
 26                          <header><h1>This is a title</h1></header>
 27  
 28                          <p>Lorem ipsum dolor sit amet, consectetur
 29                          adipiscing elit. Quisque semper, leo eget</p>
 30  
 31                          <p>Lorem ipsum dolor sit amet, consectetur
 32                          adipiscing elit. Quisque semper, leo eget</p>
 33  
 34                          <p>Lorem ipsum dolor sit amet, consectetur
 35                          adipiscing elit. Quisque semper, leo eget</p>
 36  
 37                          <p>Lorem ipsum dolor sit amet, consectetur
 38                          adipiscing elit. Quisque semper, leo eget</p>
 39                      </article>
 40                  </div>
 41  
 42                  <div id="main-right">
 43                      <section id="main-right-hot">
 44                          <h2>Hot items</h2>
 45                          <ul>
 46                              <li>Lorem ipsum</li>
 47                              <li>dolor sit</li>
 48                              <li>...</li>
 49                          </ul>
 50                      </section>
 51  
 52                      <section id="main-right-new">
 53                          <h2>New items</h2>
 54                          <ul>
 55                              <li>Lorem ipsum</li>
 56                              <li>dolor sit</li>
 57                              <li>...</li>
 58                          </ul>
 59                      </section>
 60                  </div>
 61              </div>
 62  
 63              <div id="news-items">
 64                  <header><h2>The latest news</h2></header>
 65  
 66                  <div id="item_1">
 67                      <article>
 68                          <header>
 69                              <img src="#" title="titel artikel" />
 70                              <h3>Lorem ipsum .....</h3>
 71                          </header>
 72                          <p>Lorem ipsum dolor sit amet,
 73                          adipiscing elit. Quisque semper, </p>
 74                          <a href="#">Read more</a>
 75                      </article>
 76                  </div>
 77  
 78  
 79                  <div id="item_2">
 80                      <article>
 81                          <header>
 82                              <img src="#" title="titel artikel" />
 83                              <h3>Lorem ipsum .....</h3>
 84                          </header>
 85                          <p>Lorem ipsum dolor sit amet,
 86                          adipiscing elit. Quisque semper, </p>
 87                          <a href="#">Read more</a>
 88                      </article>
 89                  </div>
 90  
 91  
 92                  <div id="item_3">
 93                      <article>
 94                          <header>
 95                              <img src="#" title="titel artikel" />
 96                              <h3>Lorem ipsum .....</h3>
 97                          </header>
 98                          <p>Lorem ipsum dolor sit amet,
 99                          adipiscing elit. Quisque semper, </p>
100                          <a href="#">Read more</a>
101                      </article>
102                  </div>
103              </div>
104  
105              <footer>
106                  <ul>
107                      <li>menu 1</li>
108                      <li>menu 2</li>
109                      <li>menu 3</li>
110                      <li>menu 4</li>
111                      <li>menu 5</li>
112                  </ul>
113              </footer>
114          </section>
115      </body>
116  </html>

第7行。围绕整个网站的部分?还是只有div?

8号线。每个部分都以标题开始?

第23行。这个div对吗?或者这一定是一个部分?

第24行。用div分割左/右列。

行25。文章标签的正确位置?

第26行。你的h1-tag需要放在head -tag里面吗?

行43。内容与主要文章无关，所以我决定这是一个部分，而不是一个题外话。

行44。无头H2

线53。没有标头的节

第63行。Div与所有(不相关的)新闻项目

第64行。带有h2的标头

第65行。嗯，div还是section?或者删除这个div，只使用article标签

第105行。页脚:-)

当前回答

编辑:不幸的是，我必须纠正自己。

请参考https://stackoverflow.com/a/17935666/2488942下面的w3规范链接，其中包括一个示例(与我前面看到的不同)。

但后来… 这里有一篇关于它的好文章，感谢@Fez。

我最初的回答是:

w3规范的结构方式:

4.3.4节 4.3.4.1体元素 4.3.4.2 section元素 4.3.4.3 nav元素 4.3.4.4 article元素 ．...

在我看来，这部分比文章的水平更高。如本回答部分所述，将主题相关的内容进行分组。在我看来，一篇文章中的内容无论如何都是与主题相关的，因此，至少对我来说，这也意味着与文章相比，章节组在更高的层次上。

我认为它应该是这样使用的:

section: Chapter 1
    nav: Ch. 1.1
         Ch. 1.2

    article: Ch. 1.1
             some insightful text

    article: Ch. 1.2
             related to 1.1 but different topic

或者对于新闻网站来说:

section: News
    article: This happened today
    article: this happened in England

section: Sports
    article: England - Ukraine 0:0
    article: Italy books tickets to Brazil 2014
2013-09-10 23:18:56

其他回答

让我们以Facebook留言板为例

“墙”带有“部分”标签，表示它与页面是分开的。 所有的帖子都在“文章”标签下。 然后我们有一个单独的帖子，它在“section”标签下。 我们有标题“X用户张贴这个”。为此，我们可以使用“heading”标签。 然后在帖子内部我们有三个部分。一个是图片/文本，喜欢-分享-评论按钮和评论框。 对于评论框，我们可以使用article标签。

2015-08-14 17:32:18

我建议你阅读W3 wiki上关于HTML5结构的页面:

<header> Used to contain the header content of a site. <footer> Contains the footer content of a site. <nav> Contains the navigation menu, or other navigation functionality for the page. <article> Contains a standalone piece of content that would make sense if syndicated as an RSS item, for example a news item. <section> Used to either group different articles into different purposes or subjects, or to define the different sections of a single article. <aside> Defines a block of content that is related to the main content around it, but not central to the flow of it.

其中包括一张我在这里清理过的图片:

In code, this looks like so: <body> <header></header> <nav></nav> <section id="sidebar"></section> <section id="content"></section> <aside></aside> <footer></footer> </body> Let's explore some of the HTML5 elements in more detail. <section> The <section> element is for containing distinct different areas of functionality or subjects area, or breaking an article or story up into different sections. So in this case: "sidebar1" contains various useful links that will persist on every page of the site, such as "subscribe to RSS" and "Buy music from store". "main" contains the main content of this page, which is blog posts. On other pages of the site, this content will change. It is a fairly generic element, but still has way more semantic meaning than the plain old <div>. <article> <article> is related to <section>, but is distinctly different. Whereas <section> is for grouping distinct sections of content or functionality, <article> is for containing related individual standalone pieces of content, such as individual blog posts, videos, images or news items. Think of it this way - if you have a number of items of content, each of which would be suitable for reading on their own, and would make sense to syndicate as separate items in an RSS feed, then <article> is suitable for marking them up. In our example, <section id="main"> contains blog entries. Each blog entry would be suitable for syndicating as an item in an RSS feed, and would make sense when read on its own, out of context, therefore <article> is perfect for them: <section id="main"> <article><!-- first blog post --></article> <article><!-- second blog post --></article> <article><!-- third blog post --></article> </section> Simple huh? Be aware though that you can also nest sections inside articles, where it makes sense to do so. For example, if each one of these blog posts has a consistent structure of distinct sections, then you could put sections inside your articles as well. It could look something like this: <article> <section id="introduction"></section> <section id="content"></section> <section id="summary"></section> </article> <header> and <footer> as we already mentioned above, the purpose of the <header> and <footer> elements is to wrap header and footer content, respectively. In our particular example the <header> element contains a logo image, and the <footer> element contains a copyright notice, but you could add more elaborate content if you wished. Also note that you can have more than one header and footer on each page - as well as the top level header and footer we have just discussed, you could also have a <header> and <footer> element nested inside each <article>, in which case they would just apply to that particular article. Adding to our above example: <article> <header></header> <section id="introduction"></section> <section id="content"></section> <section id="summary"></section> <footer></footer> </article> <nav> The <nav> element is for marking up the navigation links or other constructs (eg a search form) that will take you to different pages of the current site, or different areas of the current page. Other links, such as sponsored links, do not count. You can of course include headings and other structuring elements inside the <nav>, but it's not compulsory. <aside> you may have noticed that we used an <aside> element to markup the 2nd sidebar: the one containing latest gigs and contact details. This is perfectly appropriate, as <aside> is for marking up pieces of information that are related to the main flow, but don't fit in to it directly. And the main content in this case is all about the band! Other good choices for an <aside> would be information about the author of the blog post(s), a band biography, or a band discography with links to buy their albums. Where does that leave <div>? So, with all these great new elements to use on our pages, the days of the humble <div> are numbered, surely? NO. In fact, the <div> still has a perfectly valid use. You should use it when there is no other more suitable element available for grouping an area of content, which will often be when you are purely using an element to group content together for styling/visual purposes. A common example is using a <div> to wrap all of the content on the page, and then using CSS to centre all the content in the browser window, or apply a specific background image to the whole content.

2014-07-15 18:07:58

编辑:不幸的是，我必须纠正自己。

请参考https://stackoverflow.com/a/17935666/2488942下面的w3规范链接，其中包括一个示例(与我前面看到的不同)。

但后来… 这里有一篇关于它的好文章，感谢@Fez。

我最初的回答是:

w3规范的结构方式:

4.3.4节 4.3.4.1体元素 4.3.4.2 section元素 4.3.4.3 nav元素 4.3.4.4 article元素 ．...

在我看来，这部分比文章的水平更高。如本回答部分所述，将主题相关的内容进行分组。在我看来，一篇文章中的内容无论如何都是与主题相关的，因此，至少对我来说，这也意味着与文章相比，章节组在更高的层次上。

我认为它应该是这样使用的:

section: Chapter 1
    nav: Ch. 1.1
         Ch. 1.2

    article: Ch. 1.1
             some insightful text

    article: Ch. 1.2
             related to 1.1 but different topic

或者对于新闻网站来说:

section: News
    article: This happened today
    article: this happened in England

section: Sports
    article: England - Ukraine 0:0
    article: Italy books tickets to Brazil 2014
2013-09-10 23:18:56

该文档的标记可能如下所示:

<body>
     <header>...</header>
     <nav>...</nav>
     <article>
          <section>
               ...
          </section>
     </article>
     <aside>...</aside>
     <footer>...</footer>
</body>

你可以在这篇文章A List Apart中找到更多信息。

2013-07-29 23:03:02

不幸的是，到目前为止给出的答案(包括投票最多的)要么是“只是”常识，要么是完全错误的，要么是令人困惑的。一个关键的关键词都没有出现!

我写了3个答案:

这个解释(从这里开始)。 具体回答OP的问题。 改进了详细的HTML。

要理解这里讨论的html元素的作用，您必须知道其中一些元素是文档的一部分。每个html文档都可以根据HTML5大纲算法进行分段，以便创建大纲-或-目录(TOC)。大纲通常是不可见的(现在)，但作者应该以这样一种方式使用html，从而使大纲反映他们的意图。

你可以只用这些元素创建section:

创建(显式)子节 < >部分部分 < >条部分 <导航>部分 除了< >部分 创建兄弟节或子节 带有<h*>2的未指定类型的section(并非所有都这样做，请参见下面) 关闭当前显式(子)节

section可以命名为:

<h*>创建的section自己命名 <section|article|nav|aside> section将由第一个<h*>命名(如果有的话) 这些<h*>是唯一不自己创建节的

关于分段还有一件事:以下上下文(即元素)创建了“轮廓边界”。它们包含的任何部分对它们来说都是私有的:

文档本身带有<body> 表<td>的单元格 < blockquote > <details>， <dialog>， <fieldset>， <figure> 没有其他的

example HTML <body> <h3>if you want siblings at top level...</h3> <h3>...you have to use untyped sections with <h*>...</h3> <article> <h1>...as any other section will descent</h1> </article> <nav> <ul> <li><a href=...>...</a></li> </ul> </nav> </body> has this outline 1. if you want siblings at top level... 2. ...you have to use untyped sections with <h*>... 2.1. ...as any other section will descent 2.2. (unnamed navigation)

这就提出了两个问题:

<article>和<section>之间有什么区别?

both can: be nested in each other take a different notion in a different context or nesting level <section>s are like book chapters they usually have siblings (maybe in a different document?) together they have something in common, like chapters in a book one author, one <article>, at least on the lowest level standard example: a single blog comment a blog entry itself is also a good example a blog entry <article> and its comment <article>s could also be wrapped with an <article> it’s some "complete" thing, not a part in a series of similar <section>s in an <article> are like chapters in a book <article>s in a <section> are like poems in a volume (within a series)

<页眉>，<页脚>和<主>适合吗?

they have zero influence on sectioning <header> and <footer> they allow you to mark zones of each and every section even within a section you can have them several times to differentiate from the main part in this section limited only by the author’s taste <header> may mark the title/name of this section may contain a logo for this section has no need to be at the top or upper part of the section <footer> may mark the credits/author of this section can come at the top of the section can even be above a <header> <main> only allowed once marks the main part of the top level section (i.e. the document, <body> that is) subsections themselves have no markup for their main part <main> can even “hide” in some subsections of the document, while document’s <header> and <footer> can’t (that markup would mark header/footer of that subsection then) but it is not allowed in <article> sections3 helps to distinguish “the real thing” from document’s non-header, non-footer, non-main content, if that makes sense in your case...

1 .想到的是:提纲、算法、隐式分段 我用<h*>来表示<h1>， <h2>， <h3>， <h4>， <h5>和<h6> 在<aside>或<nav>中也不允许<main>，但这并不奇怪。-在效果上:<主>只能隐藏在(嵌套)下降<section>部分或出现在顶层，即<body>

2014-10-27 00:17:06

推荐文章

aliyun

最新文章

标签

2024 code 京ICP备15047053号-1