37

I was validating my code, and got the following error Tag cannot be self-closing. Use an explicit closing tag. in IE for my svg path because it's self closing.

<path d="m53.911,10.023c-1.46-.898-3.195-1.019-4.699-1.019h-3.439c" />

Now I know meta tags in HTML5 don't require the forward dash /, you just close them with >. Does the same thing apply to svg tags? Like so:

<path d="m53.911,10.023c-1.46-.898-3.195-1.019-4.699-1.019h-3.439c" >

Or… Using an explicit closing tag? Like so:

<path d="m53.911,10.023c-1.46-.898-3.195-1.019-4.699-1.019h-3.439c" > </path>

What is the correct way of closing a path?

2
  • How did you validate your code? May be validating tool just don't know about SVG?
    – Alexey Ten
    Commented Jun 19, 2014 at 7:01
  • 1
    To be clear, /'s have no effect on void elements in HTML. So nothing is going to break if you include them, but really now... it's just silly to do so! Personally, I actively remove them when I see them. Save the precious bandwidth. :D
    – Rob
    Commented Jun 27, 2018 at 20:30

2 Answers 2

43

The answer by Robert Longson is great, but links to a document that is marked as:

This document has been discontinued and is only made available for historical purposes.


I wanted to find some up-to-date specification on this behavior, and here is what I found:

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.

Source: W3C HTML5 Reference Editor's Draft

Start tags must have the following format:

  1. 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.

Source: HTML Living Standard from WHATWG and HTML: The Living Standard - A technical specification for Web developers

Inline SVG and MathML support

The syntax <foo/> opens and immediately closes the foo element if it is a MathML or SVG element (i.e. not an HTML element).

Source: HTML5 Parser at Mozilla Developer Network


Conclusion: What Robert Longson wrote in his answer is still valid. This warning in IE11 developer tools is wrong. Using the self-closing syntax in HTML5 is valid (but only for void elements, such as <br/>; or foreign elements, which are those from MathML and SVG).

35

Whatever validation you're using is working incorrectly.

The HTML standard says that SVG and MathML elements must either have a start tag and an end tag, or a start tag that is marked as self-closing, in which case they must not have an end tag. I.e. You can write a path as <path></path> or <path/> but you can't write it as <path>

2
  • 30
    You see this in the IE11 dev tools if you have an SVG with self closing tags
    – Ben Frain
    Commented Feb 11, 2015 at 9:19
  • 3
    Also in Microsoft Edge HTML1500
    – Sebastian
    Commented Sep 6, 2019 at 10:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.