SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)

    Is <em> a good use here?

    Hallo all,
    Just wanted some opinions on the use of <em> here:

    I'm laboriously turning some nasty PDFs (terms&conditions for insurance, all the small print) into HMTL. There's a line at the beginning of the new documents, translated:
    The words written in italics are described in the definition list.
    The definition list is a list of the terms like you usually see in small text: The Company, You, The Insured, The Vehicle, etc.

    Almost every time any of these words come up in the rest of the document, they are in italic.

    For the HTML I've decided to make them emphasised with <em> tags, styled as italic in the CSS for whichever user agent uses some other default style.

    1. As they have special contextual meaning, they seem to need to be in the HTML rather than a span with italic styles around these words
    2. I considered <i> but while in my head I read the cursive words as being emphasized I doubt they're supposed to be read out that way, but wanted the words to be able to stand out audibly if listened to. So far as I know <i> makes no sound difference.

    Did I make the right choice, or is <i> a better tag because the terms likely aren't actually supposed to be "emphasized"?

    Example text, translated:
    Art. 10 Address
    We are within our legal obligations bij sending you a notification to your last-known address. Thus it is important that you keep us timely informed of your current address, preferably through your insurance agent so that s/he is also aware of your new address.
    Okay badly translated but something like this, every word that is a described term at the beginning visually stands out, but for a content reason.

  2. #2
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Stomme, in respect to your first quote I would use <i> for mentioning the word italics because it's not emphatically important but there is a clear visual consistency at play, however for your second translated quote <em> emphasis is the correct implementation because it's giving explicit importance to key words such as "you".

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I put the word "italics" in the em tag so that it would sound the same as the words it was describing, but that's a good thought. With another example, they'd be the same:
    Words described in ALL CAPS are described in the definition list... WE advise YOU to keep an up-to-date address... etc. As it not only describes how the words look but also is an example itself.

    So even so, would you still lean towards having <i> for the first mention?

    Initially I did start with <i> for that one.

  4. #4
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    For the word "italics" I would still use <i> for the visual consistency, but for "ALL CAPS" I would be more inclined to use <b> (for the same reason) and then <strong> on caps references because it has added importance over emphasised text. For the initial explination where you are referencing points of interest which will be referenced I would use bold and italic and then I would follow through the contention of using em and strong as required for the various levels of importance for the content referencing semantic relevence.

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Ok.

    To be clear, I'm not choosing the method... these are PDFs written by another company, and they chose italics. We're a middleman insurer : )

    Thanks for the input!

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The italics have been assigned a meaning by that first statement. There is no emphasis involved as italics is being used to indicate that the term has a definition later in the document which has nothing whatever to do with emphasis.

    Of course you could avoid using the <i> tag and that first statement simply by using the <a> tag instead to link to the definition list.

    I'd say the most appropriate tag is <a> with <i> as a less appropriate alternative if you want to try to exactly duplicate the original document. <em> is not an appropriate tag at all.
    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="^$">

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Of course you could avoid using the <i> tag and that first statement simply by using the <a> tag instead to link to the definition list.
    The a is an interesting idea. You mean like the vim docs? Except for them you can see it was such an amount of work to take every other word and manually make it a link on those pages, so they obviously used a robot to do it... the result is about half the links are nonsense and do not work in the context they were written in (every instance of the word "as" goes to a :as command I believe, even when writing a sentence "such as this"). Right now I have lots of anchors already. Since the italics of the words is merely pointing out that they have been defined earlier in the document in the context they are being currently written in (why I had to already manually check every instance of an italicised word, as for instance the word "insured" referring to "the insured" (the person) got italics but not "insured" as in "insured damage" or "insured vehicle"), and not saying "go there" I'm a bit doubtful of using it (that and it will confuse the hell out of the kinds of people who will be reading it... okay I'm familiar with vimdocs but I find it strange too even...), and I'm not sure if I should afford confusion like that.

    The older PDFs from this company did not have this practice, so it seems to be new.

    <i> as a less appropriate alternative if you want to try to exactly duplicate the original document.
    To get the text to stand out audibly (otherwise it does not convey information that this word is special) my other alternative is to change every instance of an italicised word to UPPERCASE (which is read out differently, at least in JAWS, though then the word U would always sound affected even if it isn't). You can say it's a bug in the AT software but like all bugs we have to choose to either ignore them or hack around them to address them. (You could argue I should ignore it as there likely has never been and never will be a screen reader at these pages except mine)

    Is there another way you know of, besides UPPERCASING, to make <i> change its sound (I looked into aural stylesheets, they don't work)? (hmm if I could use CSS to detect the user agent's user agent I could just send screen readers the text-transform: uppercase but I can't). If <i> can't convey the information to everyone, I don't think I can use it, even though I do believe that otherwise it is the element I should have used. It's both content and typography, but it's not decoration and it needs to also be heard, and state to everyone that these words are special, ideally without adding characters or markings that aren't in the original document (I'm not legally bound to make these perfect, which is good since they have horrible errors like listing 15 articles when there are only 13 of them).

  8. #8
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do the words require italicizing? For what benefit to the customer?

    Common typographic convention calls for only the first usage of the word be made to stand out; by being italic or bold. After that, it becomes distracting.

    As you mention, there is a need for some semantic value. In this case, it is the first instance of the defined word or phrase. I'd use the <dfn> tag with a title attribute as a redundant definition. For example:
    Code:
    <dt>Art. 10 Address</dt>
      <dd><dfn title="the underwriters">We</dfn> are within our legal obligations bij [sic--did you mean "by"?] sending <dfn title="the policy owner">you</dfn> a notification to your last-known address. Thus it is important that you keep us timely informed of your current address, preferably through your <dfn title="the guy who sold you the policy">insurance agent</dfn> so that s/he is also aware of your new address.</dd>
    How does the screen reader render <dfn>?

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Sorry for the late reply, I was in no-Internets-land...

    Gary, the page is indeed written in dl's, it's a terms and conditions... lots of nested lists of various sorts (with hyphen bullets!). I just got back and still haven't tested <dfn> though I can only test in JAWS. I'm not sure it's a good idea to make titles on each defined word. A sentence can be filled with repeated examples of the defined word. Yeah, it looks pretty funny when you're reading the PDF... in my head, all those italics sound like a preacher saying emphasis like when he says "and the LORD said..." Legal people, ug.

    Beats me why the insurance company is italicising every instance of these words... I'm assuming so that when they are run across from in some particular section that's like page 10, the reader/visitor knows the term here is indeed one of the terms that have been described above (as I mentioned above, the word "insured" isn't always referring to the term defined at the top, so it's not always italicised).

    But that's a guess. My first priority was to copy the PDF visually, my second to make what can be seen is also heard (so if you see a difference in text, you should hear it since it has meaning) and lastly, the most semantic code (notice I'm putting behaviour above semantics).

    I'll test what <dfn> does.

  10. #10
    SitePoint Zealot stikkybubble's Avatar
    Join Date
    Sep 2006
    Location
    Pluto
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I do this sort of thing a lot (all the time - I work for a publisher). I would never use <em>, I would either use <i> or a <span> with css style of italic (in practice that's what I do, and it's what I'm supposed to do as well). The words don't really have 'emphasis' it's a typographic thing, they are supposed to stand out visually and probably have reference in the text to '... the words in italics ...' as well. Save <em> for stuff that really needs it semantically.

  11. #11
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by stikkybubble View Post
    I would either use <i> or a <span> with css style of italic
    Since <i> and <span style="font-style:italic"> mean the same thing you should never use that particular span tag where the fact that it is italic has a meaning. You would use that span tag where you want to make something italic just for the sake of it without the fact that it is italic meaning anything (since that would change back to plain text when someone turns off the styles in their browser).
    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 Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    The span doesn't convey any meaning (nor is it supposed to) but these italics they have put in the text do have contextual meaning, so spans are totally out of the question here. I's would be ideal as they semantically have meaning, I just can't get that conveyed audibly. : ( Em's in many readers do sound different, although I don't even know if that's even cross-reader.

    This is where an audible stylesheet could come in real handy. I could use the better element, <i>, for the contextual meaning, and use the stylesheet to ensure the contextual meaning is heard (those without CSS would still lose out, but that may be an intractable problem). One of those, it would be nice if they worked in Real Life kinda things...

  13. #13
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by felgall View Post
    Since <i> and <span style="font-style:italic"> mean the same thing you should never use that particular span tag where the fact that it is italic has a meaning.
    That is totally wrong, since when did the italic element (which has semantic value - mistaken for style value) equal the same as a span element (with no semantic value) using CSS style to give it an italicized effect. I think you are mistaking the fact they give the same visual impression with the actual meaning behind their uses.

  14. #14
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    That is totally wrong, since when did the italic element (which has semantic value - mistaken for style value) equal the same as a span element (with no semantic value) using CSS style to give it an italicized effect. I think you are mistaking the fact they give the same visual impression with the actual meaning behind their uses.
    You have just repeated exactly what I said in different words. They mean the same as far as their appearance is concerned but are totally different semantically.
    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
  •