Hacker News Reader

Comment by ohwp | Hacker News Reader

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.

View on HN

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.

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.

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!

He was using the example from the article - did you read it?

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.

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

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#h...

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.

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

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"

Thanks for that. I had assumed the header structures was one of the more stable parts of the spec!

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.

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=G...!

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.

Reply on news.ycombinator.com