DEV Community: Niels den Dekker

HTML5 Best Practices: Header Element

Niels den Dekker — Mon, 18 May 2020 07:07:33 +0000

Let's take a dive into one of the most commonly used and misunderstood elements introduced in HTML5 - the <header> element. Although it appears a new simple element to use, there's much more behind the scenes that we need to uncover, before we start using
the <header> element.

Before the header element

Here's what we used to do to create a header which might contain things such as logos and titles:

<div class="header" role="banner">
  <h1>Ultimate Courses</h1>
</div>

HTML5 has introduced a new way to define a header, that doesn't involve a generic looking <div> that isn't semantic or accessible by default - you can see to make things accessible we would have to use a role="banner" attribute to provide further description.

🕵️‍♂️ Checkout the HTML5 Header element spec from WHATWG - who are a community that maintain and evolve the HTML specification!

With the rise of accessible technologies and the need for correctly implementing standards - we turn to the header element as our saviour, where we also find out that we no longer need to use the role="banner" attribute (which we'll come on to shortly).

What is the Header Element?

The <header> element is a new semantic element that we can use to create better meaning behind our code.

By using <header> you no longer need to use the role="banner" as it's inferred under the hood.

🕵️‍♂️ Find out more about the ARIA banner role.

Header was created to group together the introduction of a website or introduce specific content, for instance a company name or an article title.

Lets make the move from a div to a header element:

<header>
  <h1>Ultimate Courses</h1>
</header>

Easy enough right? We've now transformed our div into a brand new header!

Let's investigate further and uncover some best practices.

Using the Header Element

Every element created in HTML comes with a set of placement rules, which means that for validation and accessibility reasons the <header> element can't be used anywhere we want - we must be careful not to create invalid code by using it incorrectly.

For instance, we cannot put a <header> element inside an <address>, <footer> or another <header> element.

Here's how a typical real-world example of a header would look like:

<div class="hero">
  <header class="hero-header">
    <p class="hero-logo">Ultimate Courses</p>
    <nav class="hero-nav">
      <a href="/">Home</a>
    </nav>
  </header>
  <div>
    <article class="article">...</article>
  </div>
</div>

This is a perfectly valid example and it reflects the purpose of the <header> element. As you can see there's not really a huge change from using a <div> as we can still use our <p>, <nav> and <a> elements inside.

Other use-cases for header

In the above example we looked at a standalone <header> element, you can also see an <article> element which is another great use case for introducing a <header>:

<article class="article">
  <header class="article-header">
    <h1>My blog title</h1>
    <p>Niels den Dekker, <time>May 15, 2020</time></p>
  </header>
  <div>
    <p>Your article text...</p>
    <h2>The next title</h2>
  </div>
</article>

This is why developers struggle with the <header> element, as it can be used in multiple places in your website - and not just to wrap a logo as it's commonly assumed.

Header element and accessibility

Let's talk accessibility - which is often an afterthought. Here is how the <header> element is interpreted:

The <header> element specified at the top of your HTML - the one closest to our <body> element - is always interpreted as the introduction of the webpage.
If the <header> element is being used as a child of either a <aside>, <article>, <main>, <nav>, or <section> it becomes a more semantic content wrapper.

Here's how we might use both examples together in a real-world use case:

<body>
  <div class="hero">
    <header class="hero-header"> <!-- closest to body - page header -->
      <p class="hero-logo">Ultimate Courses</p>
      <nav class="hero-nav">
        <a href="/">Home</a>
      </nav>
    </header>
  </div>
  <div>
    <article class="article">
      <header class="article-header">
        <h1>My blog title</h1>
        <p>Niels den Dekker, <time>May 15, 2020</time></p>
      </header>
      <div>
        <p>Your article text...</p>
        <h2>The next title</h2>
      </div>
    </article>
  </div>
</body>

The first header represents the introduction to the webpage, whereas the second one simply represents the introduction to the article.

Legacy browser support

Because <header> was introduced in HTML5, there are older browsers that exist that have no idea what <header> means.

For supporting browsers every <header> element is display: block, which means older browsers won't have display: block built-in - which leads to very concerning style bugs.

We’d need to help older browsers out by adding our own display: block to our stylesheet:

// style.css
header { 
  display: block;
}

Now we can use our new HTML5 Header element in all browsers without causing any layout bugs.

This is more of a hack due to the way unrecognized elements can still be styled with CSS.

🕵️‍♂️ Find out more about the browser compatibility with the header element!

Summary

Now you're primed with essential knowledge on the <header> element and when to use it correctly.

We've also learned about semantic elements and the importance of accessibility, through our journey from <div> to <header>.

If you are serious about your HTML and CSS skills, your next step is to take a look at our HTML + CSS Basics course that will teach you the full language basics in detail as well as many use cases you'll need in daily front-end development!

Thanks for reading and happy semantic coding!

A guide to Responsive images with srcset

Niels den Dekker — Sat, 04 Apr 2020 17:21:56 +0000

High resolution images are something we all want. Whether it's on a mobile phone, a desktop or a laptop - no one wants to look at a blurry image. There are multiple ways to achieve this, but today we're going to look at a solution simple to achieve with HTML. Let's have a look at the srcset attribute.

The srcset attribute gives you the option to specify multiple images and let the browser decide what the best image is.

Let's start with something simple:

<img src="/photo-small.jpg">

This is a normal image include which can be viewed on a normal laptop or for example a MacBook with a retina display. To get a high resolution version on a retina display we'd have to use media queries in CSS.

This would be your HTML:

<div class="low-res">
  <img src="/photo-small.jpg">
</div>
<div class="high-res">
  <img src="/photo-large.jpg">
</div>

As we mentioned, we'd need some CSS magic to let the browser know - hey, this is what I want to use when a user is visiting the website on a retina display.

.high-res {
  display: none;
}

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) {
  .low-res {
    display: none;
  }

  .high-res {
    display: block;
  }
}

