Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

How to style h1-h3 elements according to the number of sectioning elements they are embeded into.

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 README.md
Octocat-spinner-32 html5-titles-inception-compass.scss
Octocat-spinner-32 html5-titles-inception.css
Octocat-spinner-32 html5-titles-inception.less
README.md

Disclaimers

HTML5 Outlines pros & cons

From HTML5Doctor's article about Outlines :

The document outline is the structure of a document, generated by the document’s headings, form titles, table titles, and any other appropriate landmarks to map out the document. [...] The outlining algorithm has been clearly defined in the HTML5 spec.

It allows web developers to use only <h1>s in their content thanks to a hierarchy of sectioning element containing them. This is really useful with Content Management Systems that may generate the same HTML source for several usages.

Unfortunately, most browsers still don't have default CSS rendering for such multi level <h1>s.

HTML5 Titles Inception to the rescue

HTML5 Titles Inception tries to help, with a (not so) little CSS that you can extend.

It shows how to style <h1>-<h3> elements according to the number of sectioning elements they are embeded into.

Fortunately, tools such as LESS and SASS exist, so that you don't have to put the whole CSS mess into your files.

Inspiration

HTML5 Titles Inception is inspired by Paul Rouget's -moz-any selector tutorial and Rob Reyes's 5 levels of Inception.

Something went wrong with that request. Please try again.