HTML/CSS Questions, Resources, and Discussion (January 2018 Cohort)

8

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! :sunny:

7 Likes