gistfile1.md

“If something has a title, don’t use <h1>, use <div class="title”>” —wait, why? http://chrislloyd.com.au/post/54040765948/the-chris-lloyd-css-guide …

@mattrobs

Why I Hate HTML headings

Headings in HTML are like maintaining a numbered list of items in markdown:

1. Foo
2. Baz

When I want to add an item after Foo, Bar, I need to now change 2 items:

1. Foo
2. Bar
3. Baz

It's the same for HTML headings. It's also why I hate the tabindex attribute and the z-index property in CSS. It's very difficult to design composable entities when they're dependent on the ordering of other parts of the HTML.

@chrislloyd I disagree.  You should strive to be fully semantic from the start instead of doing it only if it’s a requirement

@GoGoGarrett

I'm going to attack your definition of semantic. Is this semantic?

<div class="tagline">To Infinity and Beyond</div>

It is 100% semantically correct. Infact, it's actually pretty readable and maintainable because you know exactly what it is (a tagline). If you saw this, can you tell me what it is other than a second level heading?

<h2>To Infinity and Beyond</h2>

The only time I can think where using a h2 actually matters is when somebody has stylesheets disabled. Whoop-de-doo. I actually think that taking the time to properly name elements in the context of your page is harder than slapping down a lazy h2. It forces you to think about what is actually going there and what is it called and wether you are referring to it consistantly across your application. If you're working on a page that backed by a data model somewhere it's easier because the name of value that you write out would be the same as the class name. This means that everybody, both designers writing CSS and developers writing whatever, are all using the same nomanclature.

<div class="tagline"><%= @idea.tagline %></div>

I've heard many a conversation that goes something like:

A: Hey that h2 looks weird
B: Which one do you mean?
A: The tagline
B: Oh you mean the subhead?

If you're really concerned about the people who visit your site with stylesheets disabled, you can always add a h2 after you've done the rest of the site and know that it's going to actually be a second level heading instead of a first or a third.

<h2 class="tagline">To Infinity and Beyond</div>

Other minor reasons:

• Browsers style headings so you're always constantly resetting and re-adding margins/padding.
• It's faster to prototype when you only need to change one thing ("tagline") instead of two (open tag, close tag).
• Composability.
• Composability.
• Composability.