Are Self-Closing Input Tags Valid in HTML 4

Are self-closing input tags valid in HTML 4?

The syntax is valid in some places but doesn't mean the same as in XHTML, so don't use them.

In HTML 4 <foo /> (where foo is the name of an element defined as EMPTY) means the same as <foo>> which means the same as <foo>> (although almost no browser supports the syntax correctly, Emacs-W3 used to, but broke compatibility with the standard in favour of rendering so-called HTML compatible XHTML 1.0 documents correctly).

This is, therefore, valid in places where you can have a > such as anywhere you are allowed an <img> but not in other places (such as an <hr> that is a child element of the <body> (in Strict)).

The interaction with the rules for optional start and end tags adds more complication. In a Transitional document, this is valid:

<link …/>
<h1>Hello, world</h1>

and means:

<link>
</head>
<body>
>
<h1>Hello, world</h1>

This shorthand syntax could be useful, or at least a time saver, for things like:

<title/The quick brown fox/

instead of the more verbose:

<title>The quick brown fox</title>

… but the syntax has never been well supported and the specification says it should be avoided.

Are (non-void) self-closing tags valid in HTML5?

  • (Theoretically) in HTML 4, <foo / (yes, with no > at all) means <foo> (which leads to <br /> meaning <br>> (i.e. <br>>) and <title/hello/ meaning <title>hello</title>). I use the term "theoretically" because this is an SGML rule that browsers did a very poor job of supporting. There was so little support (I only ever saw it work in emacs-w3m) that the spec advises authors to avoid the syntax.

  • In XHTML, <foo /> means <foo></foo>. This is an XML rule that applies to all XML documents. That said, XHTML is often served as text/html which (historically at least) gets processed by browsers using a different parser than documents served as application/xhtml+xml. The W3C provides compatibility guidelines to follow for XHTML as text/html. (Essentially: Only use self-closing tag syntax when the element is defined as EMPTY (and the end tag was forbidden in the HTML spec)).

  • In HTML5, the meaning of <foo /> depends on the type of element:

    • On HTML elements that are designated as void elements (essentially "An element that existed before HTML5 and which was forbidden to have any content"), end tags are simply forbidden. The slash at the end of the start tag is allowed, but has no meaning. It is just syntactic sugar for people (and syntax highlighters) that are addicted to XML.
    • On other HTML elements, the slash is an error, but error recovery will cause browsers to ignore it and treat the tag as a regular start tag. This will usually end up with a missing end tag causing subsequent elements to be children instead of siblings.
    • Foreign elements (imported from XML applications such as SVG) treat it as self-closing syntax.

Is a self-closing li tag valid?

No, it isn't. You can test this with a validator.

The / is an error so browsers will ignore it, treating it as a start tag.

The <p> elements are therefore children of the <li> elements (which they have to be since they aren't allowed to be children of <ul> elements).

The next <li> (or </ul>) implicitly ends the previous <li> because the end tag is optional for that element.

Closing HTML input tag issue

These are void elements. This means they aren't designed to contain text or other elements, and as such do not need — and in fact, cannot have — a closing tag in HTML.1

However, they should have a <label> associated with them:

<input id="my_id" type="radio" name="radio_name">
<label for="my_id">Radio Label</label>

Radio buttons by nature can't contain text anyway, so it wouldn't make sense for them to accept text or other elements as content. Another issue with a control that does accept text as input: should its textual content then be its value, or its label? To avoid ambiguity we have a <label> element that does exactly what it says on the tin, and we have a value attribute for denoting an input control's value.


1 XHTML is different; by XML rules, every tag must be opened and closed; this is done with the shortcut syntax instead of a </input> tag, although the latter is equally acceptable:

<input id="my_id" type="radio" name="radio_name" />
<label for="my_id">Radio Label</label>

Is it OK to use a self closing DIV tag?

No. HTML 4.x doesn't have any concept of self closing tags.

It is valid in XHTML.

Input tag html with close tag or not

You can make the tag closed, which would combine conciseness of HTML and strictness of XHTML:

<input type="text" value="Save" />

For further discussion, please refer to HTML 5: Is it <br>, <br/>, or <br />? but please keep in mind that the top-rated response there is very old. XHTML correctness is more important now than it was in 2009. Also, the closed tag tells the reader not to attempt to look for the closing tag, which makes the code more readable in my opinion.



Related Topics



Leave a reply



Submit