Menu
In HTML5 is it still appropriate to close a <br> tag with <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?!
546
In HTML, the <br> tag is used for line break. It is an empty tag i.e. no need to add an end tag. Writing <br> tag is perfectly fine.
↑ The full list of valid self-closing tags in HTML5 is: area, base, br, col, embed, hr, img, input, keygen, link, meta, param, source, track, and wbr.
A self-closing tag is an element of HTML code that has evolved in the language. Typically, the self-closing tag makes use of a “/” character in order to effectively close out a beginning tag enclosed in sideways carets.
Self Closing HTML Elements The br tag inserts a line break (not a paragraph break). This tag has no content, so it is self closing.
From the W3C specification for HTML:
The following is a complete list of the void elements in HTML:
area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr
Void elements only have a start tag; end tags must not be specified for void elements.
Start tags consist of the following parts, in exactly the following order:
< character./ character, which may be present only if the element is a void element.> character.From this it seems that we can use either <br> or <br/>. However, the end tag </br> is not valid, so don't use <br> </br>.
Running the following through the HTML Validation Service indicates as much.
<!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.
Edit: As noted by Brad, <br /> is also valid XHTML, so perhaps it is best to choose this form.
95
IMHO I think its best to adhere to XHTML standards, even closing the so-called void elements as noted by @Alex. If your code is also valid XML then you may find better tool support for managing your code
<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. 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...
<!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
34
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.
Decide on one approach and stick to it, we decided to go with xhtml style syntax but we don't acutally use 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:
<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.
I hope that you decide to go with xhtml 'sytle' syntax for your own sanity!
38
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. (The fact its a void element means that as you say; <br> </br> is nonsensical)
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
