Lucas Carlesso Comments - Answer Overflow

Lucas Carlesso

•Created by Lucas Carlesso on 8/29/2024 in #front-end

Headings: Is “Preparation time” a `<h2>`?

@just_13eck I can't check because it's just a mockup from a Frontend Mentor challenge, sorry for not mentioning it earlier. --- @pb-travelog I have also thought that it could be a <h3>, but for these two reasons: 1. "Preparation time" is smaller than the others <h2>. While it's incorrect to choose a heading just for sizing, it's also generally the case that size is used to visually communicate the level of a heading. 2. Because the <h1> is both the title of the article and the start of an introductory section it's not clear if "Preparation time" is starting a new section or a subsection. I feel like jumping a level here could be justified, but otherwise, I think you could avoid the issue by making the introductory section explicit like so:

<h1>Simple Omelette Recipe</h1>
<h2 class="visually-hidden">intro</h2>
<p>An easy and quick...</p>
<h3>Preparation time<h3>
<h2>Ingredients</h2>
<h2>Instructions</h2>
<h2>Nutrition</h2>

<h1>Simple Omelette Recipe</h1>
<h2 class="visually-hidden">intro</h2>
<p>An easy and quick...</p>
<h3>Preparation time<h3>
<h2>Ingredients</h2>
<h2>Instructions</h2>
<h2>Nutrition</h2>

That said, this doesn't feel quite right to me too. The problem is that headings aren't defined by any strict conditioning. Like, how do you know if something is a heading if it's not just any big descriptive text? Maybe the best we can do is decide based on what would better outline the content. This is why I tend to be very selective of what I mark as a heading; sometimes less is more. But I'm probably just overthinking this stuff.

9 replies

Gaming

Programming