SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Best practice: classess and IDs on the HTML tag?

    Lots of sources advocate adding classes and IDs to the body tag. It's a handy way of targeting elements on specific pages, without having to create a page-specific class/ID for that element.

    However, is it good practise to have classes and IDs on the HTML tag? I've never seen any one mention this and thought that it might be bad practise.

    Thanks!

  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)
    Well obviously in the case you mentioned, using classes would be pointless as each unique page will have it's own single use reference to determine the page being targeted for style (it isn't repeating it throughout the page). Other than that there's nothing to say you shouldn't give the body an ID attribute as a basepoint for page explicit style, it's using the attributes for what it was intended for, giving a general purpose "hook" to apply style based on the pages unique needs.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply!

    Quote Originally Posted by AlexDawson View Post
    Other than that there's nothing to say you shouldn't give the body an ID attribute as a basepoint for page explicit style
    The body tag is okay, but its the <HTML> tag that I am curious about (as I haven't seen any sources that say you can add a class/ID to the <HTML> tag).

  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)
    No you shouldn't add a class or ID to the HTML element because it's not (technically) part of the canvas, the body holds everything that appears on-screen, the head holds everything that appears off-screen and HTML is simply there to tell the world what language it's written in and sit pretty, not have style applied directly to it.

  5. #5
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    Well obviously in the case you mentioned, using classes would be pointless as each unique page will have it's own single use reference to determine the page being targeted for style (it isn't repeating it throughout the page).
    That is not necessarily true; If you're using a framework, and want to add framework type conventions to the body tag, then you would use a class.
    Code HTML4Strict:
    <body class="layout-3 format-1">
    Now, with that in mind, you could define the body with a unique identifier for structural hierarchy.
    Code HTML4Strict:
    <body id="document">
    Also, when utilizing frameworks, classes an, an id can be present.
    Code HTML4Strict:
    <body id="document" class="layout-3 format-1">

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    No you shouldn't add a class or ID to the HTML element because it's not (technically) part of the canvas, the body holds everything that appears on-screen, the head holds everything that appears off-screen and HTML is simply there to tell the world what language it's written in and sit pretty, not have style applied directly to it.
    Thanks! That cleared everything up nicely.

  7. #7
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    No you shouldn't add a class or ID to the HTML element because it's not (technically) part of the canvas,
    Yes it is.
    Quote Originally Posted by AlexDawson View Post
    the body holds everything that appears on-screen, the head holds everything that appears off-screen
    Not really... The head contains the document title and metadata, the body contains content. Whether something appears off-screen or not depends on CSS.
    Quote Originally Posted by AlexDawson View Post
    and HTML is simply there to tell the world what language it's written in and sit pretty, not have style applied directly to it.
    You can style the root element just fine.
    Simon Pieters

  8. #8
    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)
    zcorpan, You are wrong. While style applied to the root element will appear within the browser it's fundamentally against the specification to apply class or ID attributes to the HTML element (Section 7.3 of the spec omit's any mention of the class or ID attribute being usable in that element). Therefore selecting that element for style fundamentally goes against the natural usage for that element (it's not stated you cannot do it but the lack of implementation means it's still considered a violation). The HTML specification furthermore states (in reference to the body element) that the body element is the canvas, NOT the HTML element (as you said), therefore the root element (HTML) is beyond the canvas and is not applicable or relevant for style (note the below quote from HTML spec - Section 7.5.1).
    The body of a document contains the document's content. The content may be presented by a user agent in a variety of ways. For example, for visual browsers, you can think of the body as a canvas where the content appears: text, images, colors, graphics, etc.
    Source: http://www.w3.org/TR/html401/struct/global.html#h-7.3 (See Attributes defined elsewhere)

    Quote Originally Posted by cooper.semantics View Post
    That is not necessarily true; If you're using a framework, and want to add framework type conventions to the body tag, then you would use a class.
    Indeed that is true cooper, however they are the exception rather than the rule, frameworks do not specify the content so it's understandable that the rule may repeat, however convention would say that the chances of a base-mark (for a single page) on the base element being repeated would be highly unlikely.

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,813
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    zcorpan, You are wrong.
    It is all a matter of the difference between what the standards say and how a specific browser implements it. Just because one browser implements it the way zcorpan describes doesn't mean that all browsers implement it that way and even if they do all implement it that way it still doesn't mean that it is valid (since the standards say otherwise).
    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="^$">

  10. #10
    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)
    Well the specification doesn't list it as a valid attribute, whether browsers go against that is besides the point (IMO), that's like using DIV element's for everything, sure it can be done and it'll display but it's neither semantic or valid and if you have no reason or need to go against the spec, why would you do it.

  11. #11
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I refuse to argue based on interpretation of the HTML4 spec.

    I'll state some facts though:

    The XHTML2 WG considered it a bug in the spec that the id attribute was not allowed on the root element, and fixed it in XHTML 1.0. (In HTML5 class is also allowed.)
    http://www.w3.org/TR/xhtml1/dtds.htm...trict.dtd_html
    http://www.whatwg.org/specs/web-apps...s.html#classes


    According to the CSS spec, neither the root element nor the body ARE the canvas, but instead some styles ('background' and 'overflow' but not e.g. 'border') that are specified on the root element (or in some cases the body element) APPLY to the canvas or viewport instead of to the element itself.
    http://www.w3.org/TR/CSS21/intro.html#the-canvas
    UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'. The 'visible' value when used for the viewport must be interpreted as 'auto'. The element from which the value is propagated must have a used value for 'overflow' of 'visible'.
    http://www.w3.org/TR/CSS21/visufx.html#overflow
    The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.

    For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. For documents whose root element is an HTML "HTML" element or an XHTML "html" element that has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of the background properties from that element's first HTML "BODY" element or XHTML "body" element child when painting backgrounds for the canvas, and must not paint a background for that child element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element.
    http://www.w3.org/TR/CSS21/colors.html#background


    The UA style sheet styles the root element with 'display:block'.
    http://www.w3.org/TR/CSS2/sample.html
    http://www.whatwg.org/specs/web-apps...#display-types
    Simon Pieters

  12. #12
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, the :root pseudo-class was invented specifically for styling the root element.
    http://www.w3.org/TR/css3-selectors/#root-pseudo
    Simon Pieters

  13. #13
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Many of us have used the HTML element to define certain rules in CSS, even adding a background to it. Never have I heard that it's not okay. I do know older versions of IE (below 6, if I recall correctly) have some inconsistency hiccups, but other than that I fail to understand why that may not be done?



    Code:
    html, body {margin:0; padding:0;}
    Many of us use that constantly, don't we?

    Code:
    html {background:url(..);}
    I use that sometimes to avoid adding another division to my HTML document.

    If the two samples above are fine, then surely giving the HTML document an ID is fine too?

    Is it wrong to do because the W3C does not explicitly state it's okay?
    Maleika E. A. | Rockatee | Twitter | Dribbble



  14. #14
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a very old Blog, but interesting:
    http://blog.charlvn.com/2004/09/styl...-texthtml.html

  15. #15
    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)
    I suppose it depends upon whether you use and Serve Real XHTML, or HTML as to whether we consider styling the HTML with CSS as that does make a difference.

  16. #16
    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)
    zcorpan, I stand corrected however I still think it's rather odd to apply style to the HTML element. Perhaps this is something which requires a more explicit definition in the specification itself, because clearly it seems rather conflicted at best as to what purpose the root element has (apart from just acting as the container for the head and the body). This surely requires us to redefine the use of a wrapper DIV on the body (for certain designs) when we could simply apply the core style to the root element and then use the body tag as the wrapper. I've played with it a bit and all the major browsers support such styling (including IE6).

  17. #17
    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)
    I think it's partly[?] because; in HTML some start tags are "Optional", but the element node exists in the DOM even if the tags don't occur in the markup. In HTML, the start and end tags are optional for the <html>, <head> and <body> elements.

  18. #18
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    zcorpan, I stand corrected however I still think it's rather odd to apply style to the HTML element. Perhaps this is something which requires a more explicit definition in the specification itself,
    "The html element represents the root of an HTML document." says HTML5.

    Quote Originally Posted by AlexDawson View Post
    because clearly it seems rather conflicted at best as to what purpose the root element has (apart from just acting as the container for the head and the body).
    AFAIK it doesn't serve any other purpose.

    Quote Originally Posted by AlexDawson View Post
    This surely requires us to redefine the use of a wrapper DIV on the body (for certain designs) when we could simply apply the core style to the root element and then use the body tag as the wrapper. I've played with it a bit and all the major browsers support such styling (including IE6).
    Indeed, the wrapper div has been unnecessary for quite some time actually. (If you specify a background on the root and on the body, then the body's background is not applied to the canvas.)
    Simon Pieters

  19. #19
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    What's the point of the :root pseudo-class? You might as well just write "html". And whatver language you're using, surely you should know what your root element is, so can someone please explain how it isn't redundant?

  20. #20
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    What's the point of the :root pseudo-class? You might as well just write "html". And whatver language you're using, surely you should know what your root element is, so can someone please explain how it isn't redundant?
    .
    :root is useful in a XML context where you donít necessarily know what the root element is called (unlike in XHTML/XML where itís always html). :selection can be another way of customizing the look and feel of your site.
    :root has a higher specificity than html, so they are not quite the same.

  21. #21
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ah. Not redundant then. Thanks.


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
  •