Html 5: 是 br，br / ，还是 br / ？

I've tried checking other answers, but I'm still confused--especially after seeing W3schools HTML 5 reference.

I thought HTML 4.01 was supposed to "allow" single-tags to just be <img> and  . Then XHTML came along with <img /> and   (where someone said that the space is there for older browsers).

Now I'm wondering how I'm supposed to format my code when practicing HTML 5.

<!DOCTYPE HTML>

Is it  ,   or  ?

转载于:https://stackoverflow.com/questions/1946426/html-5-is-it-br-br-or-br

Simply   is sufficient.

The other forms are there for compatibility with XHTML; to make it possible to write the same code as XHTML, and have it also work as HTML. Some systems that generate HTML may be based on XML generators, and thus do not have the ability to output just a bare   tag; if you're using such a system, it's fine to use  , it's just not necessary if you don't need to do it.

Very few people actually use XHTML, however. You need to serve your content as application/xhtml+xml for it to be interpreted as XHTML, and that will not work in old versions of IE - it will also mean that any small error you make will prevent your page from being displayed in browsers that do support XHTML. So, most of what looks like XHTML on the web is actually being served, and interpreted, as HTML. See Serving XHTML as text/html Considered Harmful for some more information.

XML doesn't allow leaving tags open, so it makes   a bit worse than the other two. The other two are roughly equivalent with the second preferred for compatibility with older browsers. Actually, space before / is preferred for compatibility sake, but I think it only makes sense for tags that have attributes. So I'd say either   or  , whichever pleases your aesthetics.

To sum it up: all three are valid with the first one being a bit less "portable".

Edit: Now that we're all crazy about specs, I think it worth pointing out that according to dev.w3.org:

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.

According to the spec the expected form is   for HTML 5 but a closing slash is permitted.

I think this quote from the HTML 5 Reference Draft provides the answer:

Some elements, however, are forbidden from containing any content at all. These are known as void elements. In HTML, the above syntax cannot be used for void elements. For such elements, the end tag must be omitted because the element is automatically closed by the parser. Such elements include, among others, br, hr, link and meta
HTML Example:
<link type="text/css" rel="stylesheet" href="style.css">
In XHTML, the XML syntactic requirements dictate that this must be made explicit using either an explicit end tag, as above, or the empty element syntax. This is achieved by inserting a slash at the end of the start tag immediately before the right angle bracket.
Example:
<link type="text/css" href="style.css"/>
Authors may optionally choose to use this same syntax for void elements in the HTML syntax as well. Some authors also choose to include whitespace before the slash, however this is not necessary. (Using whitespace in that fashion is a convention inherited from the compatibility guidelines in XHTML 1.0, Appendix C.)

If you're interested in comparability (not compatibility, but comparability) then I'd stick with  .

Otherwise,   is fine.

XML requires all tags to have a corresponding closing tag. So there is a special short-hand syntax for tags without inner contents.

HTML5 is not XML, so it should not pose such a requirement. Neither is HTML 4.01.

For instance, in HTML5 specs, all examples with br tag use   syntax, not  .

UPD Actually,   is permitted in HTML5. 9.1.2.1, 7.

  and   render differently. Some browsers interpret   as   and insert two line breaks

Both   and   are acceptable in HTML5, but in the spirit of HTML,   should be used. HTML5 allows closing slashes in order to be more compatible with documents that were previously HTML 4.01 and XHTML 1.0, allowing easier migration to HTML5. Of course,   is also acceptable, but to be compatible with some older browsers, there should be a space before the closing slash (/).

If you are outputting HTML on a regular website you can use   or  , both are valid anytime you are serving HTML5 as text/html.
If you are serving HTML5 as XHTML (i.e. content type application/xhtml+xml, with an XML declaration) then you must use a self closing tag like so:  .
If you don't the some browsers may flat out refuse to render your page (Firefox in particular is very strict about rendering only valid xhtml+xml pages).
As noted in 1.   is also valid for HTML5 that happens to be generated as XML but served as a regular text/html without an XML declaration (such as from an XSL Transform that generates web pages, or something similar).

