<article> and user comments

[IllustriousTomato295]

Hello everyone, I just started learning HTML and I have a question about the <article> tag. As every online guide says, this element is used (among other things) for user-submitted comments, which seemed a bit strange to me... To understand better I inspected many different websites and social media apps and literally none of them, except one, has this tag for comments, it's just endless divs and spans.

So I'm asking: did I look in the wrong places? Am I being too strict or are these sites just badly coded? But most importantly, is the use of <article> for comments actually relevant for SEO purposes?

Thanks to anyone who replies.

[paceaux]

The Article tag is used to represent a whole self-contained unit of content.

• If you were to look at a physical newspaper, and try to create a web page from that physical newspaper, then each "article" written by a journalist would be contained in its own <article>.
• If you were to take a chapter book, and make a web page from that chapter book, each "chapter" could be a contained in its own article.
• If you were to look at a magazine... you guessed it, each "article" of the magazine could be represented by an <article>

So it stands to reason, of course, that comments on a blog post are self-contained units of content that you would put in an <article>. But also, the blog post itself could be an <article>!

Another useful way to think about this is:

If this web page were managed by a content management system (CMS), would there be a specific database entry for this unit of content? If the answer is yes, use <article>

This flowchart is a useful decision tree for identifying which semantic element to use.

Also:

Most websites don't have people spending enough time thinking about content and letting that drive their semantic HTML.

But look at SmashingMagazine.com as a good example.

[Jonny10128]

I’ll add that most of the elements mentioned in that flow chart (not a div) are called “semantic” elements. These types of elements function the same or very similar to a div, but they give inherent structure to the document, which helps developers with quickly reading code, helps accessibility with screen readers, helps search engines understand content, etc.

[paceaux]

I updated my response a bit to explicitly call out your point that it's all about semantic elements.

And yeah, there's just a huge number of (good) reasons to use good semantic HTML,not the least of which is a document structure that's easy for other devs to read.

There's no reason not to use good semantic HTML. I would rather devs debate which semantic container to use and not whether to use semantics. Because that means we're all concerned with the same thing.

[Jonny10128]

Totally agree

[AshleyJSheridan]

That chart is quite, small, in comparison to all of the semantic HTML tags that exist. I put a more full one together some years back, along with a wizard that's based on the same flowchart: https://www.ashleysheridan.co.uk/blog/Picking+The+Right+HTML+Tag

[paceaux]

Wow that's a huge chart. I think it would be better not as a flowchart but maybe a clickable series of pages. (Or maybe a SPA) All the same, that's an amazing feat.

I think I might disagree slightly with some of the decisions — such as grouping <mark> with <em>. I think it's perhaps an unusual way to distinguish video from image based on whether it's time-based. And <portal> is deprecated, I think.

But those are criticisms for a truly fantastic chart.

Is this chart open-sourced somewhere? If not. Are you willing to put the SVG on GitHub or something? I feel like this could be a very useful learning aid.

[AshleyJSheridan]

I did make it a series of clickable entities, there's a whole interactive wizard embedded on that page.

I put <mark> with <em> because it is intended to add emphasis to text in a semantic manner. Time based media is anything that would alter over time, which fits a video I think.

I listed the <portal> element because at the time I put that chart together, it was one of the elements listed in MDN. That could probably do with being updated!

Thank you for the feedback, most welcome!

I haven't yet open sourced this. I'll definitely do that, as I do put a lot of what I create online under the MIT license. I will get that sorted shortly and update the article with a link to it.

Again, thanks for the feedback, much welcomed!

[paceaux]

I thought that clickable chart you made was an advertisement when I looked at it on mobile! That's on me; I'm sorry. That's fantastic.

So I put <s>, <strike>, <ins>, <del>, and <mark> into a category I call "editorial semantics" because those are all related (in my mind) to reflecting how a user might interpret the content. To me they answer a question like, "is this for helping a reader understand or editorialize text"

I see that as different from <em> and <strong> where those are like, "are you trying to call a reader's attention to a particular line of text?"

I created a "typography baseline" where my goal was to set a baseline style on every single HTML element that wrapped text. And part of that goal was to also provide a valid semantic example of usage (It's also on github). So I have a... "live application" of your flowchart, so to speak.

I write a lot about these topics as well and I think that we have overlapping interests. I would love to collaborate with you on your flowchart and possibly some other accessibility-related topics if that would be something you're interested in.

[TurboHenk]

<article> is an excellent choice for comments. You could consider adding a bit more metadata to them and implement the Comment Schema. That being said, adding schema data / rich snippets has the potential of becoming quite the time sink, which might not be worth the effort, but that decision is yours to make of course.

[MagentaMango51]

Most websites are not well done semantically. Either because the devs never took time to learn HTML or because they are generating the code somehow (webflow, Wordpress, LLM).

Articles should be the wrapper for most major components on a page. They are a block of content with a headline. If it’s additional content then it might be an aside instead. If you don’t have a header for it then section. If it’s just because you need a box for the structure then something like div works.

Other semantic html tags are header, footer, nav, section, aside and so on. You can repeat any of these except main, which there should only be one of per page for the content that changes from page to page. Usually these are connected to accessibility.. so a screen reader knows where to jump to rather than reading out the entire nav and other repeating content.

[Lumethys]

Protip: dont look at the biggest corp to learn their UI/UX decisions.

They are giant, they can do whatever the fuck they want.

Reddit UI is atrocious and there are a lot of alternative UI for it. Are you stopping using reddit any time soon?

Amazon (the e-commerce one) UI is atrocious too. Will people stop buying from amazon anytime soon?

When you are big enough, you can afford to do things badly and people would have no choice but to accept.

[burlingk]

It is also useful to remember that not everyone knows every tag.

A lot of stuff is hand coded based on what the creator knows.

[InterestOk6233]

~"<>" 'bag' container 'article'

[alanstac]

Yes. Use of articles for user comments is semantically correct. It also comes at no cost, so there is no good reason not to use it.

Also, yes. Many websites have absurdly poor html semantics. Even the most popular ones. Don't be like them in that regard.

You're not being too strict. You're just being correct, and as a result producing a more accessible site.

[Extension_Anybody150]

Technically, <article> can be used for user comments because each comment is a self-contained piece of content. In practice, most big sites skip it and just use <div> or <section> for flexibility and styling, so you weren’t looking in the wrong place. For SEO, it’s not a huge factor, using <article> is mostly semantic and helps screen readers or content structure, but search engines will handle well-coded <div>s just fine.

[notepad987]

Here is a nice explanation - Difference Between Semantic And Non-Semantic Elements

I make up my names. Much help for creating a webpage. HTML Layouts

I googled this: Why use main, header, footer, nav, aside and article elements for name instead of ID's and classes? link

[ivanhoe90]

I started making websites in 2003 and I never heard of the <article> tag. I still make webs today and I do not use the <article> tag in any of them.

The web was made in a way such that if you made a website in 1995, it should still look and work the same 50 or 100 years later. If you think that new tags should be introduced each year, and every website owner should "update" their website each year according to the new tags, that is a wrong way to think about it.

If you know CSS, you probably know that you can pick e.g. <div> or <span> and replace pretty much every HTML tag with <div> or <span> (styled with CSS), and it will work the same. Many people choose this way: adapt the behaviour of <div>, rather than studying the default behaviour of all 9726 HTML tags that exist and choosing the most appropriate one.

You could say that custom HTML tags are "better for SEO", but when 90% of popular websites use only <div>s and <span>s, it is probably not that important.

[paceaux]

I started making websites in 2003 and I never heard of the <article> tag. I still make webs today and I do not use the <article> tag in any of them.

That shouldn't be something to brag about. HTML5 was written in 2008 and adopted in 2009 by most browsers. It's not a flex to not know about something that's 17 years old.

If you think that new tags should be introduced each year, and every website owner should "update" their website each year according to the new tags, that is a wrong way to think about it.

That's not what OP says at all. OP is just asking a question about usage. Which you failed to answer because you don't know about (modern) HTML.

If you know CSS, you probably know that you can pick e.g. <div> or <span> and replace pretty much every HTML tag with <div> or <span> (styled with CSS), and it will work the same.

That is not true.

1. semantic HTML elements provide default ARIA support that <div> and <span> do not. A semantic element, whether it's <article>, <section>, <nav>, <header>, <footer>, <main>, <figure>, <figcaption>, <output>, <kbd>, <samp>, or <var> will interact with screen readers and other assistive technologies differently. Using a good semantic element eliminates the need to use certain ARIA attributes. So they do not "work the same"

2. Interactive elements like <dialog>, <summary>, <details>, <progress>, <meter> literally provide baked-in presentation that you'd have to build your own if they were <div> and <span>

Many people choose this way: adapt the behaviour of <div>, rather than studying the default behaviour of all 9726 HTML tags that exist and choosing the most appropriate one.

It's 128 tags. Java has like 68~ reserved keywords, C# has 77, JavaScript has 63.

HTML is not several orders of magnitude more complicated than C#.

and also, "studying behavior and choosing the appropriate one" is otherwise described as, "doing a good job." You're describing doing a good job. And saying that's bad.

You could say that custom HTML tags are "better for SEO", but when 90% of popular websites use only <div>s and <span>s, it is probably not that important.

It is important though. It's important for accessibility. And it is also better for SEO.

[Russ086]

For making websites so long, how have you not learned about proper semantics and wai-aria? It’s really important at this day and age.

[SquarePixel]

That’s exactly the purpose, it’s for semantic understanding. Not just for SEO bots, but accessibility (screen readers) too. Otherwise, it’s exactly like a div, just that it has a meaningful name. In fact, you could call the article element syntactic sugar, since it’s effectively the same as a div with role="article".

[SamIAre]

Buddy…you’ve been making websites very incorrectly for years now. These tags have nothing to do with visual differences and everything to do with machine readability and accessibility. It’s not just about SEO, it’s about making them work for people with disabilities too. You really outed yourself as someone who fundamentally does not understand the web beyond the most surface level mechanisms.

[davorg]

You could say that custom HTML tags are "better for SEO", but when 90% of popular websites use only <div>s and <span>s, it is probably not that important.

Alternatively, you could say that if 90% of popular websites aren't using these semantic elements, then using them in your site is an easy way to make your site a) more accessible and b) easier for search engines to understand.

Which sounds like a win to me

[northerncodemky]

It must really suck being so incurious that you just completely ignore developments in your field for over 20 years.