What HTML elements should I use here and what markup order?

Here's what I have so far but really not sure what to go with:

          <article>
            <hgroup>
              <p>
                <strong>Professional learning</strong>
              </p>
              <h2>Events and webinars</h2>
            </hgroup>
            <p>
              Connect and collaborate with other passionate science teachers
              from your area
            </p>
            <a href="/professional-learning">Learn more →</a>
          </article>

          <article>
            <hgroup>
              <p>
                <strong>Professional learning</strong>
              </p>
              <h2>Events and webinars</h2>
            </hgroup>
            <p>
              Connect and collaborate with other passionate science teachers
              from your area
            </p>
            <a href="/professional-learning">Learn more →</a>
          </article>

7 Replies

Kevin Powell•2w ago

Looks good to me

b1mind•2w ago

Oh you did make a post 😂 as I said in main channel, you will want to use <header> if you want reader modes to work faik. You can use hgroup inside header too for what ever reason if you needed to wrap them farther. Came across this issue on joyofcodes site, where he was only using hgroup and reader modes where not picking them up as articles Could be dependant on being around just the h1 though too 🤔 ....double checked my PR I sent him.

Lamer of Sweden•2w ago

As far as I know the header is only landmark when not nested, that is when headeris the header for the document. Nice comparison on link below.

Lamer of Sweden•2w ago

https://web.dev/learn/html/semantic-html

web.dev

Semantic HTML | web.dev

Using the correct HTML elements to describe your document content.

b1mind•2w ago

Correct but this isn't about being a landmark I'm specifically talking about reading immersive modes for like edge,FF, Safari You can absolutely use <header, footer>s in main, section, articles

Lamer of Sweden•2w ago

Oh, yes. Just read "reader" as in assitive tech

b1mind•2w ago

Yea fair I was not specific enough Yea so it only matters for the H1 it seems

main
  h1
// would work
main
  hgroup
    h1
    p
//would not work
main
  header
    h1
    p
//would work

main
  h1
// would work
main
  hgroup
    h1
    p
//would not work
main
  header
    h1
    p
//would work

So in Zachs case I don't think it would matter but would have to test. Long as he has a <main> > <h1> it would allow immersive* reader mode and follow heading levels down i tend to use <header> and then <hgroup> if I needed another wrapper around just the heading/tagline but wanted other things in the <header>

Gaming

Programming

What HTML elements should I use here and what markup order?