In regards to these two challenges (1 | 2):
Here’s some interesting information about heading elements from Mozilla Developer Network (MDN).
Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.
Do not use lower levels to decrease heading font size: use the CSS
font-size
property instead.Avoid skipping heading levels: always start from
<h1>
, next use<h2>
and so on.You should consider avoiding using
<h1>
more than once on a page. See “Defining sections” in Using HTML sections and outlines for more information.
When I review projects, I usually see people skipping heading levels because they’re using heading levels to style their elements. For example, one may try an h2
element and realize that it adds some padding that they don’t want. Then they’ll try the h3
element and that has less padding, so they’ll keep that in even though their heading hierarchy skips from h1
to h3
.
If you have a section that needs a heading and you don’t like the way it’s styled by the browser, you can always change the styling in your style.css file like this example:
h2 {
padding: 0;
margin: 0;
font-size: 2rem;
}
/*You can use any CSS you want here.*/
That way, you’ll be able to maintain the heading hierarchy without skipping heading levels and get the styling you want!