SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member Xizor's Avatar
    Join Date
    Jul 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <em> tags in context of separating content from presentation?

    Hello all. I am learning about separating content and structure from presentation and i am wondering where dose the <em> tag stand? I would assume that it is a presentation tag but would it go against the concept of separating presentation from structure?

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    You should use <em> to mark emphasised text - that is a semantic tag, and a 100% correct use of HTML. The default display of emphasised text is italics, but you can change that if you want. If you want to use italics for reasons other than emphasis then you should consider whether you can apply a style to the text container, whether to use <i> or whether to use <span>. Remember, just because an element may have a default presentation dies NOT mean it's a presentational element. It may be important to use that tag to convey contextual information, such as here.

  3. #3
    SitePoint Member Xizor's Avatar
    Join Date
    Jul 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was sort of putting things in black in black in white, such as <em> and <strong> tags are presentational and should be replaced by css and <h> and <p> tags are structural elements that define html page. But if i understand you correctly if a tag such as <em> defines an important structure of the page then it should be use?

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Xizor View Post
    such as <em> and <strong> tags are presentationa?

    No they are structural elements that identify that a web reader should use emphasis when reading out that part of the text and that web browsers should also use some form of emphasis when displaying that text - the emphesis does not necessarily need to be making the emphasised text bold or italic - you might use CSS to define that the emphasis should be applied using different colours.

    Basically ALL the HTML 4 tags have a legitimate structural use. It is only when you start using HTML 3.2 or HTML 5 tags that you start to find tags that have no real structural meaning. Of course that doesn't mean that the particular use of the tag is correct - for example using <i> to apply emphasis is misuse of that tag but using it to make the make of a ship appear in italic text is appropriate structural use because being in italic text is a structural part of how ship names are usually identified.
    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="^$">

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,816
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    As Stephen pointed out in the previous post both EM and STRONG are structural tag, each with it's own separate semantic meaning. One should not confuse EM and STRONG with I and B that look the same ,respectively, but the latter pair are purely presentational and has no semantic significance whatsoever. In other words, EM is not intechangale with I nor is B with STRONG!

    If you merely want something BOLD it is more concurrent with separation of structure and style to use a SPAN with a class that matches with the desire style and avoid B ( and I) all together. I will admit I use B and I sometimes as specialty SPANs.

    That that is knowing that neither tag carries any semantic meaning I find it easier to write:

    <a href="#">Link<i>...</i></a>
    a i { my style}

    than

    <a href="#">Link<span class='mystyle'>...</span></a>
    a .mystyle { my style}

    But once you comprehend the basic of a rule you will see when and how it can be 'bent'

    Hope that helps.


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
  •