: Should I use section element for an image slider? It is my understanding that the basic HTML5 layout is: <body> <header> </header> <nav> </nav> <section
It is my understanding that the basic HTML5 layout is:
<body>
<header>
</header>
<nav>
</nav>
<section id="possible-image-slider">
</section>
<section>
<article>
</article>
<aside>
</aside>
</section>
<footer>
</footer>
</body>
I also know from this that the section element "is NOT a generic container element." It really should only be used when there is an obvious natural heading for the section...
<h1>Image Slider</h1>
HOWEVER
That text is unnecessary and silly to appear next to my image slider on the welcome page
I don't want to smack a random div in the middle of my neat HTML5 layout
So, I want to use the section element for this.
Is it true that this is not correct usage?
MORE IMPORTANTLY! Will I lose SEO points for doing this?
More posts by @Rambettina238
2 Comments
Sorted by latest first Latest Oldest Best
If you only care about SEO, most of this wouldn’t matter for general web search engines (like Google, Bing, DuckDuckGo, etc.). It’s relevant if you care about semantic markup (which can be useful for various consumers and tools).
There is no general answer for this (just like your "basic HTML5 layout" cannot be used like that for many pages).
It depends on what the slider is about, what the previous content is, and what the following content is.
For example, if the image slider gives an introduction about your company on the homepage, the correct place would be the header of the body sectioning root:
<body>
<header><!-- image slider here --></header>
</body>
If the slider is the main content of the page (e.g., a page titled "Impressions" and the slider contains all the images), it should be in main > article:
<body>
<header></header>
<main>
<article><!-- image slider here --></article>
</main>
</body>
If the slider is just giving some eye candy, or suggestions for other pages the user might be interested in, aside would be appropriate:
<body>
<header></header>
<main>
<article></article>
</main>
<aside><!-- image slider here --></aside>
</body>
And so on.
A good way for deciding if a sectioning element (section, article, nav, aside) should be used, is answering the question: Should it be part of the document’s outline?
If yes, a sectioning element should be used, and unless the content matches the definitions for article/nav/aside, the "fallback" element section is the correct choice.
You will not loose any SEO points for not including headings for each section. You will get an HTML validation error though, but that might be fine in some cases. I would probably just use div since it's not less descriptive than section in this case. I would then add each image in the slider as a list item (li), because it's a list of images. I would also look up more info about HTML5 figure element. Maybe that's something one could use? html5doctor.com/the-figure-figcaption-elements/
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.