To clear up confusion: Putting a space before the slash isn't required in HTML5 and doesn't make any difference to how the page is rendered (if anyone can cite an example I'll retract this, but I don't believe it's true - but IE certainly does a lot of other odd things with all forms of   tags).

The excellent validator at http://validator.w3.org is really helpful for checking what's valid (although I'm not sure you can rely on it to also check content-type).

Well all I know is that   gives a break with a white line and   just gives a break in some cases. This happened to me when I was setting up an IPN-script (PHP) and sent mails and checked the inbox for it. Dont know why but I only got the message to look neat using both  and 

Have a look at the mail here: http://snag.gy/cLxUa.jpg

The first two sections of text is seperated by  , hence the whitespace lines, the last three rows of text in the bottom and the last section is seperated by   and just gives new row.

In HTML (up to HTML 4): use  

In HTML 5:   is preferred, but   and   is also acceptable

In XHTML:   is preferred. Can also use   or  

Notes:

  is not valid in HTML 5, it will be thought of as two line breaks.
XHTML is case sensitive, HTML is not case sensitive.
For backward compatibility, some old browsers would parse XHTML as HTML and fail on   but not

Reference:

I would recommend using for the following reasons:

1) Text and XML editors that highlight XML syntax in different colours will highlight properly with but this is not always the case if you use

2) is backwards-compatible with XHTML and well-formed HTML (ie: XHTML) is often easier to validate for errors and debug

3) Some old parsers and some coding specs require the space before the closing slash (ie: instead of ) such as the WordPress Plugin Coding spec: http://make.wordpress.org/core/handbook/coding-standards/html/

I my experience, I have never come across a case where using is problematic, however, there are many cases where or especially might be problematic in older browsers and tools.

  is sufficient but in XHTML   is preferred according to the WHATWG and according to the W3C.

To quote Section 8.1.2.1 of HTML 5.2 W3C Recommendation, 14 December 2017

Start tags must have the following format:
…
After the attributes, or after the tag name if there are no attributes, there may be one or more space characters. (Some attributes are required to be followed by a space. See §8.1.2.3 Attributes below.)
Then, if the element is one of the void elements, or if the element is a foreign element, then there may be a single U+002F SOLIDUS character (/). This character has no effect on void elements, but on foreign elements it marks the start tag as self-closing.

If you use Dreamweaver CS6, then it will autocomplete as  .

To validate your HTML file on W3C see : http://validator.w3.org/

  and   render differently in some browsers, so choosing either over the other isn't going to hurt your project, but do expect a bulk find..replace to affect the page render in some browsers, which may result in extra work for yourself or even embarrassment should the change affect nothing in your test browser, but break it in the preferred browser of your clients'.

I prefer   since it is what I have used since Erwise and Netscape Navigator (early web browsers), but there's no reason not to choose   instead. It may be useful for some preprocessing, comparability, etc.

Even if your choice boils down to preferring the look of one over the other, or you (or your favourite HTML editor e.g. Dreamweaver) might like your code to be xml compliant. It's up to you.

A quick side note:

Not to be confused with br, but in addition you may also consider using wbr tags in your HTML: A word break opportunity tag, which specifies where in a text it would be ok to add a line-break.

For further reading, please have a read of the HTML5 spec.

As many others have covered, both   and   are acceptable.

I guess the tradeoff is the better readability and backward compatibility of   versus sending one less character to the end users with  .

And since Google uses   so will I.

