DEV Community: → Ale Narvaja

When to use `main`, `section`, `article`, `header`, `footer`, and `aside` in HTML5

→ Ale Narvaja — Mon, 07 Apr 2025 22:21:28 +0000

HTML5 introduced semantic elements that help structure web content more meaningfully — not only for developers but also for browsers and assistive technologies like screen readers.

If you're unsure when to use <main>, <section>, <article>, <header>, <footer>, or <aside>, this post is for you. Let's break down what they are, when to use them, and what not to do.

🧱 `<main>`

Defines the main content of the page — the part that makes it unique.

✅ Use it for:

Blog posts, product listings, dashboards
Anything that's central to your page

❌ Don't use it for:

Headers, footers, nav menus, sidebars

⚠️ There should be only one <main> element per page.

📦 `<section>`

Groups content that shares a common theme, ideally with a heading (<h1>–<h6>).

✅ Use it for:

A "Latest Posts" section
A FAQ section
A page broken into logical parts

🗣️ Tip: Use aria-label or include a heading for better accessibility.

📰 `<article>`

A self-contained, reusable block of content — it should make sense on its own.

✅ Use it for:

A blog post or news article
A user comment or review

❌ Don't use it to wrap unrelated things just because they’re grouped visually.

🎯 `<header>`

Introduces a section or the entire page. Can include:

Title
Logo
Navigation

✅ Use it:

Once at the top of the page
Inside <section> or <article> as an intro

🔚 `<footer>`

Wraps up a section or page. Can include:

Author info
Related links
Copyright

✅ Use it:

At the bottom of the page
Inside <article> to show metadata like date or tags

📎 `<aside>`

Represents content that is related but not essential to the main content.

✅ Use it for:

Sidebars
Related posts
Pull quotes, tips, or ads

🧠 Conclusion

Semantic HTML makes your code more accessible, maintainable, and understandable — not just for you, but for everyone who interacts with your site.

Thanks for taking the time to read, any feedback will be welcome :)

See you around.

Stripes: refactor with CSS variables

→ Ale Narvaja — Thu, 13 Jun 2024 10:26:59 +0000

Stripes are those little bands that we can see in many places on the street, often on signs but also in everyday places.

Creating this with CSS is not complicated, we are going to make use of gradients, but what I find really useful is the simplification and reuse of these with native CSS variables, also known as CSS Custom Properties.

Let's start

To create a box with stripes inside, it's as simple as generating a div with width and height (we give it width and height since it doesn't have any content, if it did it wouldn't be necessary):

<div class="stripes"></div>

.stripes {
  width: 200px;
  height: 100px;
  border: 2px solid orange;
}

Then, to create the stripes, it's as simple as generating a linear-gradient that repeats:

.stripes {
  width: 200px;
  height: 100px;
  border: 2px solid orange;

  background: repeating-linear-gradient(
    45deg, /* inclination */
    black 0 15px, /* main color - breakpoint */
    #FFEB3B 15px 30px /* secondary color - breakpoint */
  )
}

I won't go into too much detail about what values can be assigned to a repeating-linear-gradient, but in this case we first indicate the inclination we want our gradient to have, then we tell it the main color (or initial color in any case) and the breakpoints we want.

In our example:

Start with the black color at 0px and continue with the same color up to 15px
From those 15px and up to 30px we assign the yellow color
...this repeats all the time completing the stripes.

And that's it to set up our stripes. But what if we want to have thinner stripes for example? or do we want them to have different colors?. Applying the BEM methodology, we could have something like this:

.stripes {
  width: 200px;
  height: 100px;
  border: 2px solid orange;

  background: repeating-linear-gradient(
    45deg,
    black 0 15px,
    #FFEB3B 15px 30px
  )
}

.stripes--thin {
  background: repeating-linear-gradient(
    45deg,
    black 0 5px,
    #FFEB3B 5px 10px
  )
}

.stripes--red-white {
  background: repeating-linear-gradient(
    45deg,
    red 0 5px,
    white 5px 10px,
  )
}

But doing this implies repeating the same properties in each modifier but with different values. This is where CSS variables come into play.

Refactoring with CSS variables

The first thing we will do is define the variables we will use and that will then be modified according to each case.

.stripes {
  --angle: 45deg; /* inclination variable */
  --color-primary: black; /* main color */
  --color-secondary: #ffeb3b; /* secondary color */
  --breakpoint-primary: 0 15px; /* main breakpoint */
  --breakpoint-secondary: 15px 30px; /* secondary breakpoint */
}

With this we already have our variables ready to use. In the definition of the variables, we are setting the default values. The next thing we will do is use those variables in our first stripe.