Now this is all super fancy, but there's a much simpler way of doing this. And we can do it with pure HTML!

The srcset attribute

This is where our new srcset attribute comes in. We’re basically moving all our CSS rules over to just one simple line, which would look like this:

<img src="/photo.jpg" srcset="/photo@2x.jpg 2x">

Let's start dissecting what I’ve just shown you to get a better understanding of what’s going on in our new srcset attribute.

Conventions

As you can see I’ve used a rather weird name for photo.jpg which I changed to photo@2x.jpg. This is simply our original file, but exported twice the size. That’s why I have postfixed it with @2x. We’ve used an example with just 1 specific image size in srcset, but there could be 4 for example - which we will get on to later!

Here’s a quick example of how I would manage my files in srcset and make sure they’re making sense for everyone else who’s also going to work with your images and HTML.

<img src="/photo.jpg" srcset="/photo@2x.jpg 2x, /photo@1000w.jpg 1000w" />

Note: we’re using widths here because srcset only works based on width or pixel density (1x, 2x, etc). You can’t specify an image based on a certain height of the screen.

Browser calculations

Before we go into all the specifics about different ways to specify your image widths. Let's have a look at how your browser actually picks the image.

Your browser attempts to calculate the best fit image based on the device width. For regular devices the ratio it is looking for is 1. If the device is considered “retina" then the browser will multiply the result by 2 to find the best image size.

Multiply what you might ask? We’ve got a set of images of 500px, 1250px and 2500px.

The device we’re using has a width of 1000px, now let’s look at the calculations the browser makes:

500 / 1000 = 0.5
1250 / 1000 = 1.25
2500 / 1000 = 2.5

As we mentioned earlier, on non-retina devices the browser will try and match a ratio of 1. This means for this device it will pick the image of 1250px as it’s the closest to 1.

A retina display has a ratio of 2. This is where our multiply comes in. The browser will look at 1.25 and go, this image will be too small and will lose quality. It will then multiply 1.25 by 2 and see if there’s anything available.

There’s a 2500px image with a ratio of 2.5 which matches what the browser is looking for so it will automatically load in that image for optimum result.

The srcset attribute

Now we’ve talked about conventions and how the browser picks the image, let’s have a look at how the srcset attribute is made up and how we can declare the images.

Note: source set takes 2 values and is separated by a comma after each declaration.

Let’s have a look:

<img src="/photo.jpg" srcset="/photo@1000w.jpg 1000w, /photo@2x.jpg 2x, /photo@3x.jpg 3x" alt="" />

You can see that every line is made up out of a file you wish to load in and after that a space with the width of the image’ real size. In this case, we’ve got an image with a width of 1000px. So we say when the width (w) of the screen is 1000px, load in that image.

Now there’s another attribute which I’ve not discussed out there that works together with our sourceset. This is the sizes attribute. Now when sizes has not been specified, it’s default value is always 100vw (100% of your device viewport).

Next one in line is 2x. We’ve discussed this a bit already but it’s the device-pixel ratio we’re specifying here. When the device has 2x the amount of pixels than a regular 1x device, it will automatically grab the image specified and load it in.

You all can guess what 3x is going to do! As you can see srcset is quite a powerful tool to make your images responsive and you didn’t need a single line of CSS for it.

Conclusion

If you’re a developer who’s looking for an easy way to specify your responsive images, source set is the way to go! There are loads of frameworks out there who would make the use of source sets an even bigger asset. Think about how dynamic it could be.

CSS limits us as we can’t target something in a CSS file. The media queries we write will and remain the same. Our HTML can be be changed and manipulated, which opens a lot of doors when it comes to the srcset attribute!

Liked the post? For more expert blog articles or video courses, please visit Ultimate Courses!

Thanks for reading and happy coding!