Is using empty tags valid in HTML5?

Hi

I have instructor who teaches me HTML5 from the basics. However, I noticed that he use empty tags with a forward slash ‘/’.

For example: <img />

So, is it OK if I follow this in HTML5 or will it considered best practice to omit the slash in HTML5?

Thanks

<img/> is perfectly valid XHTML 5 - it isn’t valid HTML 5 though.

The difference between HTML 5 and XHTML 5 (apart from the closing slashes) is the MIME type the page is served with and whether or not the page has a doctype tag (since in HTML 5 it is there simply to enforce standards mode whereas XHTML 5 doesn’t have any mode other than standards mode and so doesn’t need it).

Really? I thought it was fine to use either. The validator certainly doesn’t care.

The html5 specs don’t care either. :wink:

(…void/empty) elements have a start tag only. The self-closing tag syntax may be used. (…)
Example:
A void element using the HTML- and XHTML-compatible self-closing tag syntax.
<hr/>

Of course the validator doesn’t care because it doesn’t make the distinction between HTML and XHTML. Using the / implies that you are writing XHTML 5 rather than HTML 5 is so far as the (X)HTML 5 validator is concerned.

When served as HTML the / is invalid but the error correction that browsers apply to HTML means that the error will be ignored (unless the browser is Netscape 4 in which case the / will invalidate the preceding attribute unless there is a space in between).

When served as XHTML the / must be there or alternatively a closing tag included in its place eg. <br></br> is equivalent to <br/> in XHTML (including XHTML 5). If the / isn’t there and there isn’t a corresponding closing tag then the page will not display proeperly.

(X)HTML 5 takes advantage of the fact that browsers will ignore the error when the / is included in HTML to avoid needing to distinguish between the two. The same standard can then be applied to both HTML and XHTML making it easier to maintain the standards for both languages.

felgall:
When served as HTML the / is invalid but the error …

Then what do you say about the “HTML- and XHTML-compatible self-closing tag” in the w3c-specification as mentioned above?
Is there a more recent specification with a ban on the /> in html5?

There’s no ban on using /> in HTML - all browsers apart from Netscape 4 ignore it just as they do anything else that they don’t understand. It is only actually needed in XHTML but including it in your HTML makes it easier to convert the HTML to XHTML once IE8 (the last browser to not support XHTML) dies.

For joys and giggles, there’s Polyglot Markup

Aha, polyglot markup is prescribing the use of /> (here and [URL=“http://dev.w3.org/html5/html-xhtml-author-guide/#h4_empty-elements”]here), in line with what felgall said in #7.

My personal prediction:

No one – or virtually no one – will actually switch to application/xhtml+xml, and those self-closing slashes will forever be redundant.

My personal prediction is that any serious professional will switch simply because the benefits of XHTML for making it easier to find some errors will make maintaining the code easier. Only those creating web pages as a hobby will stick with HTML. This will then make it far easier to take completely different paths with the two with HTML allowing any old junk while XHTML becomes a proper markup language.

I guess based on the past rate of takeup of new web technology (with over 90% of people still writing HTML 3.2 and yet to upgrade to HTML 4) we’ll need to wait a century or so to see who is right.

… over 90% of people still writing HTML 3.2

That’s amazing! (:

When we add the % using the Transitional doctype instead of the Strict doctype (for html as well as xhtml), I’m afraid the process is indeed a matter of long term…

For myself I see as best practice:

  • First make a page in xhtml-Strict to realize a well formed markup without the deprecated and obsolete elements / attributes.
  • Then, if needed for modern applications, change the doctype in html5 (and test again in the validator).

The HTML 4 doctype is:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

The transitional doctype is for those web pages that have yet to finish transitioning from HTML 3.2 - the transitional doctype means the page uses both HTML 3.2 and HTML 4.

The <!DOCTYPE HTML> doctype is valid for any version of HTML except for version 1 and so with pages using that doctype you would have to look at what actual tags are being used to work out which version it is.