SitePoint Sponsor

User Tag List

Results 1 to 25 of 25

Thread: ALT and TITLE

  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    ALT and TITLE

    Just a refresher for me...

    Is it correct that the ALT attribute is required?

    And that if ALT is not needed, you should do...
    HTML Code:
    ALT=""
    And is it correct that the TITLE attribute is optional?

    And that if TITLE is not needed, it should be omitted?


    Debbie

  2. #2
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,411
    Mentioned
    273 Post(s)
    Tagged
    5 Thread(s)
    Yes, yes, yes and yes.

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    Yes, yes, yes and yes.
    That was easy!

    Thanks TechnoBear!


    Debbie

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Presumably you're referring to image elements here? Personally, I'd keep everything lower case. Seems to make for much neater code to me.

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Presumably you're referring to image elements here? Personally, I'd keep everything lower case. Seems to make for much neater code to me.
    Yes and yes!


    Debbie

  6. #6
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    ALT attribute: AREA, IMG #REQUIRED

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Yes - for all the tags that result in an image being displayed in the page you need an alt attribute to supply alternative text to be displayed in place of the image when the browser is unable to display the image. That includes the tags you mention as well as all the others that can display an image.

    The title attribute can be optionally added to any tag within the body of the page and contains text to be displayed either in the status bar or in a tooltip popup when the mouse is moved over the element.

    Some versions of Internet Explorer have a bug where when a title attribute is not supplied for images, a title attribute will be generated by the browser with a copy of the text from the alt attribute. To fix this bug you should supply an empty title attribute on your images.
    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
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    ALT is required on image, if the image does not warrant the use of ALT or you'd put a empty one on it, said image probably has no malfing business in the markup in the first place!!!

    There is NO legitimate reason to put TITLE on IMG -- EVER. Unless for some idiotic reason you want to override the browsers useful behaviors -- and in most cases where people want to do that, it's on images that HAVE NO MALFING BUSINESS IN THE MARKUP IN THE FIRST PLACE!!!

    ... and on a related note, with all but the rarest of exceptions the only legitimate reason to put title on a anchor is if you are using accesskeys and care about Opera accesskey menus showing your text instead of the URL. (open up this forum page in Opera, hit shift-esc and you'll see the difference between accesskeys with TITLE and those without)

    ... and as a rule of thumb, unless it's something like a ABBR or ACRONYM, if you have to use the TITLE attribute, there's probably something wrong with the content.

    ... and if you use TITLE on a anchor and it's IDENTICAL to the content, you're a {expletive omited} re-re. #DDD. herpafreakingderp even!!!

    We're talking proud owner of the shirt that says "I'm with Stupid" and the arrow points up. We're talking the type of idiotic drooling on oneself that could keep Stanley Spedowski, Will Hunting and Melvin Ferd gainfully employed for life following you around mopping up the mess.

    You get to drink from the FIRE HOSE!!!

    In other words, much like "if every LI inside a OL/UL is getting the same class, none of them need classes" it's one of those Yes Wordpress, I'm looking at you moments.

  9. #9
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    For completeness, here's an excerpt from the specs:

    Code:
    Attributes
    List of attributes (excluding event handler content attributes) 
    Attribute  Element(s) 	        Description 	                          Value 
    
    alt        area; img; input 	Replacement text for use                  Text*
                                    when images are not available 
    
    title 	   HTML elements 	Advisory information for the element 	  Text
    title 	   abbr; dfn 	        Full term or expansion of abbreviation 	  Text
    title 	   command 	        Hint describing the command 	          Text
    title 	   link 	        Title of the link 	                  Text
    title 	   link; style 	        Alternative style sheet set name 	  Text
    
    An asterisk (*) in a cell indicates that the actual rules are more complicated 
    than indicated in the table above.

  10. #10
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    There is NO legitimate reason to put TITLE on IMG -- EVER.
    There wouldn't be if it weren't for the bug in Internet Explorer. You need to add [b]title=""[/b} to all your images so that Internet Explorer will treat the images the same way as all the other browsers do. Without that IE generates a title attribute using the alt text.

    Placing a title="" on img tags is required as an IE bug fix.

    I do agree that the title attribute should never have a value when used with images.
    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="^$">

  11. #11
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    There wouldn't be if it weren't for the bug in Internet Explorer.
    ASSUMING you consider that a 'bug' and not a 'usability aid' that you wish more browsers did.

    That's not "required" IMHO to be removed -- if anything you are talking about making IE users not have the behavior they expect... and that's bad usability.

    ... really if it's a image that shouldn't trip a usability aid on hover like showing alt, what in blazes is it doing in the markup as a IMG in the first place? The only situation I can see that being a desired behavior is for presentational images like icons on menus -- and those don't belong in the markup since, well... they're presentation.

  12. #12
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Just asking, so be nice...


    Quote Originally Posted by deathshadow60 View Post
    ... really if it's a image that shouldn't trip a usability aid on hover like showing alt, what in blazes is it doing in the markup as a IMG in the first place? The only situation I can see that being a desired behavior is for presentational images like icons on menus -- and those don't belong in the markup since, well... they're presentation.
    I save this as a good Reference Guide on this topic...
    http://www.456bereastreet.com/archiv...le_attributes/

    In this guide, the author states...
    Use this to provide additional information that is not essential...

    ...Another potential use is to provide additional information for an image, like maybe a date or other information that is likely not essential.

    When users create a Member Profile on my website, I have a "Photo Label" field that I add to the <title> attribute in case they want to add an additional annotation to their Profile Photo, for example...

    Debbie sitting in garden
    DeathShadow cleaning his fresh kill...
    I don't think that is egregious by any means...


    Debbie

  13. #13
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Sounds like alt text's job to me. Title redundant to alt text is bloat IMHO... just because other browser makers are too lazy to make it useful like IE did is no reason to turn the markup into redundant garbage.

    I'd probably also not put it there as title because screen readers will waste time on reading it twice, and to be frank I don't think the blind really give a flying purple fish about avatars.

    Though, I'm weird, I'd like to see other browsers provide useful tools for dealing with images like IE does; perish the thought. Nope, got to be crippleware all the way.

  14. #14
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    just because other browser makers are too lazy to make it useful like IE did.

    If the alt text that IE displays as if it were a title is actually useful then the alt text is wrong - or you are using the wrong image. The purpose of the alt text is to convey the same information for those who can't see the image is conveyed by the image itself for those who can see it - so displaying the text as well as the image is duplicate content. duplicate content.
    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="^$">

  15. #15
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by crusty
    ... and if you use TITLE on a anchor and it's IDENTICAL to the content, you're a {expletive omited} re-re. #DDD. herpafreakingderp even!!!
    A wordpress user. The tooltips actually get in the way of reading the anchor text when trying to click the stuff.

    Quote Originally Posted by crusty
    Sounds like alt text's job to me.
    Sounds like a caption to me.

    I respect Roger's opinion on shoulds and shouldnots on the web, but I'll trot out Steve Faulkner's message on title, it's spot-on: http://www.paciellogroup.com/blog/20...tle-attribute/

    And I do also agree with Crusty that IE users have been seeing alt text for so darn long, and real user testing actually shows that sighted mouse-users are actually *using* it if they're regular IE users, to double-check things... it sounds silly, but they've been trained over years and years for this behaviour which is otherwise innocuous... I'd leave it in there rather than use the title="" (unless there was an instance where there really was good reason that no tooltips appeared, for anyone).

  16. #16
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    If the alt text that IE displays as if it were a title is actually useful then the alt text is wrong - or you are using the wrong image.
    Not at all -- you might have a picture of five people, but you have no clue who they are... You see someone operating a machine, you have not idea what the machine is or what they are doing; A picture may be worth a thousand words, but quite often it's the WRONG words.

    Though Mallory did hit it on the head, one of the few elements from 5 that makes any sense in concept -- figCaption. Of course it would make a hell of a lot more sense if it was called imgCaption so we could use it on everything, not just scientific figures and without the extra pointless wrapper... naturally we'll just start wrapping ALL images in figures, even when they aren't FIGURES, just so figcaption can be used.

    In that way, ALT is actually handy to have shown; were that more browsers did it; using TITLE and ALT with the exact same text is just an idiotic workaround for browsers other than IE not behaving that way... and usually the results of doing so are disastrous -- as Mallory pointed out, see Turdpress with it's "TITLE for EVERY anchor, even around the exact same text!!!"

  17. #17
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Honestly something like this would make more sense than figcaption:

    Code:
    <img src="/path/to/file.jpg" alt="Short Description">
         Optional descriptive text to be displayed underneath
    </img>

  18. #18
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by crusty
    Of course it would make a hell of a lot more sense if it was called imgCaption so we could use it on everything, not just scientific figures and without the extra pointless wrapper...
    But not all figures are images? A figure can be a video (those have captions), a table (those have captions though we don't need figure/figcaption cause they already have their own), a chart or a graph (neither of which have to be <img>s at all) can have captions... why they deliberately chose the useless word "figure". I'm sure non-English speakers have a field day trying to figure out the difference.

    Quote Originally Posted by Spritanium
    Honestly something like this would make more sense than figcaption:
    They considered that, except someone said "but what if that caption needs to be or contain block elements?" It was harder to change browser parsers to change what an EMPTY (as in spec-definition of EMPTY elements) inline element can contain.
    But the advantage of having the caption inside the image tag is that you now have a natural, semantic relationship, something that right now they are trying hard to fix (for screen reader users and the like) with aria-describedbys and aria-labeledbys and other things they're trying out.

    Well and also having the caption separate but linked to the figure means you're not stuck with the caption text at the bottom. I thought table captions could be rendered wherever around the table partially because, while the caption must come as the first child of a table, it's wrapped in its own tag.

  19. #19
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    They considered that, except someone said "but what if that caption needs to be or contain block elements?"
    <img> could just default to inline-block instead of inline. Makes more sense for images anyway; if I'm using an image inside some text I'm probably going to float it so the text will wrap around.

    They could also go ahead and wrap the caption in <caption> tags within <img> so it wouldn't necessarily have to be at the bottom and could have its own styles applied

  20. #20
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    But not all figures are images? A figure can be a video (those have captions)
    Video? As a figure? Where in blazes did you get that idea? Maybe I'm just used to figures as in the traditional sense where they are diagrams or pictures related to the content they are next to. Video... uhm... NO. Tables are NOT figures either -- they're tables. Open up a technical book -- See Table 1, see Figure 1.... Entirely separate entities with different meanings. One is a diagram, cutaway or mathematical formula, the other is a orderly division of data into rows and columns.

    What you just said has ABSOLUTELY NOTHING to do with the meaning of the word in terms of layout, grammar, or anything you'll find in a dictionary.. Video? As a "figure"?!? Ok, where's my pimp hat, gold chains and draino. (For those of you who don't recognize it, that's a Magnum Force joke...)

    Of course it wouldn't be the first time the HTML specs use a word in a manner that has nothing to do with it's meaning; I mean, are we talking down to tags like an insultingly condescending kindergarten teacher, or are we making them of lesser value. (deprecate vs. depreciate) -- not a shock many people think deprecate is a typo -- Many places in the HTML specs are like that, treading into the same territory as "oh the humanity". Poor guy was in such a panic he said the wrong word (should have been inhumanity), now the meaning of the word is changed... what's next, changing the numerical designation on a aircraft because the president is dyslexic and the president can't be wrong? That NEVER happened to the Reconnaissance Special 17.

    It's almost like when a recent band does a cover of a song nobody under 30 knows the original to. "Shout" -- Oh man, I love Disturbed... NOT. Tears for Fears dumbass.

    REALLY wish they'd research some of these words BEFORE they used them.

  21. #21
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Figure is kind of a dumb word for the tag considering what it does.

    What it does is allow you to attach captions to pretty much anything visual, in a semantic way. A good idea, but the implementation could use work...just like <nav> should work like this:
    Code:
    <nav>
         <li href="#">Link</li>
         <li href="#">Link</li>
         <li href="#">Link</li>
    </nav>
    Which is pretty much exactly what XHTML2 was moving toward with <nl> (including the 'href' attribute being supported for all elements, which makes a lot of sense since not everything clickable is an 'anchor')

    If they just allowed an optional <caption> tag inside <img>, <video>, and <audio>, we wouldn't really need <figure>

  22. #22
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Spritanium View Post
    just like <nav> should work like this:
    Well, not quite, since the idea behind NAV was to be able to wrap it around things OTHER than just lists. If they wanted a tag just for lists, they could simply have brought back 'menu'... which was deprecated as redundant to UL.

    Hence my problem with HTML 5, seems like somebody making the decisions has a torrid love for all the tags that were deprecated as redundant/pointless.... to go hand in hand with the new tags they pulled out of their backside that are also redundant/pointless. Like Audio, Video, Section, etc.

    I think rather than allowing it 'inside' tags that, well... shouldn't have things inside them except as fallbacks. (video, audio, object) if at all (IMG is a empty element, cannot contain markup -- ever!) a much simpler solution would have been to allow the use of the caption tag anywhere, with a 'for' attribute like with labels. Then you could point it at anything you can put an ID on.

    I'd rather reuse a single tag than add two more tags to the DOM list.

  23. #23
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by crusty
    Video? As a figure? Where in blazes did you get that idea?
    Um, the specs and the interpretation of the specs (search for h2 "Don't Stop There!").

    Quote Originally Posted by THESPECS
    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.
    Quote Originally Posted by HTML5doctor
    The <figure> element is intended to be used in conjunction with the <figcaption> element to mark up diagrams, illustrations, photos, and code examples (among other things).
    ...
    No need to constrain your <figure>s to images and code examples. Other content suitable for use in <figure> includes audio, video, charts (perhaps using <canvas> or <svg>), poems, or tables of statistics.
    I actually don't see the word "visual" in there once.

    For teh poops n giggles I'll link to teh WHATWG while I'm at it:
    http://www.whatwg.org/specs/web-apps...figure-element

    Though remember these are the guys whose logo looks like Batman is their enemy:



    Quote Originally Posted by Spritanium
    Which is pretty much exactly what XHTML2 was moving toward with <nl> (including the 'href' attribute being supported for all elements, which makes a lot of sense since not everything clickable is an 'anchor')
    Yes, that's where <nav> came from originally, but during mailing list wars many mentioned, as Crusty did, that navigation isn't limited to unordered lists, and the future could hold anything, so it became a separate tag to wrap around whatever the author considers "primary navigation." On some pages, it might actually just be a search form. I don't use <nav>.

    Quote Originally Posted by spritamium
    If they just allowed an optional <caption> tag inside <img>, <video>, and <audio>, we wouldn't really need <figure>
    They could have done that with the new elements, but changing how an existing one works in modern parsers was something they worked *very* hard not to screw with (as Crusty mentioned again... EMPTY elements like <img> may NOT contain markup!)... and when they did make a change, their "out" was usually that browsers' parsers DID already deal with that use case, usually with their error rendering (so why it wasn't a big deal to change <a> to now be like <ins> and <del>... block or inline content depending on where it was. Too many web pages over the last 15 years were already wrapping <a>s around blocks, so it was no new idea for browser parsers. Similarly, so many people screwed up the
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> to
    <meta http-equiv="content-type" content="text/html;" charset="utf-8"> that now you can get away with, and apparently always could with older browsers, this:
    <meta charset="utf-8">).

    This was the main objection to actually adding href attributes to more elements. Too hard to implement, make accessible, and then figure out what to do about the total break in backwards compatibility, which everyone has decided is absolutely necessary.
    This is also all over ye olden mailing lists... them discussing these ideas and why they didn't pan out. HTML5 was a break-off group's alternative solution to the breaking-backwards-compatibility-and-adding-draconian-error-handling XHTML2. HTML5 is partially why XHTML2 is dead today.

  24. #24
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Which again, is just them using the word and to blazes with it's meaning... welcome to yet another reason HTML 5 is {nasty string of expletives involving excrement omitted}

    Really? People are DUMB ENOUGH to want to use this {even nastier string of expletives involving excrement omitted}

    Two tags, one cup?

    Really funny is on those pages, NONE of the elements presented would qualify as a figure from a typographical or classical writing point of view. Those are PLATES, not figures. They're just a photograph of something, not a figure. They are not diagrams, technical breakdowns or formula... So literally, they're taking the word and throwing it's meaning out the window out of either ignorance or incompetence. JOY!

    MAKE things harder to learn.

    Can we just nuke these {expletive omitted} from orbit? It's the only way to be sure.

    WhatWG indeed, should be called WhatThe{expletive}WG

  25. #25
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Crusty
    Really? People are DUMB ENOUGH to want to use this {even nastier string of expletives involving excrement omitted}
    Aapparently, yes.

    Quote Originally Posted by Crusty
    Two tags, one cup?
    EW!

    ew ew ew ew! Now I'll *never* join the W3C!

    Quote Originally Posted by Crusty
    WhatWG indeed, should be called WhatThe{expletive}WG
    http://w3cmemes.tumblr.com/

    Quote Originally Posted by Crusty
    Those are PLATES, not figures.
    That would actually be a good name; that's exactly what these would have been 100 years ago in print. Guess nobody at the spec meetings was that old :D

    Man, back when you wanted to snap some vacation pics of the kids in the National Park, you had to lug all those glass plates and the accordion body and your cans of chemicals... :D


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
  •