Best element to describe an HTML element, semanticly

Discussion in 'HTML & Website Design' started by joebert, Nov 22, 2007.

  1. #1
    Consider this list of HTML elements.

    <ol>
    <li>div</li>
    <li>p</li>
    <li>object</li>
    </ol>
    Code (markup):
    Alone the contents of those list items are meaningless, they're not really acronyms of anything either.

    For semantics, what should I wrap those HTML elements with to give them meaning ?

    I'm thinking the <abbr> or abbreviation element, but I'm not sure.
    <ol>
    <li><abbr>div</abbr></li>
    </ol>
    Code (markup):

    // Edit
    Oh duh.

    <code> element !
     
    joebert, Nov 22, 2007 IP
  2. Shimonenator

    Shimonenator Peon

    Messages:
    28
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    <code>div</code> or <pre><div></pre> i guess
     
    Shimonenator, Nov 22, 2007 IP
  3. joebert

    joebert Well-Known Member

    Messages:
    2,150
    Likes Received:
    88
    Best Answers:
    0
    Trophy Points:
    145
    #3
    Going to stick with just <code>.
    Since there's no formatting in this scenario there's no need for the <pre> element.
     
    joebert, Nov 22, 2007 IP
  4. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #4
    The CODE element would work, but how are you presenting these elements? Are you attempting to define them, or just list them?
     
    Dan Schulz, Nov 22, 2007 IP
  5. joebert

    joebert Well-Known Member

    Messages:
    2,150
    Likes Received:
    88
    Best Answers:
    0
    Trophy Points:
    145
    #5
    Just listing them.
    Along these lines.

    <p>The following elements &amp; their contents are removed.</p>
    <ul>
       <li><code>code</code></li>
       <li><code>blockquote</code></li>
       <li><code>form</code></li>
    </ul>
    Code (markup):
     
    joebert, Nov 22, 2007 IP
  6. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I could see that working best with an unordered list (since the list items are not defining anything or being displayed in any particular sequential order). However, if you really want to use the CODE element, provide examples of what the HTML code looks like alongside the listing. Like this:

    
    <li>BLOCKQUOTE <code>&lt;blockquote&gt; &lt;/blockquote&gt;</code></li>
    
    Code (markup):
     
    Dan Schulz, Nov 22, 2007 IP
  7. JagNet

    JagNet Peon

    Messages:
    18
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Have you considered using <samp> (defines sample computer code)? Perhaps more semantically correct than <code>
    <li><samp>&lt;code&gt;</samp></li>
    Code (markup):
     
    JagNet, Nov 23, 2007 IP
  8. joebert

    joebert Well-Known Member

    Messages:
    2,150
    Likes Received:
    88
    Best Answers:
    0
    Trophy Points:
    145
    #8
    I like that Dan.
    I'm going to reduce it to account for a bit of assumed understanding by the reader in this case though.
    <li><code>&lt;blockquote /&gt;</code></li>
    Code (markup):
    JagNet, I believe <samp> denotes sample output.
    If I were going to provide an sample of what the preceding code would display, I think it would be perfect.
     
    joebert, Nov 23, 2007 IP
  9. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #9
    joebert, never leave things to chance - you might find a first-time reader who doesn't know what they are on the site; not to mention screen reader users (another reason why I suggested the example I gave you).
     
    Dan Schulz, Nov 23, 2007 IP
  10. joebert

    joebert Well-Known Member

    Messages:
    2,150
    Likes Received:
    88
    Best Answers:
    0
    Trophy Points:
    145
    #10
    Good point Dan.
     
    joebert, Nov 23, 2007 IP