Is It Ok to Use a Self Closing Div Tag

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.

Is it valid HTML5 to use a single tag for a div?

This is not valid HTML 5 (HTML does not allow shorttags, the equivalent HTML construct is a single opening div tag). It is valid XHTML 5, as it is valid XML.

The reason why you might see this pass through a validator just fine is because of what you stated:

PS: I'm serving page as application/xhtml+xml

Which means that you tell the validator that it must treat your markup as XML. In other words your page is not HTML 5 at all.

Is it allowed to have a self-closing div tag in an html document?

No it isn't legal HTML.

The div element is not described as an EMPTY element in the DTD (4.01).

The definition doesn't have EMPTY:

<!ELEMENT DIV - - (%flow;)*            -- generic language/style container -->
<!ATTLIST DIV
  %attrs;                              -- %coreattrs, %i18n, %events --
  %reserved;                           -- reserved for possible future use --
  >

Contrast with the definition for HR:

<!ELEMENT HR - O EMPTY -- horizontal rule -->
<!ATTLIST HR
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Is a self-closing div tag valid in Bootstrap?

A tag like <this /> is considered to be self closing. Or, according to the specification, a void element.

According to the spec, the only elements that are void elements are the following:

area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

For those tags, the end / is optional, BTW. So <br> is the same as <br />.

All other tags must have an end tag. Hence why <div /> is not valid.

Is it necessary to use an end tag with div for clearing floats?

You need the closing tag, or browsers will not think the tag is closed.

However, why would you even want to use <div style="clear:both;"></div>? That involves adding an extra unsemantic div for no reason.

There are better ways to contain/clear floats:

• Use overflow: hidden on the the element that contains your floats.
• Or, use a clearfix such as the "micro clearfix".

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.

Why some HTML5 tags must have a starting and ending tag instead of self closing them with / ?

From the w3c:

A Self-closing tag is a special form of start tag with a slash
immediately before the closing right angle bracket. These indicate
that the element is to be closed immediately, and has no content.
Where this syntax is permitted and used, the end tag must be omitted.
In HTML, the use of this syntax is restricted to void elements and
foreign elements. If it is used for other elements, it is treated as a
start tag. In XHTML, it is possible for any element to use this
syntax. But note that it is only conforming for elements with content
models that permit them to be empty.

The examples you listed would generally contain content, JavaScript, or other elements, so having a proper start and end tag would delimit the scope of those elements/tags.

self close tags those have to be closed by end tag like div /div

I suppose that that is intentional. The tags are valid if they don't have any content in them.

Now take the case of map-canvas. It is obvious from the id that it'll be used to fill with the map.

So there shouldn't be anything in that div and a self closing tag is a way to ensure that.

Also note that when some content is injected, the <tag /> will automatically become <tag>some content</tag>

Why does using a self-closing tag have such a prominent and bizarre effect in this situation?

Web-browsers have DOM inspectors which show us the structure of the resulting DOM tree. For instance, in Firebug:

As you can see, Firefox doesn't recognize the self-closing tag, but treats it like a start-tag instead. Firefox will close that SPAN element automatically when it reaches the end of the paragraph, meaning that the SPAN will contain the remaining text of the paragraph.

Now, since you're inserting a DIV element into the SPAN element, the DIV will be laid out below the text-content of that SPAN element. This is because the DIV element is a block-level element. Block-level elements that appear after text-content, are laid out below that text-content.

---

Related Topics