(Of course keep in mind that they might be serving me   because I'm using Chrome which they know supports it. In IE they might still be serving  )

Both   and   will do fine but I prefer   because it's slightly more logical. It is logical to expect a closing tag whenever there is an opening tag. Therefore your code is slightly easier to read if you don't use an opening tag when there isn't going to be a closing tag.

All browser (except possibly some very old ones that don't matter) will display both exactly the same. However,   is not xHTML complient.

In HTML   and in XHTML  .

I will suggest you to use  .

  works just fine. The stricter versions like XHTML require you to add the closing, and really old versions of HTML that do not include a DOCTYPE make   a non-void tag, like  .

Sum up:   is fine. Other ones are also just fine.

Most of the cases in HTML, the tags are in pair. But for a line break you don't need a pair of tags. Therefore to indicate this, HTML uses   format.   is the right one. Use that format.

  tag has no end tag in HTML In XHTML, the   tag must be properly closed, like this:  

In XML every tag must be closed. XHTML is an extension of XML, hence all the rules of XML must be followed for valid XHTML. Hence even empty tags (nodes without child nodes) like
should be closed. XML has a short form called self closing tags for empty nodes. You can write  as . Hence in XHTML   is used.

HTML is very lenient in this regard, and there is no such rule. So in HTML empty nodes like  <hr> <meta> etc are written without the closing forward slash.

HTML

<br>
<hr>
<meta name="keywords" content="">
<link rel="canonical" href="http://www.google.com/">

XHTML

<br />
<hr />
<meta name="keywords" content="" />
<link rel="canonical" href="http://www.google.com/" />

Not all tags can be self closed. For example, a tag like <script src="jQuery.min.js" /> is not allowed by XHTML DTD.

In validation, of this question, it really depends on what !DOCTYPE you are trying to get verification through.

My personal favorite is 4.01 Trans where I just use the   and it clears the warnings and errors that may have popped up during validation

Strict is a much more complicated beast, It HATES "SHORTTAGS" and quite literally only wants the  

In HTML5 or the "LAX" of the code world, there really isn't a right answer because it detects every example you put up there as correct......

In the end, I think all that matters is what validation YOU PREFER or the person that you are working for prefers... with the lackadaisical movement in code strictness in html5 we are seeing some VERY LAZY CODERS

Ummm.....does anyone know a SINGLE vendor, user-agent, or browser maker that has ever followed the W3C Specifications 100%??? So if HTML5 says it supports all three break element versions, you can bet the vendors support the same and even more sloppier versions!

The ONLY thing that matters in this debate is to CONSISTENTLY use coding that also happens to follow XML specifications as well as HTML specifications when possible. That means you should use the correct XML version of the break tag and encourage all your team to do the same:

<br />

The same space-slash format should apply for the img, a, hr, and meta tags in your code. Why? Because:

Its is backwards compatible with older XHTML user-agents / browsers
The browser vendors support the XML version anyway so the HTML5 specification is moot.
The sloppy implementations of most user-agents today, in the past, and in the future will accept it.
It allows your markup to be comparable with XML standards should you need to go back to creating XHTML/XML documents from your markup.
It's "good coding practice" for ALL WEB DEVELOPERS to keep using solid markup practices that follow XML, including coding in all lower case, quoted attributes, escaped XML characters, etc. etc. Why? In the future if you have to switch to XML data you automatically code and think in XML.
We can only hope that in the future World Wide Web, we move away from private vendor-implemented standards and go back to solid, reliable, verified markup that parses faster, moves data over the wires faster, and make our future Internet a more standardized medium using XML.

Besides, in the robotic and machine world that's here, where robots don't have the same Human-interface coding problems HTML5 solves for us, they will gladly go back to XML data systems and parse such UI web pages much faster when converted to XML data.

In HTML5 the slash is no longer necessary:  , <hr>

The elements without having end tags are called as empty tags. In html 4 and html 5, end tags are not required and can be omitted.

In xhtml, tags are so strict. That means must start with start tag and end with end tag.

IMHO it is better to use the regular notation ( ) instead of the forgiving notation ( ) for the following reasons:

Consistency

In your HTML there is probably some SVG and SVG only support the regular notation (e.g. <rect />).

Hackability

It is not a case that frameworks like React and NativeScript use an XML notation.
Your markup code will be easier to parse.

Clarity

The regular notation is easier to read and understand, even late at night.

Specifications

Both   and   are valid HTML tags.

Conclusion

If you use a full-fledged text editor configure it to use the regular notation (which is called XHTML by Emmet).
For instance, in Visual Studio Code you just have to add the following line to your settings:

"emmet.syntaxProfiles": {"html": "xhtml"}