In HTML5 is it still appropriate to close a <code> </code> tag with <code> </code>? 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? <pre class="prettyprint lang-html prettyprint-override"><code>someLines of txt // How you see a lot of people doing it and then some // XHTML style! Should I still be doing this? ow im not done yet.. // No one does this right? RIGHT?! </code></pre>

From the W3C specification for HTML: <ul> <li> The following is a complete list of the void elements in HTML: <ul> <li> <code>area</code>, <code>base</code>, <code>br</code>, <code>col</code>, <code>command</code>, <code>embed</code>, <code>hr</code>, <code>img</code>, <code>input</code>, <code>keygen</code>, <code>link</code>, <code>meta</code>, <code>param</code>, <code>source</code>, <code>track</code>, <code>wbr</code> </li> </ul> </li> <li>Void elements only have a start tag; end tags must not be specified for void elements.</li> <li> Start tags consist of the following parts, in exactly the following order: <ul> <li>A <code><</code> character.</li> <li>The element’s tag name.</li> <li>Optionally, one or more attributes, each of which must be preceded by one or more space characters.</li> <li>Optionally, one or more space characters.</li> <li>Optionally, a <code>/</code> character, which may be present only if the element is a void element.</li> <li>A <code>></code> character.</li> </ul> </li> </ul> From this it seems that we can use either <code> </code> or <code> </code>. However, the end tag <code></code> is not valid, so don't use <code> </code>. Running the following through the HTML Validation Service indicates as much. <pre class="prettyprint"><code><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Testing void elements</title> </head> <body> some lines of txt and then some more I'm not done yet...  </body> </html> </code></pre> So use either <code> </code> or <code> </code>, just make sure you use them consistently. Edit: As noted by Brad, <code> </code> is also valid XHTML, so perhaps it is best to choose this form.

It is more important that you are consistent, if you use the <code><!DOCTYPE html></code> 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: <pre class="prettyprint"><code><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> </code></pre> 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: <pre class="prettyprint"><code><video id=“vid1” data-someting="my_val" controls> </code></pre> This way we don't have to use the redundant syntax (in my opinion): <pre class="prettyprint"><code><video id=“vid1” controls="controls"> </code></pre> Just because html5 lets us leave out closing tags, even the <code></code> tag, it doesn't make it right. I hope that you decide to go with xhtml 'sytle' syntax for your own sanity!

What are the allowed ways to close self-closing tags for void elements such as in HTML5?

In HTML5 is it still appropriate to close a   tag with  ?

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?!

How do you close a BR tag in HTML?

In HTML, the tag is used for line break. It is an empty tag i.e. no need to add an end tag. Writing tag is perfectly fine.

What are the self closing tags in HTML5?

↑ 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.

How do I close a self closing tag?

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.

Is BR a self closing tag?

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:
- 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   or  . However, the end tag  is not valid, so don't use  .

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   or  , just make sure you use them consistently.

Edit: As noted by Brad,   is also valid XHTML, so perhaps it is best to choose this form.

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

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  tag, it doesn't make it right.

I hope that you decide to go with xhtml 'sytle' syntax for your own sanity!

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;   is nonsensical)

What are the allowed ways to close self-closing tags for void elements such as <br> in HTML5?

Tags:

html

Alex

People also ask

4 Answers

Chris

Brad

Neil

Alex K.

Recent Activity

Donate For Us