| SitePoint Sponsor |
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!
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.
Thanks for the reply!
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).Originally Posted by AlexDawson
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.
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.
Now, with that in mind, you could define the body with a unique identifier for structural hierarchy.Code HTML4Strict:<body class="layout-3 format-1">
Also, when utilizing frameworks, classes an, an id can be present.Code HTML4Strict:<body id="document">
Code HTML4Strict:<body id="document" class="layout-3 format-1">
Thanks! That cleared everything up nicely.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.
Yes it is.
Not really... The head contains the document title and metadata, the body contains content. Whether something appears off-screen or not depends on CSS.
You can style the root element just fine.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.
Simon Pieters
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).
Source: http://www.w3.org/TR/html401/struct/global.html#h-7.3 (See Attributes defined elsewhere)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.
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.
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="^$">
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.
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
http://www.w3.org/TR/CSS21/visufx.html#overflowUAs 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/colors.html#backgroundThe 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.
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
Also, the :root pseudo-class was invented specifically for styling the root element.
http://www.w3.org/TR/css3-selectors/#root-pseudo
Simon Pieters
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?
Many of us use that constantly, don't we?Code:html, body {margin:0; padding:0;}
I use that sometimes to avoid adding another division to my HTML document.Code:html {background:url(..);}
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?
Here is a very old Blog, but interesting:
http://blog.charlvn.com/2004/09/styl...-texthtml.html
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.
};-) http://www.xhtmlcoder.com/
Thinking Web: Voices of the Community
> March 2013 - SitePoint forums: Spot the Error 3: Calling all Sleuths! Winner Announced!... She knows how to spot simple <code> errors but do you?
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).
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.
};-) http://www.xhtmlcoder.com/
Thinking Web: Voices of the Community
> March 2013 - SitePoint forums: Spot the Error 3: Calling all Sleuths! Winner Announced!... She knows how to spot simple <code> errors but do you?
"The html element represents the root of an HTML document." says HTML5.
AFAIK it doesn't serve any other purpose.
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
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.
Ah. Not redundant then.
Posting Permissions
Bookmarks