Using article or main for solo components on page
Hi, this is a bit of a perfectionist question, so apologies!
When designing a single component or widget on the page (eg for a coding challenge) that matches the description for using an
article element, but it is the only content on the page, should you still use the article element, or only use the main element?
The HTML specs have an example of only using article for single components, but I received conflicting advice that I should actually only use the main element.
Totally me just wanting to be perfect with my semantic elements 😅7 Replies
Both
Or what not*
I actually originally used both, thinking
<main> was mandatory, but was told it's redundant to use more than one sectioning element for single components on a page.
I can't find anything in the specs that says to use both - what do you think the benefits are of using both a main and article element in my given context?They have different roles Main is a landmark where article is not (typically..)
Each page should have one main landmark. The main landmark should be a top-level landmark.<article> and <section> with heading levels inside a <main> is typically what you want. How you label and where the heading 1 goes is kinda meh debated and honestly I'm finding works different with different readers. So you might have something like The spec say you should then
aria-labelledby="#headingId" to label the landmark... Thing is not all readers will convert the arctilce like it does a section 🤷♂️Thanks - I must have missed that paragraph on the specs, I only saw that you shouldn't have more than one main element.
I can see how <main> is an important landmark for larger web pages and for assisted technologies to skip navigation, so I'll go back to using both tags, even when only designing a widget for a challenge. I want people looking at the challenge code to see I care about using correct semantics.
Cheers!
I haven't even begun to learn aria labels, this is on my list of topics!
Best way is to test it. It seems lots of people just follow "best practices" and never test xD
Article tags are used for components that are self-explanatory; they dont need any other content from the trst of thr page to make sense. I would pit the article into a main as well. Think of articles like how you see little ad blocks on pages. It could be a recipe site but someone's bought ad space to promote their t-shirts. That ad would be in an article tag.
Thank you. I used both tags at first after reading the specs - I think I just too easily had my own discernment shaken by conflicting advice elsewhere and started doubting their usage. Cheers.