SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML5 - Should i only use when needed ?

    What is best pratice ?

    Should i use as many tags as possible to "label" my content - aside, article if i dont need it to style the page.

    I was thinking i dont need the <figure> tag to style the image or anything, and it just take up space. Or is it a good way to tell google about my content ?

    Like using :

    HTML Code:
    <figure>
      <img src="/orang-utan.jpg" alt="Baby Orang Utan hanging from a rope">
    </figure>

  2. #2
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,361
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You don't have to use any of the newer HTML5 tags, but when it makes sense using them to mark up your document is a good idea.

    Your example of the figure tag isn't strictly for styling per say (though you can of course apply CSS to the element), but sematics, to present an image with a caption that's understandable by machines and accessibility related devices.

    Also you don't necessarily need an ALT attribute value when using FIGURE, FIGCAPTION makes more sense (cue a debate!)...

    Code:
    <figure>
      <img src="/orang-utan.jpg" alt="">
    <figcaption>Baby Orang Utan hanging from a rope</figcaption>
    </figure>

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't have to use any of the newer HTML5 tags, but when it makes sense using them to mark up your document is a good idea
    Yes, but does it make sense to use <figure> here ?

    Are we not trying to make the code as simpel as possible, no ?
    This: <img src="/orang-utan.jpg" alt="Baby Orang Utan hanging from a rope">
    is more simpel then this :
    <figure>
    <img src="/orang-utan.jpg" alt="Baby Orang Utan hanging from a rope">
    </figure>

  4. #4
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,361
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It depends on the context of the image.

    The W3C spec for the FIGURE element says...

    The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the documentís meaning.
    ...in other words the image could be placed anywhere in the document without losing context.

    On the other hand if the image was "inline" with the text flow then you could use IMG or FIGURE, in which case both are valid methods...

    Code:
    <h1>About Orang Utans</h1>
    
    <p>They are mammals, blah blah</p>
    
    <img src="/orang-utan.jpg" alt="Baby Orang Utan hanging from a rope">
    
    <p>The often frequent forest and love to eat blah blah...</p>
    Code:
    <h1>About Orang Utans</h1>
    
    <p>They are mammals, blah blah</p>
    
    <figure>
    <img src="/orang-utan.jpg" alt="">
    <figcaption>Baby Orang Utan hanging from a rope</figcaption>
    </figure>
    
    <p>The often frequent forest and love to eat blah blah...</p>
    Yes using an IMG tag is "simpler", but it's always worth considering your visitors who may have disablilities, or appreciate the extra detail

  5. #5
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    I completely agree that using <figure> to pair an image with a visible caption is great, and that any HTML5 elements that allow the UA to programatically interpret content are a good thing ... but one question is, is there any assistive technology out there that is actually making use of this facility yet?

  6. #6
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,361
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    ... but one question is, is there any assistive technology out there that is actually making use of this facility yet?
    I don't know but I'd guess they will do eventually...

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,815
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by bluedreamer View Post
    I don't know but I'd guess they will do eventually...
    HTML 5 is expected to become a standard either later this year or early next year. Once that happens then browsers can start looking at supporting it properly. At the moment they don't know which tags and properties will be removed - eg as hgroup already has. They will not want to get caught out like Microsoft did with IE5 and CSS2 where IE5 implemented the box model at the time it was released and then the standard was changed - leading to all the confusion where browsers need to look at whether the page has a doctype tag or not to decide which box model to use.

    Only AFTER it becomes a standard will browsers start to consider supporting those tags that they didn't decide to support for experimental pages while the standard is being developed.
    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
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Only AFTER it becomes a standard will browsers start to consider supporting those tags that they didn't decide to support for experimental pages while the standard is being developed.
    Simon Pieters

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,815
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by zcorpan View Post
    hgroup

    IE5 box model
    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="^$">

  10. #10
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    but one question is, is there any assistive technology out there that is actually making use of this facility yet?
    They can't unless the browser offers a relationship between the two to AT. Whether any do at this point, I don't remember. There was a big longdesc debate recently where use of aria-labelledby for things like figcaptions were discussed, but each example had something stinky about it. Everyone seemed to disagree anyway. Right now as an AT user your best bet in knowing what the caption of an image or a figure is, is to manually sniff around there and assume the text with most proximity and contextually seems like it is probably the caption text.

    This old link shows there was/is work on getting native roles to figure and friends, and that the Mozillians are busy there. But dunno who else.

    Frankly I'm still waiting for browsers to properly support TITLE attributes so that they work with keyboard etc. But a decade has come and gone so I'm not holding my breath.

    Only AFTER it becomes a standard will browsers start to consider supporting those tags that they didn't decide to support for experimental pages while the standard is being developed.
    Should be, *Even after...* because browsers support something either
    1. when they feel like it
    or
    2. they're frightened of not supporting something they feel is important and OHNOES another browser already has support for it.

    The above also holds for stuff not in the spec. See -webkit-blah-blah drama and the death of Presto.

    Besides, if "the spec" means WHATWG, often whether or not someone supports something in the wild already *is* the basis for speccing it.


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
  •