"Normalizing" H level elements within content

Despite the incredible boost that heading level elements provide for on-page SEO, not to mention providing semantic cues for search agents and screen readers, lots of people stay away from using them because of their default display properties.

I’m using the following code in my theme’s options css stylesheet to “normalize” the display of the heading level elements within the content.

//Normalize Heading Size within Content?
.entry h1,.entry h2,.entry h3,.entry h4,.entry h5,.entry h6{font-size:100%;}

//Normalize Heading Flow within Content?
.entry h1,.entry h2,.entry h3,.entry h4,.entry h5,.entry h6{font-size:100%;display:inline;float:left;margin:0;padding:0 .5em 0 0;}

Elements are still in boldface to show their importance, but the site owner has the option to integrate them more cleanly into their content on two levels: size and placement.

Ideas on the display implications of this?

Ideas on improving the css for more flexible use case scenarios?

Heading elements are usually preceeded and followed by p level elements, so the float element seeks to normalize them into the flow in that regard. However, they will always be the first element within the paragraph block. I haven’t tested images within the flow yet.


There is nothing wrong with this. I do something similar on any site that need different H elements because by default they are rather bland. Make sure you test it out to verify the CSS does what you intend.

I usually create classes based on the style or color of different options. For example .blue h1 or .western h1.

Best of luck.

Agree on all points. Thanks for the feedback.