Use Semantic Markup First, Probably

To set the context, let us say we want to make a card component. It will have a QR code and a text below that says, "Scan the QR code to visit my website." This card will be the entire website. We are making a website with a card component that consists of a QR code and text.

What element will you use for the card component? Will you use the <div> element?

A guy tells a beginner developer who uses the <div> element:

Make using the <div> element your last resort, cuz it doesn't carry any semantic meaning.

Swap <div class="card"> for the <article>.

I do not provide a link because this guy is still learning as a beginner. The lack of knowledge is clearly shown in his feedback. I do not want insecure people to make fun of him.

First of all, does the <article> element have any semantic meaning? No, it does not. It is useless like the junk people. Their life has no meaning. The <article> has no useful meaning.

These have no useful semantics unless given an ARIA label (which is not typically recommended).

—WebAIM

I agree with that statement. The HTML article and section elements do not have semantic meaning. In fact, I heard that they make unnecessary noise for screen reader users. They are meaningless. For me, they are also useless. I prefer using the <div> markup instead. At least, too many <div> elements will not make assistive technologies go crazy.

If we want to highlight a part of the content, we can use either the <section> or <article> with the aria-label or aria-labelledby attribute. Again, you must use one of those Accessible Rich Internet Applications (ARIA) attributes. But before we highlight a section, we need to ask ourselves: why do we need to highlight it?

A good example of labelling content is to label two navigation landmarks. The navigation landmark (<nav>) in the header and the one in the footer need to be labelled because they need to be distinguished. Without labels, both will appear as repeated navigation landmarks for assistive technology users. For a great example, you can look at The A11Y Project website. Open your dev tool and inspect the navigation landmarks.

But do we need to highlight the <section> and <article>? Often, the answer is that we do not need to highlight it. Thus, use the <div> element instead.

In terms of accessibility, writing an introductory heading for your <article> is a lot more important than using the <article> element itself. Since headings already implicitly mark sections of a document, so-called sectioning elements are often redundant or add very little.

—Heydon Pickering

Heydon tells us that we are better off using the heading elements instead of the <article> element. If you rely only on using the <article> or even <section> to structure your content, you make a big mistake. Those elements are useless.

Going back to our mini project, I will write the following HTML markup:

<main>
  <div class="card">
    <img
      src="/images/qr-code.png"
      alt="QR code for hannozhuan.netlify.app"
    />
    <h1>Scan the QR code to visit my website</h1>
  </div>
</main>

The project is probably useless like the <section> and <article> elements. But we get the point: the <article> and <section> elements are useless. The <div> is doing a great job. In fact, I argue that using the <div> element is the best choice because it works well.

Use the <div> element. Then, if you do not use the aria-label or aria-labelledby for the <section> and <article> elements, replace them with the <div> elements.