.stripes {
  background: repeating-linear-gradient(
    var(--angle), /* 45deg */
    var(--color-primary) var(--breakpoint-primary), /* black 0 15px */
    var(--color-secondary) var(--breakpoint
  ) /* #ffeb3b 15px 30px */
}

Obtaining the same result as before:

And from here on, everything is much simpler.
Now we will create our modifiers, but the only thing we will have to write will be the new values of these variables.

So, in the case of our stripe with thin stripes:

.stripes--thin {
  --breakpoint-primary: 0 5px;
  --breakpoint--secondary: 5px 10px;
}

And in our red and white stripe:

.stripes--red-white {
  --color-primary: red;
  --color-secondary: white;
}

And this is it!

Our final code

<div class="stripes"></div>
<div class="stripes stripes--thin"></div>
<div class="stripes stripes--red-white"></div>

.stripes {
  --angle: 45deg; /* inclination variable */
  --color-primary: black; /* main color */
  --color-secondary: #ffeb3b; /* secondary color */
  --breakpoint-primary: 0 15px; /* main breakpoint */
  --breakpoint-secondary: 15px 30px; /* secondary breakpoint */

  width: 200px;
  height: 100px;
  border: 2px solid orange;

  background: repeating-linear-gradient(
    var(--angle), // 45deg
    var(--color-primary) var(--breakpoint-primary), // black 0 15px
    var(--color-secondary) var(--breakpoint-secondary), // #ffeb3b 15px 30px
  );
}

.stripes--thin {
  --breakpoint-primary: 0 5px;
  --breakpoint-secondary: 5px 10px;
}

.stripes--red-white {
  --color-primary: red;
  --color-secondary: white;
}

Here is the complete exercise on Codepen:

Conclusion

In the end, the good thing about CSS variables is that we only define the variables we are going to reuse and then we just have to call them and modify them, without having to rewrite over and over again all the properties that use them.

Thanks for taking the time to read, any feedback will be welcome :)

See you around.

Solving a layout issue with `grid-auto-flow: column`

→ Ale Narvaja — Thu, 13 Jun 2024 08:14:51 +0000

In a recent project, I encountered a layout issue that was elegantly solved by the CSS Grid property grid-auto-flow: column. Let's dive into the problem and the solution.

The Problem

I was working on a responsive design where I needed to display a set of data items. On smaller screens, these items should stack vertically, but on larger screens, they should arrange themselves into a grid. The catch was, I wanted the items to fill up the columns first before moving on to the next row.

The default behavior of CSS Grid is to fill up the rows first (row-based placement), which wasn't what I wanted. Here's a simplified version of my initial CSS:

<section class="data">
  <div class="data__item">Item 1</div>
  <div class="data__item">Item 2</div>
  <div class="data__item">Item 3</div>
  <div class="data__item">Item 4</div>
  <div class="data__item">Item 5</div>
  <div class="data__item">Item 6</div>
</section>

.data {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(3, auto);
}

This render this layout:

The Solution

Enter grid-auto-flow: column. This property alters the default behavior of CSS Grid, making it fill up the columns before the rows (column-based placement). Here's how I modified my CSS:

.data {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(3, auto);

  /* Add this property 👇🏽 */
  grid-auto-flow: column;
}

With grid-auto-flow: column, the grid items now fill up vertically in each column before moving on to the next column. This was exactly the behavior I needed for my layout.

Conclusion

CSS Grid's grid-auto-flow: column is a powerful tool for controlling the placement of grid items. It's a great example of how a single CSS property can drastically simplify a complex layout problem. Happy coding!

More info

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow

Codepen

TIL - Bash: filter a specific text inside files with command find

→ Ale Narvaja — Fri, 11 Mar 2022 16:28:06 +0000

Today, I learned how to filter a specific string inside files with command find.

find ./ -type f | xargs grep -Hn "abc"

Example notes:
abc: string that I want to find
./: path where to search

TIL - Git: fetch changes from a remote branch to a different local branch

→ Ale Narvaja — Fri, 11 Mar 2022 16:20:34 +0000

Today I learned that if I want to fetch changes from a remote branch to a different local branch, all I have to do is:

git checkout <local-branch>
git pull origin <remote-branch>

For example, if I would like to fetch changes from master to a test branch:

git checkout test // we move to test branch
git pull origin master // we pull data from master to test

DEV Community: → Ale Narvaja

When to use `main`, `section`, `article`, `header`, `footer`, and `aside` in HTML5

🧱 <main>

📦 <section>

📰 <article>

🎯 <header>

🔚 <footer>

📎 <aside>

🧠 Conclusion

Stripes: refactor with CSS variables

Let's start

Refactoring with CSS variables

Our final code

Conclusion

Solving a layout issue with `grid-auto-flow: column`

The Problem

The Solution

Conclusion

More info

Codepen

TIL - Bash: filter a specific text inside files with command find

TIL - Git: fetch changes from a remote branch to a different local branch

🧱 `<main>`

📦 `<section>`

📰 `<article>`

🎯 `<header>`

🔚 `<footer>`

📎 `<aside>`