4 ms·

I think it's also good practice to check if you can reduce your DOM. <ul id="social"> <li><a href="#" class="social-link twitter">Twitter</a></li> <l

by ohwp 14y ago

I think it's also good practice to check if you can reduce your DOM. <ul id="social"> <li><a href="#" class="social-link twitter">Twitter</a></li> <li><a href="#" class="social-link facebook">Facebook</a></li> <li><a href="#" class="social-link dribble">Dribbble</a></li> <li><a href="#" class="social-link gplus">Google+</a></li> </ul> could be written as: <a href="#" class="social-link twitter">Twitter</a> <a href="#" class="social-link facebook">Facebook</a> <a href="#" class="social-link dribble">Dribbble</a> <a href="#" class="social-link gplus">Google+</a> since you already have the social-link classes attached to it. Another example. This: <div id="header"><h1>header</h1></div> could be written as: <h1>header</h1> since you should have only one H1 on your page.

blowski 14y ago
In HTML5, it's fine to have multiple `h1` tags on the page, though you can only have 1 in each `section`.
- ohwp 14y ago
  I know it's fine, but I think you shouldn't because of SEO. But to keep this on topic: my point is: a lot of time you can reduce your DOM.
  - blowski 14y ago
    Even then, it's fine as long as you're structuring your page sensibly. For example, on a blog index where each blog post is in a section, it's fine for each blog title to be a h1. Matt Cutts talking about this: http://www.youtube.com/watch?feature=player_embedded&v=GIn5qJKU8VM# http://www.youtube.com/watch?feature=player_embedded&v=G...!
  - adlpz 14y ago
    As I understand it, the whole "SEO mandates one h1 per site" is outdated. Search engines (read, Google) now follow HTML5 specs and, if you are doing your semantic tagging right, multiple h1 aren't a concern anymore.
- j4_james 14y ago
  It's worth mentioning that in HTML 5.1 they are now recommending that you use headings with an appropriate rank. Not that it's wrong to have multiple H1 tags, just not recommended anymore. Exact wording: Sections may contain headings of any rank, but authors are strongly encouraged to use headings of the appropriate rank for the section's nesting level. http://www.w3.org/html/wg/drafts/html/master/sections.html#headings-and-sections http://www.w3.org/html/wg/drafts/html/master/sections.html#h...
  - blowski 14y ago
    Hmmm, interesting. So that's going in the other direction to the HTML5 spec, in which you considered a header in relation to the section it's contained in, without worrying about the section's relation to the whole document. It was the browser's job to do the latter. I will keep an eye on this. Thanks for the pointer.
    - j4_james 14y ago
      In case you're interested, this is the bug report that resulted in the change: https://www.w3.org/Bugs/Public/show_bug.cgi?id=19741 https://www.w3.org/Bugs/Public/show_bug.cgi?id=19741 The final editor's response explains the reasoning: "Change removed advice recommending use of h1 elements as the utline algorithm has virtually no implementations and as a result use of h1 elements flattens document outlines for users who actually consume the heading semantics. While use of elements of the appropriate rank for the section's nesting level is backwards compatible"
      - blowski 14y ago
        Thanks for that. I had assumed the header structures was one of the more stable parts of the spec!
4lun 14y ago
For your first example, I would argue the following is better. You reduce repetition of the class name and keep the semantic value of having a list <ul class="social-links"> <li><a href="#" class="twitter">Twitter</a></li> <li><a href="#" class="facebook">Facebook</a></li> <li><a href="#" class="dribble">Dribbble</a></li> <li><a href="#" class="gplus">Google+</a></li> </ul> You would need to have a scary size document to reap the benefit of reducing your element nesting level by that little. Also if you don't want to commit to having a h1 as always being the header, using a class for the styling would be beneficial. <h1 class="header">header</h1> Or depending on your situation you might want to use a header tag.
- 8ig8 14y ago
  I think OOCSS has a strong influence on this use of multiple classes instead of your example of nesting classes (which i would have done, too). I'm not saying I totally agree, but OOCSS promotes the idea that your styles should be decoupled from your HTML structure. This makes CSS easier to maintain.
- progrock 14y ago
  Or maybe better, a fictitious attribute... <a action="share">Share this article.</a> Or better still, just have that as an option in the browser. Tada - 100% minimisation!
- justinsteele 14y ago
  He was using the example from the article - did you read it?
