Hi,
Just looking at laying out a page and thinking of using sematic html tags. I normally do the old
<div id="banner">
etc but figure I should move to semantic to make it easier for accessibility and to a lesser extent easier to read code.
My question though is how vague a grouping is each tag. Take this website for example (nothing to do with me) https://www.axminstertools.com/ if you look at the bottom section it is 2 sections with the grey part and the white part creating what I would call the footer.
Would both of these parts be within the footer tag? if so what would I then use to separate them out? would that be section?
It’ll be interesting to see what Paul says, but I’d put the grey area in a section and the white in a div. Everything in the grey area is kind of related content wise, which is why I’d use a section.
Edit: ooh. I forgot to say I’d wrap all of that in the footer.
On that page everything from the email sign up and downwards is what I would class as the footer because it will be mostly the same on each page. Indeed that’s how they have coded that page and it is all inside a footer element.
You could have different sections in your footer of course using the section tag and appropriate heading level tags.
At the simplest level a page could be just header, main and footer to start with (and maybe better to have nav outside the header to make it easier to manage for smaller screens and because it is a landmark element).
You may indeed have more headers and footers in sections inside main but you are not allowed to nest headers or footers inside each other (even if in sections in those elements).
Thanks both, I think I was getting hung up on only using the sematic tags when it seems like its ok to do the bulk of the layout with the sematic tags and then use divs within those sections as long as it follows the correct heirachy. (hopefully that is correct)
The html validator tells me I should use a div where I don’t have a heading in a section, so @DaveMaxwell you are correct to suggest the white section in the footer would be a div.
Sorry jumping around the page a bit now but wondering where a Hero panel on a homepage would come? in Main? or in it’s own div above main?
A hero is usal at the top of the page so I would put it in the header. The header element when a direct child of a body is described as a ‘banner’ landmark role so that seems pertinent for a hero section.
Strictly speaking sections ‘should’ start with a heading and the MDN page suggests that if the design doesn’t have a heading but the section is clearly a new section then use a heading but hide it off screen. Sections and heading tags allow keyboard users and screen readers to navigate through sections easily unlike a div.