HTML head elements: metadata, link, script, style, base

    HTML

    The HTML head element is a powerful part of any HTML document, providing necessary information to both the browser and other services about your webpage. You won't typically see it on the screen when you're browsing a webpage, but it plays a crucial role behind the scenes. In this first part of our HTML head elements series, we'll be covering Metadata and the Link element.


    The HTML Head Element

    Before diving into individual components, let's briefly discuss the head element itself. In an HTML document, the head element is contained within the opening <html> and closing </html> tags. It should be placed before the body element, like so:

      <!DOCTYPE html>
  <html>
      <head>
          <!-- Head elements go here -->
      </head>
      <body>
          <!-- Visible webpage content goes here -->
      </body>
  </html>

    The head element contains metadata about the document, scripts, styles, and links to external resources, amongst other things.


    Metadata: The <meta> Tag

    One of the most essential components in the head element is the <meta> tag. Meta stands for metadata, and it provides information about the HTML document that isn't displayed on the webpage itself. This can include things like the character encoding, a description of the page, keywords for search engines, author of the document, and viewport settings.

    For example, the following <meta> tag defines the character encoding for the document:

      <meta charset="UTF-8">

    A <meta> tag defining a description for the page might look like this:

      <meta name="description" content="A beginner's guide to HTML head elements.">

    This description can be used by search engines when displaying your page in search results.


    The Link Element: <link> Tag

    The <link> tag is another common sight in the head element. It is used to link your HTML document to external resources. The most typical use of the <link> tag is to link a CSS file to style your webpage.

    Here's how you might link to an external CSS file:

      <link rel="stylesheet" type="text/css" href="styles.css">

    The rel attribute specifies the relationship between the HTML document and the linked resource. In this case, "stylesheet" tells the browser that the linked document is a CSS file used to style the page.

    Other uses of the <link> tag include linking to an icon that shows in the browser tab (a favicon), or linking to a resource for SEO purposes.

      <link rel="icon" href="favicon.ico">
  <link rel="canonical" href="https://example.com/blog/html-head-elements">

    Scripts: The <script> Tag

    Scripts, specifically JavaScript, bring life to static HTML pages by making them interactive. The <script> tag is used to embed or reference an external JavaScript file.

    There are two ways to include JavaScript in your HTML document. The first method is to directly write JavaScript code within the <script> tags:

      <script>
      function helloWorld() {
          alert('Hello, world!');
      }
  </script>

    The second method is to link to an external JavaScript file using the src attribute:

      <script src="script.js"></script>

    Generally, the <script> tag is placed just before the closing </body> tag. However, if the script is independent of the page content or includes functions that are called when an event occurs (like a button click), it can be placed within the head element.


    Styling: The <style> Tag

    While the <link> tag is used for linking to an external CSS file, the <style> tag is used for writing inline CSS. This means you can write your CSS directly in the HTML document. Here is an example:

      <style>
      body {
          background-color: lightblue;
      }
      h1 {
          color: navy;
      }
  </style>

    This would set the background color of the page to light blue and the color of all top-level headings to navy.


    Setting a URL Base: The <base> Tag

    The <base> tag specifies the base URL for all relative URLs in a page. This means you can set the base URL once and use relative URLs for other resources without having to specify the full URL each time.

    Let's say your web page is on https://example.com/pages/ and you have a bunch of images located at https://example.com/images/. Normally, if you wanted to reference an image, you would need to write the full URL:

      <img src="https://example.com/images/picture.jpg">

    With the <base> tag, you can simplify this:

      <head>
      <base href="https://example.com/">
  </head>
  <body>
      <img src="images/picture.jpg">
  </body>

    The browser will understand that the src attribute of the <img> tag should be prefixed with the URL specified in the <base> tag. Please note that a document can have only one <base> element, and it must be inside the <head> element.