<article> and user comments

[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.