#30DaysofHTML Day 18: < main > and < aside >

Get to the point. Or not.

Continuing with the theme of elements you probably already know, but you may not be using correctly, let's look at <main> and <aside>. They are studies in opposites, which makes them fun to consider together.

What's your <main> focus?

If it's the main focus of the page, the part of the page that holds the meaning for your visit or the app that visitors want to use, that's the part that should be in a <main> element.

<main> is different than <article> or <section> in that there can only be one <main> element per page.

Inside of <main>, you may have article(s), section(s), application(s), or anything else that is unique to this particular page. Think of <main> for the page focus, rather than as identifying a specific type of content. It's not structural, in other words. It's not for repeated elements of any kind (think logos, nav bars, advertising, related articles, etc.).

If your website were a textbook, your <main> focus would be the black text on the white background, not the black boxes (those are <aside> most likely). This might also be an <article> structurally speaking, but its focus is the <main> point of the site.

As an <aside>...

In theater, an aside is when an actor talks to the audience about what's going on. In The Office, it was often Jim talking to the camera, helping us understand what's going on.

In a magazine or other printed content, an aside is often styled as a pull quote or other content separated from the rest of the page and maybe highlighted in some way. The information may be related to the main text, but it's not its focus.

In your HTML, an <aside> is anything that's supporting material for your web page.

In this textbook, the <aside> would be the black boxes. It's related material, helping us understand the focus of the rest of the page, whether that's marked up with a <main>, <article>, or <section>.

⚠️ Sidebars and pull quotes are most commonly mentioned in conjunction with <aside>. However, just because your design contains a right (or left) column for your page doesn't necessarily mean it's an <aside>. That would be letting design drive your element choices, and we know that design is all about CSS, not HTML.

"Skip links" and accessibility

One of the commonly mentioned items about accessibility and main content is including a so-called "skip link" in your web design. This is a simple internal page link, visible to screen readers but not necessarily exposed in the site design, that allows a "skip" from the top of the page to the main content when clicked.

<a href="#main">Skip to main content</a> 
... 
<main id="main"> 

CSS-Tricks offers a great article with more details about this type of link and how to style it for compatibility with screen readers while maintaining invisibility on your site.

More than one <main>?

⚠️ You may have more than one <main> element in use per page, provided only one <main> is visible at a time. WHATWG has an example of this. Otherwise, one <main> per page.

Things to avoid with <aside>

⛔️ Do not use the <aside> element to identify text in parentheses, as this kind of text is considered part of the main flow.

<main> and <aside> demo

🖥 View the <main> and <aside> demo on CodePen.

View the CodePen demo

Challenge: Using <main> and <aside> (and other elements!)

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

Take the CodePen Challenge

More information and examples

📚 MDN: <main> and <aside>

📚 WHATWG: <main> and <aside>

📚 CSS-Tricks: How to Create a “Skip to Content” Link

#30DaysofHTML Day 18: <main> and <aside> challenge

You try it: How would you mark up this web page using <main> and <aside>, in addition to other elements?

Fork the CodePen problem, make your changes, and share your answer in the thread below! Comment your work to tell us why you made your markup choices.

Take the CodePen Challenge

How to Fork a CodePen

  1. In the bottom right corner of the CodePen example, there should be a button that says Fork. Click it. This will make a copy of the code that you can save to your CodePen account.

  2. While anyone can edit or fork a CodePen, you can’t save and share your work without creating a CodePen account. It’s easy and free. The button to do this is in the upper right corner of the CodePen window.

View 4 comments →

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

Related or syndicated?

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.

<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

More information and examples

📚 MDN: <article> and <section>

📚 WHATWG: <article> and <section>

📚 MDN: Using HTML sections and outlines

📚 Smashing Magazine: Why You Should Choose HTML5 article Over section

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

You try it: How would you mark up this web page using <section> and <article>?

