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.
<div>
<span> Title </span>
<p> paragraph </p>
<a> Learn more </a>
</div>
<div>
<span> Title </span>
<p> paragraph </p>
<a> Learn more </a>
</div>
8 Replies
Sinc02
Sinc02ā€¢3y ago
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 need
~MARSMAN~
~MARSMAN~ā€¢3y ago
Oh cool! Thx šŸ˜Š
b1mind
b1mindā€¢3y ago
<main>
<header>
<h1> Title </h1>
<p> paragraph </p>
<a> Learn more </a>
</header>
<article>
<header>
<h2> a-title</h2>
<i> sub-title</i>
</header>
<p> some body text</p>
<section>
<h3> a section </h3>
</section>
</article>
<article>
<header>
<h2> a-title</h2>
<i> sub-title</i>
</header>
<p> some body text</p>
<section>
<h3> a section </h3>
</section>
</article>
</main>
<main>
<header>
<h1> Title </h1>
<p> paragraph </p>
<a> Learn more </a>
</header>
<article>
<header>
<h2> a-title</h2>
<i> sub-title</i>
</header>
<p> some body text</p>
<section>
<h3> a section </h3>
</section>
</article>
<article>
<header>
<h2> a-title</h2>
<i> sub-title</i>
</header>
<p> some body text</p>
<section>
<h3> a section </h3>
</section>
</article>
</main>
~MARSMAN~
~MARSMAN~ā€¢3y ago
I'm a little lost b šŸ˜… Can you please explain? Why use articles? And why there are lots of <header> tags šŸ¤”
13eck
13eckā€¢3y ago
[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.
~MARSMAN~
~MARSMAN~ā€¢3y ago
I gotta improve myself on semantics šŸ™ˆ Thanks @13eck for the explanation šŸ™Œ
b1mind
b1mindā€¢3y ago
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.
~MARSMAN~
~MARSMAN~ā€¢3y ago
That's interesting! Thanks for the explanation, appreciate it šŸ˜ŠšŸ™Œ
Want results from more Discord servers?
Add your server