Menu
Within the Bootstrap CSS project, styles are provided for your heading tags (H1, H2, H3, H4, H5, H6), but there's also a series of class names based on the headings as well (.h1, .h2, .h3, .h4, .h5, .h6). What is the benefit gained from using the class name of a H1 without properly using the H1 tag? I would think that you always want to make sure your HTML mirrors your visual importance.
Any thoughts explaining a good reason for using .h1 instead of using a h1 tag would be appreciated.
625
The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading. Note: Only use one <h1> per page - this should represent the main heading/subject for the whole page.
Each page or post can have multiple headings. The <H1> HTML tag is usually used for the title of a page or post and it is the first header visible on a page. The formatting of an h1 usually differs from the rest of the header tags found on a page (h2, h3, h4).
H1s are a good indicator of what the most important text on a page is. As they are usually the most visually notable content on the page, a good H1 can ensure clarity for the reader. It's important to remember that SEO can often be about user optimisation as well as optimisation for search.
It is good pratice to inlcude H1 heading only once and to use H2-H6 heading in others areas.
You ask:
Why use
.h1instead of actualh1?
The goal is to use both, together.
The usefulness of the .h* classes comes into play when the size of the typography in the design does not correlate with the semantically appropriate heading levels. By splitting the problem in two, we can cleanly solve for both.
The first bit is the element/tag. The '<h*>' takes care of semantics, accessibility and SEO.
The second bit is the class. The '.h*' takes care of visual semantics and typographical hierarchy.
I believe that the origins of these classes come from OOCSS project:
Object-Oriented CSS
The latest iteration of OOCSS has changed a little since I last looked at it, but here's the relevant heading.css file, from an older commit, that has the .h1 - .h6 classes that I'm familiar with:
6e481bc18f oocss / core / heading / heading.css
From the comments:
.h1-.h6classes should be used to maintain the semantically appropriate heading levels - NOT for use on non-headings
...
if additional headings are needed they should be created via additional classes, never via location dependant styling
Note the emphasis above.
For a good explanation as to why one would use these classes, see:
Relevant quotes from the above links:
... [HTML5] Section elements are meant to help the browser figure out what level the heading really is, but not necessarily to decide how to style it.
So, how do we style headings in an HTML5 world?
... We shouldn’t use sectioning elements for styling. We should let them do the job they were designed for, which is sorting out the document tree, and solve styling issues another way that meets our goals better: with simple reusable class names that can be applied to any of our headings no matter how deep they may be in the sectioning content.
I recommend abstracting site wide headings into classes because then they are portable, predictable, and dry. You can call them anything you like.
Another absolutely stellar nugget of wisdom [Nicole Sullivan has] given us is what I call double-stranded heading hierarchy. This is the practice of defining a class every time you define a heading in CSS.
... By assigning a class along with each heading style we now have those styles attached to a very flexible selector that can be moved anywhere, rather than to a very specific and non-movable one.
Here's a pseudo-html5 usage example (h/t Jamund Ferguson):
<body> <div class="main"> <h1>Main Heading</h1> <section> <h1 class="h2">Section Header</h1> </section> </div> <aside class="side"> <article class="widget"> <h1 class="h3">Sidebar Headings</h1> </article> <article class="widget"> <h1 class="h3">Sidebar Headings</h1> </article> </aside> </body> Please read full articles (and thread), via links above, for more detailed information related to this question/topic.
125
Most stylesheets have a set of font-sizes that correspond with heading styles 1 through 6. Sometimes, elsewhere on the page, web designers want to use those same font sizes on text which should not be a part of an actual heading element, for semantic reasons. Rather than providing names for each of those sizes like .size-12, .size-14, .size-16, etc, it's easier just to name them all with class names similar to your headings. That way, you know that the text will be the same size as an H1 element, even though it's not actually an H1 element. I've done this a few times myself.
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
