Menu
I am trying to understand why is there a difference in how a browser displays <div></div> verses <div />?
Here is an example: The expected output of snippet #1 is three boxes, side by side: [black], [blue], [red]. Snippet #2 only displays [black] and [red] - Why isn't the [blue] box rendered in snippet #2?
<div style="float:left; width:50px; height:50px; background:black;"></div>
<div style="float:left; width:50px; height:50px; background:blue;"></div>
<div style="float:left; width:50px; height:50px; background:red;"></div>
<div style="float:left; width:50px; height:50px; background:black;"></div>
<div style="float:left; width:50px; height:50px; background:blue;" />
<div style="float:left; width:50px; height:50px; background:red;"></div>
Edit: I am using Chrome 12 & html5: <!doctype html>
829
The <div> tag defines a division or a section in an HTML document. The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript.
The div tag is used in HTML to make divisions of content on the web page like (text, images, header, footer, navigation bar, etc). Div tag has both opening(<div>) and closing (</div>) tags and it is mandatory to close the tag. As we know Div tag is a block-level tag.
DIV is a generic block level container that can contain any other block or inline elements, including other DIV elements, whereas P is to wrap paragraphs (text).
Both the tags (<div> and <section>) are used in the webpage, <section> tag means that the content inside relates to a single theme, and <div> tag is used as a block part of the webpage and don't convey any particular meaning. HTML <div> Tag: It is called a division tag.
Mainly because <div /> is not valid HTML.
If you have a look through the different doctypes you'll notice that div cannot be self closing.
According to the W3C:
A div element must have both a start tag and an end tag.
Source: http://www.w3.org/TR/html-markup/div.html
To include Chucks comment here also, a trailing slash in HTML does not a self closing tag make. Self closing tags using a trailing slash are a feature of XHTML, not HTML.
128
As you have clarified that you're using HTML5... from the HTML5 spec:
Then, if the element is one of the void elements, or if the element is a foreign element, then there may be a single U+002F SOLIDUS character (/). This character has no effect on void elements, but on foreign elements it marks the start tag as self-closing.
The void elements are:
area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr
The foreign elements are those from the MathML and SVG namespaces. As you can see, none of these elements are the div element, and therefore your second example is invalid HTML5.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
