1

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)
Ruru Morlano
  • 209
  • 1
  • 4
  • 9

1 Answers1

3

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").

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • It's important to say that in HTML 5, it doesn't matter either way, as both are valid. – Madara's Ghost Jan 29 '13 at 05:39
  • Using or not using the solidus – Madara's Ghost Jan 29 '13 at 05:41
  • @MadaraUchiha I think it's only NS5/IE4 (or some other extreme legacy/fringe) browsers that didn't accept `
    ` as `
    `. I usually see `
    ` as [the "compatible" way](http://stackoverflow.com/questions/1946426/html-5-is-it-br-br-or-br) to write it under HTML 4 / XHTML, though. (Writing `
    ` is a *different* issue.)     –  Jan 29 '13 at 05:41
  • Since the question is regarding HTML 5, I can safely argue this isn't an issue – Madara's Ghost Jan 29 '13 at 05:43
  • @MadaraUchiha Then why bring up HTML5 (or not) at all? :p –  Jan 29 '13 at 05:44
  • @MadaraUchiha: It *does* matter if you're using the XHTML serialization of HTML5. In the HTML serialization of HTML5, I believe I covered it: *"The `/` is tolerated in HTML, but it serves no purpose. It only serves a purpose in XHTML."* :-) – T.J. Crowder Jan 29 '13 at 05:44
  • thanks, I have to find out what you are talking about with Serialization I heard of the term in Java only. thanks anyway – Ruru Morlano Jan 29 '13 at 16:17
  • @RuruMorlano: It's a similar concept, but basically, in this context it just means "How you write it down." :-) HTML defines a `br` element (line break); the HTML serialization of a `br` element is `
    ` (e.g., that's how you write it in an HTML file); the XHTML serialization of a `br` element is `
    ` (that's how you write it in an XHTML file).     – T.J. Crowder Jan 29 '13 at 16:25
  • @RuruMorlano: Hope that helped. – T.J. Crowder Jan 30 '13 at 06:25
  • @T.J.Crowder Yeah of course it helped. I didn't know that. I just jump to what matters for now, thanks tho...I will keep this in mind. – Ruru Morlano Feb 01 '13 at 04:33
  • @RuruMorlano: No worries, I could see you were new here, as we all were once. :-) Best, – T.J. Crowder Feb 01 '13 at 08:52