Fork the CodePen problem, make your changes, and share your answer in the thread below! Comment your work to tell us why you made your markup choices.

Take the CodePen Challenge

How to Fork a CodePen

  1. In the bottom right corner of the CodePen example, there should be a button that says Fork. Click it. This will make a copy of the code that you can save to your CodePen account.

  2. While anyone can edit or fork a CodePen, you can’t save and share your work without creating a CodePen account. It’s easy and free. The button to do this is in the upper right corner of the CodePen window.

View 8 comments →

#30DaysofHTML Day 16: < noscript >

Imagine there's no JavaScript...

Only a handful of people deliberately disable JavaScript in their web browser these days. However, events that result in no access to JavaScript still transpire: your multi-megabyte JavaScript file fails to download, CDNs go offline, someone’s corporate network blocks something, or network errors happen.

What happens if there is no JavaScript? What does your site visitor see? Sometimes, it's nothing at all... the White Screen of Death.

Now, clearly you should be a good enough programmer to have mechanisms in place to recover gracefully if something fails along the way. But as a final remedy, <noscript> is there to provide content when nothing else works.

Smashing Magazine does a great job of explaining these scenarios and examining major sites and their fallbacks for when there is no JavaScript.

Understanding <noscript>

It's pretty simple. <noscript> shows up on the page when JavaScript fails for whatever reason.

If JavaScript writes 100% of your page, then <noscript>'s content might be the only thing you'd see in JavaScript's absence.

If JavaScript writes less than 100% of your page, you'd see anything that doesn't rely on JavaScript to display, but the JavaScript effects would fail and any content placed in <noscript> would display instead.

<noscript>
    <h2>Something bad happened</h2>
    <p>You, dear user, did nothing wrong. But something failed, and the page did not load correctly.</p>
     <!-- maybe tell the user what to do next? --> </noscript> 

When JavaScript is active, that text will not display.

Use <noscript> in the <head> or <body>

<noscript> may be used in the <head> of the document, not just the <body>. If you need different <link>, <style>, or <meta> tags if JavaScript doesn't load, you may include those there.

<head>
   <noscript>
     <!-- this CSS loads when all of the CSS I stuffed in my JavaScript doesn't -->
     <link href="realcss.css" rel="stylesheet">
   </noscript>
</head> 

Twitter is using <noscript>

As Smashing Magazine pointed out, Twitter uses <noscript> on their site. However, their implementation has changed since 2018, when the article was written. Visit Twitter in the browser of your choice and view source for a tweet or your feed. Lines 48-125 show a <noscript> implementation that include both embedded CSS and a little HTML. It’s a mini-web page inside of a web page!

Previously, according to the Smashing Magazine article, Twitter used a meta-refresh element inside of <noscript>:

<noscript>
   <meta http-equiv="refresh" content="0; URL=https://mobile.twitter.com/i/nojs_router?path=%2F">
</noscript>

That implementation will redirect the user from the current page to whatever information you want the user to have when JavaScript isn’t available.

Accessibility considerations

<noscript> is indeed accessible, assuming its contents are also accessible. However, as WebAIM points out:

⚠️ <noscript> is an alternative to scripting, NOT an alternative for inaccessibility.

No <noscript> demo

It’s pretty straightforward, and there’s no real way to simulate turning off JavaScript in the CodePen environment that we’re aware of.

Challenge 1: Using <noscript>

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

Take the CodePen Challenge 1

Challenge 2: The Science & Geekery Challenge!

🔬🥼🧪 We’ve reached the end of another unit! Try the big challenge using all of our Science and Geekery elements: <pre>,<code>, <kbd>, <samp>, <var>, <time>, and <noscript>! When you’ve completed it, post your answer in our discussion in Substack.

Take the CodePen Challenge 2

More information and examples

📚 MDN: <noscript>

📚 WHATWG: <noscript>

📚 Smashing Magazine: I Used The Web For A Day With JavaScript Turned Off

Loading more posts…