Is <br> or <br/> or <br />right?

Asked

Viewed 13,920 times

69

I see each one using a way, I even vary the shape in a few moments and all work, but what is the right one? It depends on HTML version or the browser?

html html5 encoding-style
  • 1

    Interesting link: http://stackoverflow.com/questions/1659208/why-br-and-not-br

8 answers

54


HTML has always used <br> only and - more generally - <tag> and ready whenever an element is considered "empty" (i.e. it cannot receive sub-elements). However, with the advent of XHTML (an attempt to unite HTML and XML into a unified dialect) some people were encouraged to always "close" the empty elements using a slash at the end - <br/> or <br />, since the white space is free inside the tag. The parsers have come to accept this format to some extent, and HTML5 has standardized the behavior of tags void, so that one can use one or the other and still be within the standards.

(Clarifying: as long as the semantics of the empty/foreign elements are clear in your head, and you don’t make the mistake of trying to close a non-empty tag like this - eg.: <textarea/> - the use of one or another format becomes only a matter of style, subjective as it were.)

Meanwhile, there is a small difference between the use of a self-closing tag in HTML and XML (including XHTML): If you write <tag/>, and tag is considered a tag "empty" (void) one parser standards-compliant HTML will interpret this as simply <tag> (i.e. he throws away the bar), while a parser XML will treat this semantically equivalent to <tag></tag>. On the other hand, if tag for a foreign element (for example a SVG or Mathml embedded in HTML) then both will interpret how <tag></tag>. If it is neither empty nor foreign, the behavior is undefined (and therein lies the danger).

In the case of br It makes little difference, because at least I’ve never seen anyone try to write <br></br>... But other tags you can do. Try saving the text below in a file teste.html:

<div>
    Teste
    <div/>
    Teste
</div>

...open it, and inspect its content in the browser. You will probably see something like this (e.g.: Chrome):

<html>
    <head></head>
    <body>
        <div>
            Teste
            <div>
                Teste
            </div>
        </div>
    </body>
</html>

While if you save that same file as teste.xhtml, the content displayed [when inspecting] will be this:

<div>
    Teste
    <div><div/>
    Teste
</div>

what happened? In the case of HTML, as described, the bar was thrown out, so what the parser found was the following (indented for better viewing):

<div>
    Teste
    <div>
        Teste
    </div>

And for its "permissiveness" (i.e. robustness in the face of poorly formed content - in this case, a tag div open but not closed [from the point of view of parser]), he added a </div> at the end. It should be noted that this code presented is not considered valid HTML, but the fact of browser not "complain" can lead someone to think that it is ok to use auto-lock tags on any element - such as in XML - and this is not true.

In the case of br, however, there is no practical difference, as it has already been said it is considered an empty element by the HTML specification, so it will never be interpreted as having a content. Whether the final bar is present or not, the element ends right there, and that’s it.

  • 3

    P.S. I just remembered where, in the past, this misconception has already "bit" me a lot: NEVER write <textarea/> when you want an initially empty text area! <input/> can, but <textarea/> no. The browser will screw you up in the most unexpected/unexplainable way possible...

  • The shape may be unexpected but the reason not, unlike the <input>, the <textarea> it is not self ending even and finish it in the same tag should create a problem, even if predictable. If you had a little more information your answer would be very interesting to accept.

  • I refer to hoping (erroneously) that a <textarea/> be interpreted as <textarea></textarea>, as in XML. I had this expectation, before finding out about the tags void, which brought me a lot of headache. As for the answer, I’ll give her an improvement.

23

<br/> and <br /> are essentially the same thing. The space is usually used to facilitate visual identification of the bar and is recommended, but not required, by the XHTML specification.

If you are using the XHTML specification this is the correct way to use the tag. Whichever browser that I know accepts poorly formed HTML or XHTML independent of determination of being using XHTML. In practice you use if you want.

No one I know actually uses XHTML consciously. It’s a dead specification. And some people even consider something that shouldn’t be used.

It’s no problem to use it if you feel more comfortable to identify better than the tag is auto-terminating, use. If you think for any reason that the code should be XHTML compatible, always use.

I know some people who prefer this form for use with tools that only understand it.

HTML has never required this and HTML5 explicitly leaves the use of the bar as optional only for visual effect. Of course it prevents use in tags that need a terminator.

Note that official HTML5 examples never use the slider. Strictly thinking of the original HTML intent the slider should not be used.

As always it is important to keep a standard. Either never use, or always use. But don’t worry if it’s right or wrong, mix with legacy codes.

Obviously the same goes for others tags that are self-existent.

Documentation of <br>. Documentation of elements void.

