Headings: Is “Preparation time” a `<h2>`?
I don't know. Judging just by the plain text, it could be, but the way it's presented makes me think it's not intended as such. I wish I could ask the author/designer what they had in mind. Maybe there's no right answer here(?)
If a 'heading' is just a title/short-description for the content that is grouped with, then yes, but according to my understanding, headings should be reserved for major sections of the content that would make sense to include in a table of contents, not just any thematic group; although what someone would consider “major” enough to be included in a table of contents is somewhat subjective.
If it's not a heading, then I think It would make sense to mark it as a
<figcaption> wrap in a <figure>. Communicating “preparation time” is a description for this piece of content, without specifying that it should be in a table of contents.
6 Replies
If you inspect the DOM tree you'll be able to see what the author went with
But it makes sense for it to be an
h2 since there's no other h2 for it to be an h3 ofLooking at the image i would lay out the content tree like this:
h1: Simple Omlette Recipe
p
h2: Preparation time
ul
h2: Ingredients
ul
h2: Instructions
ol
h2: Nutrition
p
table
The "Preparation time" is an important bit of information for a person who wants to make this recipe. Because it has relevance when making the dish it should be treated with more care. Also by making it a header, you get an SEO and A11y boost.
The heading tree will be as follows:
1. H1: Simple Omlette Recipe
i. H2: Preparation time
ii. H2: Ingredients
iii. H2: Nutrition
Why are you jumping from
h1 to h3? That's not how headings work. h1 then h2, then h3. Don't just use a different heading because of the size, that's not how it works. Use CSS to change the size, as the element type is what's important.Im not suggesting that it be an h3 because of size but more because of the relative importance of the information contained within. But you are correct, it should be an h2 tag based on the document flow. I will amend the suggested document flow.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#nesting
MDN Web Docs
–: The HTML Section Heading elements - HTML: HyperText Markup Langu...
The to HTML elements represent six levels of section headings. is the highest section level and is the lowest. By default, all heading elements create a block-level box in the layout, starting on a new line and taking up the full width available in their containing block.
@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:
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.It could also be bold text with a slightly larger font size (say 1.1 or 1.2em) for visual distinction. Just because it’s bigger font size doesn’t mean it’s a heading element
Think of headings like chapter titles in a book or the main points in an outline. I’d you don’t think it’d make the cut for your pre-writing outline then it’s not a heading