back to the basics: html head tag

2020-02-29

~4 min read

627 words

When you manage a web-app fully with React, it’s easy to forget that there’s HTML involved.

You add the script tag to the body, give it a div as a target, and call it a day letting React handle the rest.

This is what I covered in two previous posts about getting React apps running.¹

It’s interesting to look back at those posts because in both, there is information in the HTML’s <head> tag.

For example, in one:

index.html

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="“viewport”" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Adopt Me</title>
    <link rel=“stylesheet” href=“./style.css”/>
  </head>
</html>

What I didn’t appreciate at the time was what this tag was doing.

Simply put, the <head> tag is a container into which metadata about your site is placed. The types of metadata that can go into the <head> tag are diverse, but some examples include:

Title
Style
Links
Scripts
Meta

Title

The <title> tag, which would live inside the <head> serves as the site’s title. In a browser, this is most easily seen as the name on the tab.

index.html

<html>
  <head>
    <title>My Site!</title>
  </head>
</html>

Style

Since it’s possible to style an HTML document directly, this is where the CSS would live. More commonly, however, you would use a link to import the CSS.

index.html

<html>
  <head>
    <style>
      body {
        background-color: blue;
      }
    </style>
  </head>
</html>

Link

A common use case for the <link> tag is to load resources like stylesheets.

For example:

index.html

<html>
  <head>
    <link rel=“stylesheet” href=“./style.css”/>
  </head>
</html>

Script

Similar to Link, the <script> tag will fetch resources and make them available. Link is asynchronous and non-blocking while script is synchronous and blocking.²

The <script> tag is how we could load a library like React directly to make it available for compilation and execution.

For example:

index.html

<html>
  <head>
    <script src=“https://unpkg.com/react@16.8.4/umd/react.development.js”></script>
  </head>
</html>

Aside: Managing The Head Tag In React

Managing the <head> tag in React is not necessarily straight forward. In standard React applications, however, we can use tools like react-helmet. Next.js also offers their own approach with a <Head> component.

An example of the Next approach:

components/Meta.js

import Head from "next/head"

function Meta() {
  return (
    <Head>
      {/* enables responsive layouts */}
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      {/* Ensures our character set is utf-8 encoded */}
      <meta charSet="utf-8" />
      {/* Pulls in the favicon from our static assets */}
      <link rel="shortcut icon" href="./static/favicon.png" />
      {/* import css */}
      <link rel="stylesheet" type="text/css" href="./style.css" />
      <title>Sick Fits!</title>
    </Head>
  )
}

export default Meta

This can now be wrapped around the _app.js Page to set the Head.

Conclusion

Realizing that I didn’t really understand the <head> tag or its role was a great reminder that there’s always more to learn, but also that while I learn, I can be productive.

I do not need to know every API inside and out to be able to build websites and apps. But by continuing to nibble away at the edges as I come upon problems, I can move forward.

Footnotes

¹ The tutorials were Getting a Basic React App Up And Running which uses Webpack and Babel for bundling and An Even More Basic React App Tutorial where I used React directly within the HTML instead of bundling. ² I found the answers to this question on Quora about the differences between the script and link tags quite helpful.

2021 Daily Journal

Modifying Head Tags As Side Effects With NextJS

Hi there and thanks for reading! My name's Stephen. I live in Chicago with my wife, Kate, and dog, Finn. Want more? See about and get in touch!