简体   繁体   English

HTML5 中的结束标记

[英]Closing tags in HTML5

In HTML5 is it still appropriate to close a <br> tag with <br /> ?在 HTML5 中用<br />关闭<br>标签仍然合适吗?

This obviously also applies to all other single tags.这显然也适用于所有其他单个标签。 I realize this doesn't actually affect how stuff works, but what is best practice here?我意识到这实际上并不影响东西的工作方式,但这里的最佳实践是什么?

someLines of txt <br>            // How you see a lot of people doing it
and then some <br />             // XHTML style! Should I still be doing this? 
ow im not done yet.. <br> </br>  // No one does this right? RIGHT?!

From the W3C specification for HTML :来自HTMLW3C 规范

  • The following is a complete list of the void elements in HTML:以下是 HTML 中 void 元素的完整列表:

    • area , base , br , col , command , embed , hr , img , input , keygen , link , meta , param , source , track , wbr area , base , br , col , command , embed , hr , img , input , keygen , link , meta , param , source , track , wbr
  • Void elements only have a start tag; void 元素只有一个开始标签; end tags must not be specified for void elements.不得为空元素指定结束标记。

  • Start tags consist of the following parts, in exactly the following order:开始标签由以下部分组成,完全按照以下顺序:

    • A < character. <字符。
    • The element's tag name.元素的标签名称。
    • Optionally, one or more attributes, each of which must be preceded by one or more space characters.可选,一个或多个属性,每个属性前面必须有一个或多个空格字符。
    • Optionally, one or more space characters.可选,一个或多个空格字符。
    • Optionally, a / character, which may be present only if the element is a void element.可选,一个/字符,它可能只在元素是空元素时出现。
    • A > character. >字符。

From this it seems that we can use either <br> or <br/> .由此看来,我们可以使用<br><br/> However, the end tag </br> is not valid, so don't use <br> </br> .然而,结束标记</br>无效的,所以不要用<br> </br>

Running the following through the HTML Validation Service indicates as much.通过HTML 验证服务运行以下内容表明了这一点。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Testing void elements</title>
</head>
<body>
    some lines of txt <br>
    and then some more <br />
    I'm not done yet... <br> </br> <!-- This line generates an error -->
</body>
</html>

So use either <br> or <br/> , just make sure you use them consistently.所以使用<br><br/> ,只要确保你一致地使用它们。

Edit : As noted by Brad, <br /> is also valid XHTML, so perhaps it is best to choose this form.编辑:正如 Brad 所指出的, <br />也是有效的 XHTML,所以也许最好选择这种形式。

IMHO I think its best to adhere to XHTML standards, even closing the so-called void elements as noted by @Alex.恕我直言,我认为最好遵守 XHTML 标准,甚至关闭@Alex 指出的所谓的void元素。 If your code is also valid XML then you may find better tool support for managing your code如果您的代码也是有效的 XML,那么您可能会找到更好的工具支持来管理您的代码

<br>  // not valid XML without a closing tag

<br /> // valid XML and I prefer this

<br></br>  // valid XML but unnecessary clutter

In anycase if you should run your code through the HTML Validation Service .无论如何,如果您应该通过HTML 验证服务运行您的代码。 As long as it's valid you're then only dealing with coding style, of which everyone will have their own personal slant on the issue.只要它是有效的,那么你就只处理编码风格,每个人在这个问题上都会有自己的个人倾向。

[EDIT] [编辑]

To clarify my answer, I suggest the use of either of these XHTML headers...为了澄清我的答案,我建议使用这些XHTML标头中的任何一个...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

If you're coding for HTML5 then the clients/browsers should support the strict standard如果您正在为 HTML5 编码,那么客户端/浏览器应该支持严格的标准

It is more important that you are consistent, if you use the <!DOCTYPE html> then tags that are void or self closing as some say, will be handled for you by the parser.更重要的是你保持一致,如果你使用<!DOCTYPE html>那么像一些人所说的那样无效或自关闭的标签将由解析器为你处理。

Decide on one approach and stick to it, we decided to go with xhtml style syntax but we don't acutally use xhtml.决定一种方法并坚持下去,我们决定使用 xhtml 风格的语法,但我们实际上并不使用 xhtml。 Even though the parser is more lenient its other people that need to be able to understand your markup, so if you have a standard and everyone buys in to this, then everyone is singing from the same hymn sheet.即使解析器对需要能够理解您的标记的其他人更宽容,所以如果您有一个标准并且每个人都认同这一点,那么每个人都在唱同一张赞美诗。

Why do we need conventions?为什么我们需要约定? Because all the following are valid:因为以下所有内容都是有效的:

<META CHARSET=UTF-8>        
<META CHARSET=UTF-8 />      
<META CHARSET="UTF-8">      
<META CHARSET="UTF-8" />        
<meta charset=utf-8>        
<meta charset=utf-8 />      
<meta charset="utf-8">      
<meta charset="utf-8" />        
<MeTa CHARset=utF-8>

Another thing to think about is html5 attributes, we decided to use the boolean style attributes at the end of a set of attributes and always use quotes around the others eg:另一件要考虑的事情是 html5 属性,我们决定在一组属性的末尾使用布尔样式属性,并始终在其他属性周围使用引号,例如:

<video id=“vid1” data-someting="my_val" controls>

This way we don't have to use the redundant syntax (in my opinion):这样我们就不必使用冗余语法(在我看来):

<video id=“vid1” controls="controls">

Just because html5 lets us leave out closing tags, even the </p> tag, it doesn't make it right.仅仅因为 html5 允许我们省略结束标记,甚至是</p>标记,它并没有使它正确。

I hope that you decide to go with xhtml 'sytle' syntax for your own sanity!我希望您决定使用 xhtml 'sytle' 语法以保持您的理智!

The / is valid & ignored in html 5 for void elements , of which br is one, so its entirely up to you although personally I would get out of the habit as its a legacy thing. /在 html 5 中对于void 元素有效并被忽略,其中br是其中之一,所以这完全取决于你,尽管我个人会摆脱这种习惯,因为它是一个遗留的东西。 (The fact its a void element means that as you say; <br> </br> is nonsensical) (事实上​​它是一个空元素意味着正如你所说; <br> </br>是荒谬的)

After learning about self-closing tags from the linked article I came to know that <br> , <br/> or <br /> all are valid in HTML5.从链接的文章中了解 自闭合标签后,我开始知道<br><br/><br />在 HTML5 中都有效。

But if you write <br/> or <br /> then they will eventually be converted to <br> in HTML5 by browsers.但是如果你写<br/><br />那么它们最终会被浏览器转换成 HTML5 中的<br>

Also if you write <br></br> they browser will not generate some error but it will read it as 2 <br> tags.此外,如果您编写<br></br>它们的浏览器不会产生一些错误,但会将其读取为 2 个<br>标签。

someLines of txt <br>            // This is completly valid and recommended
and then some <br />             // XHTML style! should be written like this in XHTML but in HTML5 you can just write <br>
ow im not done yet.. <br> </br>  // Even if you do this then no error will generate. Instead browser will read it as 2 <br> tags

Here is how:方法如下:

<p>This is paragraph with &lt;br&gt;<br> and &lt;br/&gt;<br/> and then &lt;br /&gt;<br />.</p>
<p>closing br is wrong way <br></br> but browser read it as 2 br.</p>

How it looks in the browser:它在浏览器中的外观:

在此处输入图片说明

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM