Should a standalone content be wrapped by `<article>` while it's its page?

For example, I have a blog article page, should the page be like
<main>
<article>
<!-- content -->
</article>
</main>
<main>
<article>
<!-- content -->
</article>
</main>
? Because the user-agent has smaller font size for <h1> inside <article> by default, I guess <article> means for the cases like articles on index page and comments, which are standalone contents not on their own pages. What is the best practice? Do I need to wrap with <article> for semantics?
6 Replies
13eck
13eck4mo ago
The <article> HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
MDN If it's a blog article semantically speaking it should be wrapped, yes. If the header size is an issue for you, then change it lol. Don't base the tags you use on what they look like but what they do. A super quick fix:
h1 { font-size: 2rem; }
h1 { font-size: 2rem; }
Boom, now your h1 doesn't care where it is, it'll always be 2rem
露米諾斯 Lumynous
I just thought there is a reason the spec recommend that size (they have some assumption)
Jochem
Jochem4mo ago
there is, but only because they set reasonable defaults
露米諾斯 Lumynous
oh i just found the spec
When the main content of the page (i.e. excluding footers, headers, navigation blocks, and sidebars) is all one single self-contained composition, that content may be marked with an article, but it is technically redundant in that case (since it's self-evident that the page is a single composition, as it is a single document).
so both meet the standard
Jochem
Jochem4mo ago
I'd personally err on including the article tag, simply because it means that if you add anything later, it's still semantically correct

Did you find this page helpful?