#30DaysofHTML Day 17: < section > and < article >

Related or syndicated?

and

Apr 17, 2021

We're starting our new unit on parts of the web page. You have probably heard of these elements before. You may even have a sense of what they do. But unfortunately, they seem to be missing on many web pages. 👀

Web page parts are more than <head> and <body>, no? We remember the bad old days of <div id="header"> and <div class="section"> and soooo many <div>s because we had no other options. Thank goodness we have semantic tags that help us identify the parts of our web pages.

Rather than spending a bunch of time showing you how to code with these elements -- which you already know -- let's focus instead on their meaning and proper use. It's all driven by the content.

#30DaysofHTML Parts is Parts of the web page unit.

<div> vs <section> vs <article>

All three of these elements contribute no styling to the page in their default format. So why does it matter so much which one you choose? Because element choice communicates meaning and intention behind the scenes to screen readers, search engines, and many other robots and machines coming your way in the future.

<article>

<article> is the most specific of these. An <article> is a piece of content that could stand on its own without any other supporting materials and still be understandable. As MDN and WHATWG say, candidates 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."

While there are no specific requirements for types of content in an article, it will generally contain a headline and supporting text. 🖥 See the CodePen demo for an example.

<section>

A <section> contains related content that may or may not stand on its own. It may be a section of blog articles, a section of comments, a section of images. In today's common web design patterns, it might be a jumbotron or hero banner, the three boxes describing your product, or the row with the testimonials in it.

Like articles, sections usually have a heading inside of them. 🖥 See the CodePen demo for an example.

In a recent Smashing Magazine article, Bruce Lawson recommends combining <section> with an appropriate ARIA label for better compatibility with screen readers.

<div>

A <div> is the most generic item of the bunch. It's useful for holding a CSS class or JavaScript data- attributes without adding anything to the page's meaning.

✅ <div> should, ideally, be your last choice for marking up parts of your web page, rather than your first.

Where it gets complicated

🧩 All of these elements nest inside of each other. You already knew that about <div>. It’s also true with <article> in <article>, <section> in <section>, <section> in <article>, and <article> in <section>. No one wants to see that here, so look at 🖥 the CodePen demo for an example.

Determining the right element to use

There are other parts of the page we'll cover in the coming days, including <main>, <aside>, <nav>, <header>, <footer>, and the proper use of <h1>-<h6> in setting up your pages. However, we find that our students most commonly confuse the use of <article>, <section>, and <div>.

✅ We think it's fair to say that all <article> elements might be <section> elements, and all <section> elements might be <div> elements. However, the reverse is not true. A Venn diagram might be appropriate.

Related or syndicated?

You could also ask yourself: Related or syndicated?

✅ If the items are related, and they should be grouped as such, that's a <section>.

✅ If the item would stand alone in a syndicated format, it's an <article>.

✅ If it’s neither, it might be a <div>, or it might be one of the additional elements we’ll cover in the coming days.

<article> and <section> demo

🖥 View the <article> and <section> demo on CodePen.

View the CodePen demo

Challenge: Using <article> and <section>

👩🏽‍💻 Try today’s CodePen Challenge about the use of <article> and <section>. When you’ve completed it, post your answer in our discussion in Substack.

Take the CodePen Challenge