HTML“容器”标签 - 正确使用？

HTML 'container' tags - proper usage?

提问by Allyn

For some time I've been making websites, but have never really seen discussion of the proper usage of the container tags. I've seen any number of different types of content in the collection tags, but it usually seems that the page creator just picks a style they like and sticks with it.

一段时间以来，我一直在制作网站，但从未真正看到过有关正确使用容器标签的讨论。我在收藏标签中看到了许多不同类型的内容，但通常页面创建者似乎只是选择了他们喜欢的风格并坚持使用。

The main discrepancy in my mind is that between

我心目中的主要分歧在于

<p>
<div>

but I'd also like opinions regarding

但我也想提出意见

<span>

and any others I may be forgetting.

以及我可能忘记的任何其他人。

回答by cdeszaq

HTML was originally created to put the content of documents into some sort of structure understandable to computers. With that in mind, the ptag is supposed to hold anything that would be structured as a paragraph if the content of the page were to be turned into a printed document. The divand spanelements are reserved as general-use containers to facilitate formating and grouping of related elements to provide additional levels of structure, perhaps correlating to pages in a text document.

HTML 最初的创建是为了将文档内容放入计算机可以理解的某种结构中。考虑到这一点，p如果将页面内容转换为打印文档，标签应该包含任何结构为段落的内容。在div和span元素被保留作为一般使用的容器，以便在格式化和相关元素的分组，以提供结构的附加级别，可能关联到一个文本文档的页面。

In some cases, ptags shouldcontain other elements, such as anchor (a), image (img) and other in-line elements, because they relate directly to the content of the rest of the paragraph and it makes sense to group them that way, or the text of the rest of the paragraph provides a more in-depth description.

在某些情况下，p标签应该包含其他元素，例如锚点 ( a)、图像 ( img) 和其他行内元素，因为它们与段落其余部分的内容直接相关，因此将它们分组是有意义的，或者该段其余部分的案文提供了更深入的说明。

If there is not additional description of those elements, however, it does not make sense to place them in a paragraph simply as a convenient container; a divwould be more appropriate. In general, a paragraph is supposed to contain one paragraph of text and any directly related or described elements. Nothing else makes much sense in a paragraph.

然而，如果没有对这些元素进行额外的描述，那么将它们简单地放在一个段落中作为一个方便的容器是没有意义的；adiv会更合适。一般来说，一个段落应该包含一段文本和任何直接相关或描述的元素。在一个段落中没有其他任何意义。

---

---

UPDATE: HTML5 also adds a number of other semantic "container" elements, including article, nav, header, section, and aside.

UPDATE：HTML5还增加了许多其它语义“容器”的元件，包括article，nav，header，section，和aside。

回答by TheHippo

I think, the meaning of the tags is something like this:

我认为，标签的含义是这样的：

<p>Paragraph, usually just text</p>

<div>A block, containing anything</div>

<span>Just a simple non-blocking wrapper</span>

回答by Ben Blank

The difference between these three (and many other) tags is their semantic meaning. The HTML standard includes both tags with specific semantic meanings (<p>for paragraphs, <em>for emphasized text, etc.) and tags withoutsemantic meaning.

这三个（以及许多其他）标签之间的区别在于它们的语义含义。HTML 标准包括具有特定语义含义的标签（<p>用于段落、<em>强调文本等）和没有语义含义的标签。

The latter are <div>and <span>, which are used to identify block- or inline-level content which needs to be identified (using, say a class=or id=attribute), but for which a semantically-specific tag does not exist. For example, one may write <p>Hi, my name is <span class="name">John Doe</span>.</p>— indicating that it's a paragraph (which the browser already has an idea how to handle) and that part of it's content is a name (which means absolutely nothingto the browser unless CSS or JavaScript uses it).

后者是<div>and <span>，用于标识需要标识的块级或内联级内容（使用，例如 aclass=或id=属性），但不存在语义特定标签。例如，一个人可能会写<p>Hi, my name is <span class="name">John Doe</span>.</p>——表示它是一个段落（浏览器已经知道如何处理它）并且它的那部分内容是一个名称（这对浏览器来说绝对没有意义，除非 CSS 或 JavaScript 使用它）。

These tags are therefore incrediblyuseful both in adding additional information to an HTML document which doesn't fit within the semantic tags supplied by the standard (see the hCard specificationfor an excellent example) and for applying visual (CSS) or functional (JavaScript) structure to a document without altering its semantics.

