Closing HTML tag

Question

When is it appropriate to use a closing tag and when a slash is enough?

<div></div>

vs.

<div />

possible duplicate of [Why don't self-closing script tags work?](http://stackoverflow.com/questions/69913/why-dont-self-closing-script-tags-work) — Diodeus - James MacFarlane, Aug 31 '11 at 18:08
That slash is a XHTML thing. XHTML is a failed concept, so don't use it. Empty elements consist of only one tag (e.g. ``), whereas non-empty elements have a start tag and an end tag (e.g. `
content
`). — Šime Vidas, Aug 31 '11 at 18:10
If you want to know which elements are empty and which are non-empty, look up the element [in the standard](http://www.whatwg.org/specs/web-apps/current-work/multipage/#auto-toc-4) and inspect its **Content model**. — Šime Vidas, Aug 31 '11 at 18:20

score 4 · Answer 1 · answered Aug 31 '11 at 18:07

4

Closing tag is needed for elements that (can) contain something, such as div, a and body.

Slash is enough for elements that consist only of the element itself, such as img, link and br.

answered Aug 31 '11 at 18:07

Kokos

9,051
5
27
44

What's a "link"? My understanding is that any tag that has content needs to be closed. Most form elements are an exception. The question I have, which method of closing is an appropriate one? – santa Aug 31 '11 at 18:21
@santa Empty elements (void elements) should not be closed at all. Non-empty elements should be closed with an end tag (e.g. ``). – Šime Vidas Aug 31 '11 at 18:22

score 3 · Accepted Answer · answered Aug 31 '11 at 18:15

3

You can only use a self closing tag <div /> if your DOCTYPE is set to XHTML as this is borrowed from XML where you can have self closing tags. You can't have it if your DOCTYPE is set to HTML 4.01 or HTML 5.

http://www.w3.org/TR/xhtml1/

I'm not sure your exact use case for wanting this, but if it's for clearing floats, you can do this instead and not have to worry about compatibility issues, especially with IE if it kicks into emulation mode.

<style type="text/css">
.clear-fix {
    clear: both !important;
    display: block !important;
    font-size: 0 !important;
    line-height: 0 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}
</style>
<br class="clear-fix" />

answered Aug 31 '11 at 18:15

I think you nailed it in the first 2 sentences, but lost me in the rest of the post. A little overkill with "!important", hah? IE is a pain but I think it can be fixed with proper DOCTYPE tag. :) +1 – santa Aug 31 '11 at 18:22
@Patrick Sure you can. You can have a `
` element inside a HTML 4 or HTML5 document, and you can have a `
` element inside a XHTML document. The browsers **don't care**! – Šime Vidas Aug 31 '11 at 18:25
This is a perfect use case for the `!important` tag. With `clear-fix` being a class, it's at the bottom of ranking when it comes to things that can overwrite it's values. These states should **ALWAYS** be true no matter what when you're clearing a float. – Aug 31 '11 at 18:29
@Šime You can't place a `
` inside a XHTML document and validate against W3C standards. – Aug 31 '11 at 18:30

score 2 · Answer 3 · answered Aug 31 '11 at 18:07

The difference is that if you don't use a closing tag, you will be able to set only the tag's attributes.

If you need some content inside it, you need both a opening and a closing tag, having the content in between.

For example, if you need to skip a line using <br/>, you could technically also use <br></br>, but no one uses it that way, as a line skip will never have anything in between.

In the case of a <div>, you will probably have a lot of content inside it, needing a closing tag in the end.

score 1 · Answer 4 · answered Aug 31 '11 at 18:13

1

If you take a look at the HTML DTD (4.01 strict, as a 5 dtd is still in progress and has not been released yet), you will see that some elements are defined with an EMPTY, meaning these can be self closing. Elements that do not have this definition, cannot be self closing.

For example, the br element:

<!ELEMENT BR - O EMPTY                 -- forced line break -->

The div element is not defined this way, so it is never right to have a self closing div.

<!ELEMENT DIV - - (%flow;)*            -- generic language/style container -->

answered Aug 31 '11 at 18:13

Oded

489,969
99
883
1,009

Isn't W3C starting to overwrite own rules? Why is there a need to close any elements that do not have any content, like
,
etc? – santa Aug 31 '11 at 18:29
@santa - HTML is not XML. XHTML _is_ XML. For HTML, you can have `
` or `
` and they mean the same. For `XHTML`, you can't have `
` alone - you must close it. The specs are different as they are based on different (though similar) other specifications. – Oded Aug 31 '11 at 18:35
So, when you write HTML, why would you worry that it will be interpreted as an XML document? – santa Aug 31 '11 at 18:37
@santa - If you write it correctly, and identity it correctly with a `DOCTYPE`, you don't have to worry. Some people are used to XML and since it is much easier to parse XML than HTML, they try to ensure that their HTML is XML compatible, so it can be automated more easily. – Oded Aug 31 '11 at 18:39

score 0 · Answer 5 · answered Aug 31 '11 at 18:08

0

If the element is self containing, and has everything that it needs to render itself without any innerHTML, than you can use the shorthand <hr /> otherwise you should use

 <div> InnerHTML here </div>

answered Aug 31 '11 at 18:08

Layke

51,422
11
85
111

Closing HTML tag

5 Answers5

Linked