SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 30
  1. #1
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)

    Semantics of the CODE element

    I'm still banging on that HTML/CSS tutorial -- started out as a quick "how-to" for a class and is becoming something much larger, maybe even something I can market for use as part of a design curriculum once it's whipped into shape.

    The thing is focused on "modern best practices," and as such, I figure I'd better use best practices in the code, else I look like a lug. Here's the question:

    I'm formatting code snippets using the following:

    Code CSS:
    .monospacetext {
      font-family: Consolas, "Andale Mono", "Lucida Console", "Courier New", monospace;
      background-color:#f68e55;
      color: #fff;
      padding: 0 3px;
    }

    and

    Code HTML 4.01 Strict:
    <span class="monospacetext">&lt;strong&gt; &lt;/strong&gt;</span>

    But wouldn't this be more appropriate?

    Code CSS:
    code {
      font-family: Consolas, "Andale Mono", "Lucida Console", "Courier New", monospace;
      background-color:#f68e55;
      color: #fff;
      padding: 0 3px;
    }

    and

    Code HTML 4.01 Strict:
    <code>&lt;strong&gt; &lt;/strong&gt;</code>

  2. #2
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,247
    Mentioned
    59 Post(s)
    Tagged
    3 Thread(s)
    according to the official html spec, yes

    the CODE tag "designates a fragment of computer code"

    so this is ~way~ more semantic than SPAN
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  3. #3
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Yeppers, that's what I thought. I don't know why I didn't go with the code element to begin with.

    Let the find/replace festivities begin....

  4. #4
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't forget three related element tags; kbd, samp, and var. The kbd and samp are for indicating interactive dialogues, but var might be used nested within any of the others. E.g.
    Code:
    <pre>
    <samp>koko:/home/gt#</samp> <kbd>apt-get <var>upgrade</var></kbd>
    <samp>Reading package lists... Done
    Building dependency tree       
    Reading state information... Done
    The following packages have been kept back:
      cups grub mysql-server
    0 upgraded, 0 newly installed, 0 to remove and 3 not upgraded.
    koko:/home/gt#</samp> <kbd>exit</kbd>
    <samp>exit</samp></pre>
    =============
    samp, kbd, var, code {
      font-family: monospace;   /*the usual default*/
      }
    
    kbd {
      font-weight: bold;
      }
    
    var {
      color: blue;
      }
    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

  5. #5
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    I rarely think about those tags, though they would be of some use in my design. Thanks for the reminder!

  6. #6
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree. For what you're doing, it sounds like code is the most relevant, and depending on what you're doing, maybe var (more useful for marking up PHP, C#, Java, etc. However, you can you kbd elements to indicate actual user input that should be submitted to a particular application and samp elements to indicate the application output for that input. Code is the most widely applicable and I use it a lot on my beta website when I explain a new procedure to markup code for the new feature.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  7. #7
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Chroniclemaster1 View Post
    Code is the most widely applicable and I use it a lot on my beta website when I explain a new procedure to markup code for the new feature.
    I agree. Code seems to be the best overall choice for my purposes. Thanks, all!

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I went with pre back in the day when I investigated this. Don't remember, but code didnt do something or other that I needed.

  9. #9
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,247
    Mentioned
    59 Post(s)
    Tagged
    3 Thread(s)
    PRE is a block element, CODE is online
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  10. #10
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r937 View Post
    PRE is a block element, CODE is online
    Yep. They serve somewhat different functions. For what I'm doing, CODE works quite well. I am, however, using another styled class to present HTML and CSS code in a larger, styled block. I think the question of using PRE in that case will be identical to the question about CODE I asked earlier. I think I'm going to make that change also.

  11. #11
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code is a phrase entity, and is inline. It does nothing special other than the usual default to a monospace font family. You are probably remembering it not keeping your formatting. Fortunately, as an inline, it belongs in a block container, and pre fulfills both functions.

    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

  12. #12
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Given that PRE is a block element, is it semantically accurate to surround a PRE tag with a P:

    Code:
    <p><pre> ... content ... </pre></p>
    or have it stand alone?

  13. #13
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It may not be the child of <p>. It may be the child of <body>, <div>, or <li>, for example, or any element that may contain a %block or %flow entity. Like most %block elements, it may stand alone.

    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

  14. #14
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,247
    Mentioned
    59 Post(s)
    Tagged
    3 Thread(s)
    i said CODE was "online" and i am sorry for the typo, i meant inline, didn't i
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  15. #15
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gary.turner View Post
    It may not be the child of <p>. It may be the child of <body>, <div>, or <li>, for example, or any element that may contain a %block or %flow entity. Like most %block elements, it may stand alone.
    I should have known that. <p> elements can't contain block elements. Duh.

    No worries, Rudy, slip of the keyboard.

  16. #16
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    The proper method of presenting a code block would be:

    Code html4strict:
    <pre><code>function write_message() {
      echo "Code goes here";
    }</code></pre>

    You could theoretically use a div in stead of the pre and style it using CSS, but the pre does have some semantic significance as well (it indicates that the whitespace entered has significance for the contents).
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  17. #17
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,247
    Mentioned
    59 Post(s)
    Tagged
    3 Thread(s)
    why would you need to use CODE inside a PRE block? what makes that the "proper" way?
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  18. #18
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The pre is structural and says these contents' structure is important. It says nothing about what the content is. The code tag indicates what that content is. As in my example above, that could just as well be some other inline element that bestows a semantic value on the content.

    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

  19. #19
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r937 View Post
    why would you need to use CODE inside a PRE block? what makes that the "proper" way?
    Because pre indicates preformatted text, while code indicates a fragment of computer code. They are two completely different aspects of a snippet of code.

    Your question is analogous with this one: 'why would you need to use ABBR inside a P block?'
    Birnam wood is come to Dunsinane

  20. #20
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Tommy, since I've styled my PRE and CODE elements to appear entirely differently, if I use them together, they will conflict most hideously. Any suggestions? I don't want to use a class on the standalone PRE formatted text if I don't have to, but I can if needed.

  21. #21
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Just say pre code {...} to override the previuos set of code rules. Although, I would just ommit the code tag when using pre. It does nothing above and beyond adding sematic value (if you care).

  22. #22
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Just say pre code {...} to override the previuos set of code rules. Although, I would just ommit the code tag when using pre. It does nothing above and beyond adding sematic value (if you care).
    I tend to agree with you, Eric, but we risk the wrath of Tommy the Mad Semanticist by advocating such heresy.

  23. #23
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Doing so gives you two problems, though:
    • Your code is not semantic.
    • When you at some point will need pre for some purpose other than a code block (I can think of several), you'll either need to invent a class for this purpose, or re-code your entire site.


    Using code inside your pre will fix both problems, without any disadvantages. If you're concerned about your CSS, you can even use pre, pre code { } to override the style for code { }, without exapnding your style sheet significantly.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  24. #24
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by C. Ankerstjerne View Post
    Doing so gives you two problems, though:
    • Your code is not semantic.
    • When you at some point will need pre for some purpose other than a code block (I can think of several), you'll either need to invent a class for this purpose, or re-code your entire site.


    Using code inside your pre will fix both problems, without any disadvantages. If you're concerned about your CSS, you can even use pre, pre code { } to override the style for code { }, without exapnding your style sheet significantly.
    Christian, I've thought about your caveats. I sometimes take a "who gives a hoot about semantics, I just want it to work" approach, and every time I get bitten sometime later on. Think I'll play it safe this time.... (The reason why Tommy the Mad Semanticist can be so annoying is that he's right. )

  25. #25
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hrm, in the past I've had so much trouble getting <code> to work inside <pre> I gave up on it. Even with no whitespace, <pre><code> seems to leave a big gap at the top of the <pre> element. I got sick of trying to work out what was causing 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
  •