Menu
Using what I believe to be pretty standard embedded svg:
<!DOCTYPE html> <html> <body style="padding:50px"> <svg width="100" height="100"> <circle cx="50" cy="50" r="20" /> </svg> </body> </html> IE (11) gives me a warning "HTML1500: Tag cannot be self-closing. Use an explicit closing tag." (DevTools, Console tab).
It's true that if I change the <circle.. to:
<circle cx="50" cy="50" r="20"></circle> the warning goes away, but that looks strange to me..
The IE devtools have occasionally found real unclosed-tag errors, so it would be sad to see it render un-useful from this kind of noise..
Is there any way of making IE happy without resorting to adding closing tags everywhere?
Update: Note that the question is about "Foreign elements", not "Void elements" (http://www.w3.org/html/wg/drafts/html/master/single-page.html#elements-2). <svg> is not self-closing (it's defined as belonging to the Container element category: http://www.w3.org/TR/SVG/struct.html#SVGElement).
<circle.. is defined as a Basic shape element (http://www.w3.org/TR/SVG/shapes.html#CircleElement), which means that it is self-closing. In reading 8.1.2 of the html5 spec:
Foreign elements whose start tag is marked as self-closing can't have any contents (since, again, as there's no end tag, no content can be put between the start tag and the end tag). Foreign elements whose start tag is not marked as self-closing can have text, character references, CDATA sections, other elements, and comments, but the text must not contain the character U+003C LESS-THAN SIGN (<) or an ambiguous ampersand.
it seems (to me) like it is saying that tags inside an <svg> element (i.e. foreign elements) are self-closing if the svg-spec says they are, and when defining start tags (8.1.2.1), #6 says that the / in <tagname ... /> is optional on e.g. <br/>, but not on <circle ../>:
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.
So I believe the document is conforming as-is. I'm unsure if the using a closing </circle> tag would be conforming.
348
No. It does not have an end tag. Example. <circle cx="50" cy="50" r="40" /> All SVG elements dont have an end tag.
The HTML <embed> tag is used for embedding an external application or interactive content into an HTML document. Note that the <embed> element is an empty element (no closing tag is used).
All tags in XML or XHTML can be used as self-closing by closing them with (<.. />). HTML5: Using a slash is absolutely optional. HTML4: Using a slash is technically invalid. However, the W3C's HTML validator still accepts it.
Optional HTML Closing Tags Some closing tags are optional, however. The tags are optional because it's implied that a new tag would not be able to be started without closing it.
See this question: Are (non-void) self-closing tags valid in HTML5?
Basically, HTML5 doesn't really do self-closing tags. Instead it has void tags, like <br>. This also explains why <script> isn't self closing when you are using an external js file; <script> isn't a void element. The SVG you are writing is actually html, so it has to follow HTML5's rules, not XML's.
I think you should just add a closing tag so that you can get the benefits of more important warning/errors in the console. Alternatively if your page was XHTML, I believe you could use a self closing circle tag.
187
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
