I thought that CSS controlled the presentation of a page but it looks like heading elements have different sizes. Isn’t font size more presentation than structure?
Answer
Good observation! You are correct in that font size is a presentational aspect of a page and CSS defines how our pages look. The font size of the text contained within a heading element is controlled by the browser’s default style sheet. Developers can overwrite this default style sheet by creating their own custom style sheets. To learn more about style sheets, check out the Learn CSS course.
Sure, defining text as headings changes the size, but that’s besides the point (you can always change it with CSS). It’s really telling the browser what kind of content it is, which is super important for SEO.
… or any user agent that analyzes the document outline. When only the default style sheet is taken into account, headings and lists present in ways that user agents expect. Headings are displayed in smaller text the lower their rank in the heirarchy. Lists display with bullets.
We do not choose a heading element just for its size but for how important it is to the overall scope of the document.
h1 => top level heading, title of document
h2 => secondary level heading for document sections (topics)
h3 => tertiary level heading for topic sections
As we can see, the scope of the heading is more localized and constrained the further we drill into the document. Headings and lists are semantic elements at their very core.
Using correct heading structure is also extremely important for making sure your website/UI is accessible (i.e. can be used by people with disabilities and their assistive technologies). A lot of screen reader users will navigate a page by using a shortcut that will let them simply travel between headings. If the page doesn’t use headings correctly, this feature is basically useless.
so to confirm this type of formatting is to allow not just for bigger text but to allow the SEO and the user to know how to format their information I.E. the topic is about bears and the sub topic is bear types and so on. This helps with the over HTML formatting and user interaction vs. this is just larger font? Then after that we can format the styling with CSS?
That is correct! HTML has nothing to do with how elements are visually presented. You should not pick a heading because it is bigger, but because of its importance. For example, if the main title of an article is “Why do people learn to code?” that should be an h1. The second most important tiel should be h2, and so on. You pick a heading based on its importance.