CODEWITHSUNDEEP
html
Dan
Dan

Reputation: 57881

Should I enclose tags with /> or not in HTML5?

First, I looked at html5rocks.com sources. Looks like trusted site. And they close tags there.

 <link rel="shortcut icon" href="/favicon.ico" />

Then I looked at HTML5demos, and they don't

 <link rel="stylesheet" href="css/html5demos.css">

Upvotes: 8

Views: 354

Answers (5)

cdeszaq
cdeszaq

Reputation: 31280

Void Elements in HTML5 can be closed with either /> or just >. Foreign Elements (ie. Elements from the MathML namespace and the SVG namespace), however, can be self-closing and do require their opening tag to be completed with />.

Since the HTML5 specification doesn't provide much guidance on which way would be better, we must consider other aspects when deciding to close Void Elements with \> or >. Here are the following aspects I like to consider when making this decision for a project:

  1. Maintainability

    I personally find it much easier to spot mistakes, especially tag-pairing mistakes, and generally comprehend the file, if it uses /> tag closings for Void Elements. This is even more true when there are also Foreign Elements, since those must use /> tag closings.

    I've also found many syntax highlighting rule sets to be not 100% HTML5-compliant and can get confused by not using /> tag closings with elements that do not have a separate closing tag. This varies by editor, of course, and many IDEs have more robust syntax highlighting that other more simple editors, so your experience may differ, but if maintainability and ease of editing is important, this is one factor that can be often overlooked.

  2. Page size

    If you have a large number Void Elements, and page performance is crucial for your application, removing non-required characters will help to reduce the payload size for your page. This means that your response can be sent in a smaller number of packets, meaning that there are fewer round-trips needed, which results in a faster response overall.

    However, for 99% of applications out there, there are many other things to spend your time and effort on optimizing that will have a much larger impact on page load time than removing extraneous / characters from Void Elements.

  3. Machine Readability

    Along the same lines as syntax highlighting rules not being as flexible as they need to be, you will likely find the same is true for HTML and/or XML processing libraries that you might want to use to process an HTML page. You will likely find syntax that is closer to XML is better supported by processing libraries, and if you are expecting other developers to process your HTML, having the most broadly supported syntax will allow them to use a wider array of tools.

Conclusion
If, at the end of the day, you decide that you do still need the page size reduction you can gain by removing the extra / characters, I think the best route to take would be to pass all of your HTML through a filter that can parse the HTML and remove the characters for you automatically where the HTML5 spec allows. This has the advantage of not sacrificing maintainability, while still giving you the reduction in page size. You can even elect to not pass your output through this filter if you know the request is intended to be parsed by other code, which lets you keep the machine readability aspect there as well.

The downside is that you have an extra processing step in your pipeline, which adds complexity and may or may not offset any page load speed gains you get.

Ultimately, you should measure the speed and payload size of your pages, and combine those measurements with how you want to prioritize the aspects listed above, and make the call for your specific project. There is no One Size Fits All answer, but the right choice is probably some sort of middle ground.

Upvotes: 1

kapa
kapa

Reputation: 78681

It is optional in HTML5. You decide whether you use it, or not.

Personally I find it more readable to include that /.

Upvotes: 3

Fischermaen
Fischermaen

Reputation: 12458

Even if it's optional, I would prefer using /, it makes code more readable in my oppinion. Otherwise I have to read on to find out if there is a closing tag for the actual tag or not.

Upvotes: 1

Saeed Neamati
Saeed Neamati

Reputation: 35822

What you refer to, is called Void Elements in HTML5 specification, and according to the specification, they may have the / character or not, just before their closing > character.

See the section 8.1.2.1 Start tags, item 6 from HTML5 Specification, which says:

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.

Upvotes: 5

GordonM
GordonM

Reputation: 31730

It's entirely optional. However, if you ever want to process a HTML5 file with an XML parser then i'd be inclined to include them.

Upvotes: 8

Related Questions