Question
I was researching on google map API, and saw in This link that there is a <div> tag that closed by itself...!!!
https://stackoverflow.com/questions/22952750
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<div id="map-canvas"/>
and this is part of that page :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
As much as I know, <div> tag have to close by end tag--></div>
Would you tell me Why is that...?
Thanks in Advance
Solution 5
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>
OTHER TIPS
You can close tags like that as long as they don't have any children
1-Must be closed with end tag since it has content
<div>
<span></span>
</div>
2-Doesn't need an end tag since it doesn't contain any content
<div/>
Every browser that supports XHTML (Firefox, Opera, Safari, IE9) supports self-closing syntax on every element.
<div/>, <script/>, <br></br> for this HTML 4.x doesn't have any concept of self closing tags. It is only valid in XHTML.
For html 5 these are the self closing tags:
<area />
<base />
<br />
<col />
<command />
<embed />
<hr />
<img />
<input />
<keygen />
<link />
<meta />
<param />
<source />
<track />
<wbr />
Tags in xml that have a slash at the end are equivalent to the same without a slash. Without a closing tag it will be interpreted as <div></div>
It’s just sloppy coding that does not cause visible harm when the “self-closing” <div id="map-canvas"/> is the sole content of the body element. It is treated by browsers as if the slash / were not there, i.e. as an opening tag (only). They will then imply a closing tag when they encounter the end of the enclosing element, </body>. Things would be different if there were content after the “self-closing” tag.
It would be a real self-closing tag if it were used in XHTML in a document processed by XHTML rules, but it isn’t. The document lacks the required xmlns attribute, and it is practically certain that it is sent with the text/html content type, hence processed as HTML, not as XHTML.
Appendix C of the XHTML 1.0 spec says: “Given an empty instance of an element whose content model is not EMPTY (for example, an empty title or paragraph) do not use the minimized form (e.g. use <p> </p> and not <p />).”