Is there any doubt about what the <br> and the specification says nothing about the name being one thing or another in full. I saw a lot in Portuguese saying that it is break Row, but there’s almost no such reference in English, so I think it’s a Brazilian invention and it’s just break even, including Row is not the line translation in the sense that is used on a page. Until someone shows me something canonical that says that is not it I get with break, although it is not very relevant, it does not help to understand the concept better if you know if it is one thing or another.

  • Taking advantage of the line, it could also explain the use of inputs with the \\ closure, I do not particularly use, but I have seen people using and never understood if there really is a need

  • You want to know if you should use bar on <input>. Take a look at the penultimate paragraph of the answer.

17

This is a comment on Maniero’s response, but it’s too big to fit in one comment. His answer is absolutely correct for today, but it does not explain why there is this confusion between forms. He says:

Any browser I know accepts poorly formed HTML or XHTML independent of being determination using XHTML.

That in general is true. It is true if the document is being served as text. However, for a while they said that all XML, including XHTML documents, should be served with the appropriate MIME-type - in the case of XHTML, it would be application/xhtml+xml. When served as such, the browser validates the document as XML, and complains if it encounters any syntax error, displaying an error message instead of the page. At the time when they started to defend this idea, only Firefox was doing it right, if memory serves. The fact is that it didn’t stick, XHTML died, and HTML5 came to simplify things. That is, try to let go of the old habits, and use the doctype of HTML5, and simply <br> (although the bar variants at the end are also valid).

11

(The original title of the question seemed to me a question between two formats - <br></br> and <br />. The following answer takes this premise into account.)

<br></br> is an invalid sequence, since the element <br> is an empty element (void element, in English).

An empty element is any element that cannot, by definition, have any content between the start and end tags; the only way an empty element has data is via attributes.

Therefore, the only acceptable format between the two presented is <br />.

Sources:

Void Element Definition, W3C (in English)

  • 2

    <br></br> caused rendering problems in some browsers. I think it ended up interpreted as 2x <br>. I don’t know how it looked in the current browsers.

  • @bfavaretto exactly - if memory doesn’t fail me, every Webkit implementation performs the parse of <br></br> as two separate elements.

  • Ahhhmmm... Too bad it’s wrong. Neither does the link you posted say that (there’s an "Optionally" there). Bigown’s answer is right.

  • 4

    I think the question actually referred to <br>, <br/> (no space) or <br /> (with space), but I thought it was good that you raised the issue of the closing tag as well.

  • @Feel free to specify the part where I’m wrong. My interpretation of the question asked by the OP took into account the opening and closing of the element br: This, according to the W3C, is not valid. Mention: 'A void element is an element Whose content model Never Allows it to have Contents under any Circumstances' (griffin my. ) A comma makes the difference, in this case.

  • Well, if the title has changed, that’s what caused confusion, sorry :-| (I’m glad I decided to comment instead of going negative like crazy, haha). I referred to the excerpt from the page you posted says start tags consist of: «(...) 4. Optionally, one or more space characters. 5. Optionally, a "/" Character, which may be present only if the element is a void element. (...)» So both <br>, and <br/> and <br /> are right. And, yes, of course you don’t use <br></br> in HTML :-)

  • 1

    Complementing @Onosendai’s reply Check your website’s url on https://validator.w3.org They are responsible for dictating the rules of html. This site checks the entire informed page, all tags html.

Show 2 more comments

4

In my Visual Studio when I type <br it automatically completes to <br />, making us think it’s right <br />. But it is known that in HTML <br> is suitable, and in XHTML <br />.

You can change the Visual Studio setting to stop completing the <br>,<img>,<hr> and etc with /> , accessing the menu

Tools -> Options -> Text Editor -> HTML -> Advanced-> XHTML coding style = False

Note: This in Visual Studio 2013

  • 3

    Actually, in HTML5 the bar is optional.

2

  • Hi Gabriel! You can add text (and translation) response to the w3c link?

-1

In files whose extension is . html you can use all three <br>, <br/> and <br /> interpolated without causing damage but when the extension is . xhml I remember being required the presence of / closing for all tag soon <br/> and <br /> were valid, this comparison can be seen in w3schools

  • 1

    The extension differs little, what counts is the mime-type, if the mime-type is application/xhtml+xml on the server then yes will be required the use of <?xml ?> and /> in tags like <input /> and <br />, .xhtml is only valid for local files as the browser will not access a server to obtain the document type. Note: w3schools is not a good source, if reading about HTML and XML read http://www.w3.org, note that w3schools and w3c have no link, they only use W3 to gain notoriety.

  • but I’ve already changed the . html extension to . xhtml and browser error was returned which can be viewed in this image: http://xhtml.com/en/xhtml/serving-xhtml-as-xml/

  • 1

    Friend is what I said .xhtml only valid for LOCAL ARCHIVES (protocol file:///), to a server you can pass .html and still send a mime-type saying that it is application/xhtml+xml.

-1

For xhtml the right is <br/>, and for html the right is <br>.

It depends on the doctype you use.

Browser other questions tagged html html5 encoding-style

You are not signed in. Login or sign up in order to post.