Question

I am learning HTML5, i want to know why these elements are closed differently the first input ends with > and the second ends with /> what difference does it make?

<input name = "howtosite" type = "radio"
              value = "search engine" checked> 

---

<input type = "color" autofocus /> 
              (Hexadecimal code such as #ADD8E6)

Answer 1

Briefly, some terminology: Confusingly, “HTML” now means two things:

• The definition of the various kinds of elements that make up what we use in web pages and such. This is what tells us that there is an element called div and what it’s for.
• One of the two serializations of it (the written form), which tells us we write div elements like this: <div>content</div>.

The other serialization of HTML is XHTML. The two serializations differ in places, because XHTML is XML.

HTML defines some elements that never have content, like <br>, and in the HTML serialization they’re usually written just like that, <br>. In the XHTML serialization that’s a problem, because XML requires that all tags be closed and <br> is just a start tag. Putting the slash (“solidus”) just before the ending > closes the tag, so in XHTML, <br> becomes <br/>. The / is tolerated in the HTML serialization, but it serves no purpose. It only serves a purpose in XHTML. (Note that in really, really old browsers, you may need a space before the solidus, e.g. <br />, but we’re talking very old indeed.)

This is only true for void elements like <br> and <input> that never have any content, and foreign elements (MathML and SVG). You never write <div/>, for instance, even if the div is going to be empty. The correct form of an empty div is always <div></div> (whether in the HTML or XHTML serialization).

Full detail in the specification, and in particular §8.1.2.1.

So regarding your two specific examples: The first is only valid in the HTML serialization. The second is also valid in the HTML serialization, and would be valid in the XHTML serialization if the autofocus attribute had a value (in XML, attributes must have a value, so you have to write autofocus="autofocus").