Suitable HTML tag for elements Titles
Hello š
Since i can't use the <h> tags except once for each. I was wondering what is a semantic tag to use for titles of some elements?
for example:
A card with it's title, a paragraph and a link.
8 Replies
Well, you can always use between h1 to h6 as long as they are structured properly
Yes it is true that it is highly encouraged to only use one
<h1></h1>
tag for each page but you can have h2 - h6 as much as you needOh cool! Thx š
I'm a little lost b š
Can you please explain?
Why use articles? And why there are lots of <header> tags š¤
[I]t is a section in the accessibility tree, and usually contain the surrounding section's heading (an h1āh6 element) and optional subheading, but this is not required.āhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/header
The <article>
HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
āhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/article
<header>
is more than just the nav links at the very beginning of the page. It can also be used as an "intro" to sections and articles.
As for why use so many <article>
tags, because b1 like to be semantically correct even with examples.I gotta improve myself on semantics š
Thanks @13eck for the explanation š
Yea was just an example of how you could semantically do things. Sorry for not explaining it more, was really late and was like hey... code .. lol
Beck nailed it, <header> is a great wrapper for heading/subtitle.
<footer> can be a good wrapper too* for the bottom of say a card, or buttons in a region.
Also how I laid it out is to demonstrate how heading levels could be used, more to your OP. See how I go down a heading level as I go into a new region role? Personally its how I go about it
Headings should be semantic not based on visual size too, which I see lots of people mess up. Mainly cause it comes with defaults and makes sense in most situations to have the heading decrease in size as it is lower.
That's interesting! Thanks for the explanation, appreciate it šš