SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Evangelist
    Join Date
    Apr 2006
    Posts
    443
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,836
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by CS Geek View Post
    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).
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by felgall View Post
    it isn't valid HTML 5 though.
    Really? I thought it was fine to use either. The validator certainly doesn't care.

  4. #4
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    The html5 specs don't care either.

    (...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/>

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,836
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Really? I thought it was fine to use either. The validator certainly doesn't care.
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    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?

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,836
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Francky View Post
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    For joys and giggles, there's Polyglot Markup

  9. #9
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Aha, polyglot markup is prescribing the use of /> (here and here), in line with what felgall said in #7.

  10. #10
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,278
    Mentioned
    18 Post(s)
    Tagged
    0 Thread(s)
    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.
    "First make it work. Then make it better."

  11. #11
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,836
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Jeff Mott View Post
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  12. #12
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    ... 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).

  13. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,836
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Francky View Post
    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...
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •