Using Semantic HTML Correctly: Divs vs Sections

By
Keven Krok
-
0
8
Asked By CuriousCoder42 On

I've been exploring semantic HTML5 elements like

,

, and

as replacements for

s to enhance semantics and accessibility. However, I'm often in situations where I need to use

s for layout purposes. For instance, I might have an 'About Us' section with a different background color than my products section. Typically, I end up with nested

s to manage width instead of relying solely on padding.

My main question is whether having a

inside a

is still considered accessible. For example, is this structure okay?

```html

Title


Title

Who we are


What we do


```

2 Answers

Answered By WebWizard90 On

Yeah! It's totally fine to wrap semantic elements like

in

s for layout purposes. The key to semantics lies in using appropriate landmarks and headings. Remember, the

should come with an accessible name, usually a heading. It doesn't have to be the first child but keep it close to the top or use aria-labelledby for better accessibility. Just make sure to use

for self-contained pieces that could stand alone.

LayoutLover22 -

Thanks! That cleared up a lot. Just to be sure, can I use aria-labelledby on a

if I can't make the heading the first child of my section?

TagMaster3000 -

Absolutely! Just ensure you link the heading properly with the right ID. And regarding

, your structure looks good for them to be used as individual cards!

Answered By SemanticScribe On

There actually isn't a semantic element specifically for 'hero'; I think you meant

. It’s common to hear that term in design contexts, though, so no worries if you got a bit mixed up!

CuriousCoder42 -

Haha, right! I had a brain freeze when I was posting. Thanks for the clarification!

Related Questions

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.