Kevin Powell - Community•2y ago

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•2y 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~•2y ago

Oh cool! Thx 😊

b1mind•2y 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~•2y ago

I'm a little lost b 😅 Can you please explain? Why use articles? And why there are lots of <header> tags 🤔

13eck•2y 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~•2y ago

I gotta improve myself on semantics 🙈 Thanks @13eck for the explanation 🙌

b1mind•2y 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~•2y ago

That's interesting! Thanks for the explanation, appreciate it 😊🙌

Gaming

Programming

Suitable HTML tag for elements Titles