talmand 14y ago
For your first example it depends on various factors. Sometimes having the links inside a list is more efficient in terms of styling versus having a series of repeating anchors. Then again, in most cases you can just as easily wrap the anchors in a div with similar outcomes. About this: <div id="header"><h1>header</h1></div> There are reasons to do this. If all your doing is simply wrapping a block element with a block element then that's likely not a good idea. You are right in that if any styling done to the div can be done to the h1 then you might as well skip using the div in the first place. One reason to do that is for a header with a defined size that has a background image for display and the h1 is text inside that header that can be placed via positioning. Although more than likely the h1 is not a good choice for that role.

by ohwp 14y ago

blowski 14y ago

In HTML5, it's fine to have multiple `h1` tags on the page, though you can only have 1 in each `section`.

ohwp 14y ago
I know it's fine, but I think you shouldn't because of SEO. But to keep this on topic: my point is: a lot of time you can reduce your DOM.
- blowski 14y ago
  Even then, it's fine as long as you're structuring your page sensibly. For example, on a blog index where each blog post is in a section, it's fine for each blog title to be a h1. Matt Cutts talking about this: http://www.youtube.com/watch?feature=player_embedded&v=GIn5qJKU8VM# http://www.youtube.com/watch?feature=player_embedded&v=G...!
- adlpz 14y ago
  As I understand it, the whole "SEO mandates one h1 per site" is outdated. Search engines (read, Google) now follow HTML5 specs and, if you are doing your semantic tagging right, multiple h1 aren't a concern anymore.
j4_james 14y ago
It's worth mentioning that in HTML 5.1 they are now recommending that you use headings with an appropriate rank. Not that it's wrong to have multiple H1 tags, just not recommended anymore. Exact wording: Sections may contain headings of any rank, but authors are strongly encouraged to use headings of the appropriate rank for the section's nesting level. http://www.w3.org/html/wg/drafts/html/master/sections.html#headings-and-sections http://www.w3.org/html/wg/drafts/html/master/sections.html#h...
- blowski 14y ago
  Hmmm, interesting. So that's going in the other direction to the HTML5 spec, in which you considered a header in relation to the section it's contained in, without worrying about the section's relation to the whole document. It was the browser's job to do the latter. I will keep an eye on this. Thanks for the pointer.
  - j4_james 14y ago
    In case you're interested, this is the bug report that resulted in the change: https://www.w3.org/Bugs/Public/show_bug.cgi?id=19741 https://www.w3.org/Bugs/Public/show_bug.cgi?id=19741 The final editor's response explains the reasoning: "Change removed advice recommending use of h1 elements as the utline algorithm has virtually no implementations and as a result use of h1 elements flattens document outlines for users who actually consume the heading semantics. While use of elements of the appropriate rank for the section's nesting level is backwards compatible"
    - blowski 14y ago
      Thanks for that. I had assumed the header structures was one of the more stable parts of the spec!

4lun 14y ago

For your first example, I would argue the following is better. You reduce repetition of the class name and keep the semantic value of having a list <ul class="social-links"> <li><a href="#" class="twitter">Twitter</a></li> <li><a href="#" class="facebook">Facebook</a></li> <li><a href="#" class="dribble">Dribbble</a></li> <li><a href="#" class="gplus">Google+</a></li> </ul> You would need to have a scary size document to reap the benefit of reducing your element nesting level by that little. Also if you don't want to commit to having a h1 as always being the header, using a class for the styling would be beneficial. <h1 class="header">header</h1> Or depending on your situation you might want to use a header tag.

8ig8 14y ago
I think OOCSS has a strong influence on this use of multiple classes instead of your example of nesting classes (which i would have done, too). I'm not saying I totally agree, but OOCSS promotes the idea that your styles should be decoupled from your HTML structure. This makes CSS easier to maintain.
progrock 14y ago
Or maybe better, a fictitious attribute... <a action="share">Share this article.</a> Or better still, just have that as an option in the browser. Tada - 100% minimisation!
justinsteele 14y ago
He was using the example from the article - did you read it?

talmand 14y ago

For your first example it depends on various factors. Sometimes having the links inside a list is more efficient in terms of styling versus having a series of repeating anchors. Then again, in most cases you can just as easily wrap the anchors in a div with similar outcomes. About this: <div id="header"><h1>header</h1></div> There are reasons to do this. If all your doing is simply wrapping a block element with a block element then that's likely not a good idea. You are right in that if any styling done to the div can be done to the h1 then you might as well skip using the div in the first place. One reason to do that is for a header with a defined size that has a background image for display and the h1 is text inside that header that can be placed via positioning. Although more than likely the h1 is not a good choice for that role.