因此，这些标签是令人难以置信的无论是在将附加信息添加到不适合该标准提供的语义标签内的HTML文档有用（见所述的hCard规范为一个很好的例子），并用于将视觉（CSS）或功能（JavaScript的）结构到文档而不改变其语义。

回答by Kevin Babcock

I think page creators should use semantic markup, meaning that the markup they create should communicate meaning (and not presentation). <div>and <p>have different meanings. The former is used to define a division (or section) of an HTML page, the latter to define a paragraph of text.

我认为页面创建者应该使用语义标记，这意味着他们创建的标记应该传达意义（而不是表现）。<div>并且<p>有不同的含义。前者用于定义 HTML 页面的一个分区（或部分），后者用于定义一段文本。

回答by Jacob Hume

<p>is a block-level element that should contain a paragraph, comprised of text, inline elements that modify that text (<p>, <a>, <abbr>, etc.), and images.

<p>是，应包含一个段落，包含文本的，即修改文本（内联元件的块级元素<p>，<a>，<abbr>等），和图像。

<div>is a block-level element used to divide the page, almost always in conjunction with CSS styles.

<div>是用于划分页面的块级元素，几乎总是与 CSS 样式结合使用。

<span>... well, I honestly don't use this tag that often. It's an inline element, and I use it usually when I'd like to apply styles to a portion of text that wouldn't benefit from using something with more meaning, like the <strong>and <em>tags.

<span>...好吧，老实说，我不经常使用这个标签。它是一个内联元素，我通常在我想将样式应用于文本的一部分时使用它，这些文本不会因使用更有意义的东西而受益，例如<strong>和<em>标签。

回答by Vordreller

I was tought to view <span>and <div>as the "tofu of webdeveloppement", since it has no real flavor but you can do virtually anything with it.

我因子评分查看<span>，并<div>作为“webdeveloppement的豆腐”，因为它没有真正的味道，但你可以用它做几乎任何东西。

(X)HTML tags define what the text they're surrounding is. Is it and address, is it a link, is it a paragraph, and so on...

(X)HTML 标签定义它们周围的文本是什么。是和地址，是链接，是段落，等等...

<div>and <span>are simply ways of getting to pieces of your site you normally can't get to. Like when you're trying to resize a | symbol. Fastest way I've ever found was to put a span around it, give it a class and then implement the CSS.

<div>并且<span>只是访问您通常无法访问的网站部分的方法。就像当你试图调整一个 | 象征。我发现的最快方法是在它周围放置一个跨度，给它一个类，然后实现 CSS。

That's what they're good for, in my opinion. I'd be interested to hear more or even corrections on what I've written here.

在我看来，这就是他们的好处。我有兴趣听到更多甚至更正我在这里写的内容。

回答by zzzzBov

It sounds like you need to read the HTML specification

听起来您需要阅读HTML 规范

The pelement:

该p元素：

The pelement represents a paragraph.

该p元素表示一个段落。

The divelement:

该div元素：

The divelement has no special meaning at all. It represents its children. It can be used with the class, lang, and titleattributes to mark up semantics common to a group of consecutive elements.

该div元素根本没有特殊含义。它代表它的孩子。它可以与被使用class，lang和title属性语义共同标记到一组连续的元素。

The spanelement:

该span元素：

The spanelement doesn't mean anything on its own, but can be useful when used together with the global attributes, e.g. class, lang, or dir. It represents its children.

该span元素本身没有任何意义，但与全局属性（例如class、lang、 或 ）一起使用时会很有用dir。它代表它的孩子。

The major difference between divand spanis that span is flow content, phrasing content, and palpable content, while a div is only flow contentand palpable content.

divand之间的主要区别span是 span 是flow content, phrasing content, and palpable content，而 div 只有flow contentand palpable content。

Essentially this boils down to:

本质上这归结为：

divelements are block-level elements, and typically may only be placed within other block-level elements, whereas spanelements are inline elements, and may be placed within most other elements.

div元素是块级元素，通常只能放置在其他块级元素中，而span元素是行内元素，可以放置在大多数其他元素中。

The HTML spec defines which elements are acceptable as descendents of each element.

HTML 规范定义了哪些元素可以作为每个元素的后代。