Isn't font size more presentation than structure?


#1

Question

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.


FAQ: Learn HTML Elements - Intro to HTML - Headings
#2

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.


#3

… 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.


#4

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.