Semantic HTML: Metadata Content's Responsive Meta Tag in Responsive Design

2019-06-25

While I was working on the "Single grid price layout" Frontendmentor.io project, my finished project didn't scale well in mobile view. I reached out to the Frontendmentor.io's Slack community, and an experienced developer told me I was missing an important meta tag for my responsive design. I didn't have this tag included in my working draft of this project.

It was the responsive meta tag, which tells the browser how the website should be rendered.

Who knew? I don't normally fiddle with meta tags, but the more I know adds to my knowledge!

I'll share what I learned today about the responsive meta tag. Throughout this post, I'll be referencing my completed project "Single grid price layout."

In this post:

  • The Responsive Meta Tag: What, Where, Why and How
  • Adding vs. Removing the Responsive Meta Tag
  • Conclusion

The Responsive Meta Tag: What, Where, Why and How

The responsive meta tag, which is a part of semantic HTML, tells the website the user's viewport and screen and outputs a specific web layout view, such as the desktop or mobile view.

In semantic HTML, the meta tag itself belongs to the Metadata Content category under Content Models. The purpose of the Metdata Content is to:

"[set] up the presentation or behavior of the rest of the content, or that sets up the relationship of the document with other documents, or that conveys other "out of band" information." (Source: WHATWG - HTML Living Standard - Content Models - Metadata Content)

In other words, the Metadata Content, along with its many elements, creates information about the page by also creating several relationships on the web:

  • Internal Relationships
    • document-content
    • document-document
  • External Relationships
    • "out of band" information

Let's take a look where the responsive meta tag resides.

This is the responsive meta tag is located inside the <head> tag on line 5:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device --> // highlight-line
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <title>Frontend Mentor | Huddle landing page with curved sections</title>
  <link rel="stylesheet" href="css/main.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Poppins:700&display=swap" rel="stylesheet">
</head>
<body>

Let's zoom into line 5:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Let's break down each attribute in this meta tag:

  • meta tells the browser how to render the webpage by using the name attribute
  • name="viewport", which refers to the webpage visible to the user, while
  • in the content attribute, the "width=device-width" tells the browser the width of the page, and
  • "initial-scale=1.0" tells the browser how much to zoom into the page when the website is loaded.

Adding vs. Removing the Responsive Meta Tag

Here is a 2x2 table of what I'll be comparing:

Note that: Responsive Tag: Added / Removed

Responsive Tag | Added | Removed ---------------|----------|---- Desktop | Good | Good Mobile | Good | Bad

Here are the photos to compare:

Desktop

There are no obvious changes between adding and removing the responsive meta tag.

Desktop view with and without responsive tag

However...

Mobile

As you can see in the comparison below, the mobile with responsive tag looks very different and more similar to our desktop views than the mobile without the responsive tag.

Mobile view with and without responsive tag

Conclusion

In conclusion:

  • add the responsive meta tag to make your website scale well on different devices/viewports

Sources