head

🔥 Head

Welcome to the Head project, a comprehensive guide to HTML <head> tags.

Table of Contents

Introduction

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page's Title</title>
</head>
<body>
  <!-- Content -->
</body>

Charset Attribute

Specifies the character encoding for the HTML document. "utf-8" is the standard encoding that supports a wide range of characters.

<meta charset="utf-8">

MDN Charset

Viewport Meta Tag

Configures the viewport properties to control how a webpage is displayed on different devices.

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

MDN Viewport

Title Tag

Defines the document’s title that is shown in a browser’s title bar or a page’s tab.

<title>Page's Title</title>

MDN Viewport

Meta Tags

Name Attributes

Application Name

The application-name meta tag specifies the name of the web application.

<meta name="application-name" content="Your App Name">

Learn more: MDN application-name

Author

The author meta tag specifies the author of the web page.

<meta name="author" content="Author's Name">

Learn more: MDN author

Description

The description meta tag provides a brief summary of the page’s content, often used by search engines and social media platforms.

<meta name="description" content="A concise description of the page">

Learn more: MDN description

Referrer

The referrer meta tag specifies the referrer policy for the page.

<meta name="referrer" content="no-referrer">

Learn more: MDN referrer

Color Scheme

The color-scheme meta tag sets the preferred color scheme for the page.

<meta name="color-scheme" content="light dark">

Learn more: MDN color-scheme

Theme Color

The theme-color meta tag defines the color of the browser’s UI elements when the page is active.

<meta name="theme-color" content="#RRGGBB">

Learn more: MDN theme-color

HTTP-Equiv Attributes

Content Security Policy

The content-security-policy meta tag specifies the content security policy for the page.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

Learn more: MDN Content Security Policy

Refresh

The refresh meta tag automatically refreshes the page after a specified time interval.

<meta http-equiv="refresh" content="5">

Learn more: MDN Refresh

Stylesheet

The rel="stylesheet" link tag links an external stylesheet to the document for styling purposes.

<link rel="stylesheet" href="styles.css">

Learn more: MDN rel=”stylesheet”

Canonical URL

The rel="canonical" link tag specifies the canonical URL for the document to avoid duplicate content issues.

<link rel="canonical" href="canonical-url.html">

Learn more: MDN rel=”canonical”

Manifest for Web Application

The rel="manifest" link tag specifies the location of the web app’s manifest file.

<link rel="manifest" href="manifest.json">

Learn more: MDN rel=”manifest”

Alternate to Another Language

The rel="alternate" link tag provides alternate versions of the current document in different languages.

<link rel="alternate" hreflang="es" href="alternate-language.html">

Learn more: MDN rel=”alternate”

RSS Feed

The rel="alternate" link tag can also be used to specify an RSS feed for the document.

<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="rss-feed.xml">

Learn more: MDN rel=”alternate”

Icons

Icon-related link tags can be used to specify various icons for the document.

Learn more: MDN rel=”icon”, Apple Developer rel=”apple-touch-icon”, MDN rel=”mask-icon”

Conditional Loading with Media Queries

Load stylesheets conditionally based on media queries.

<link rel="stylesheet" media="(max-width: 600px)" href="mobile.css">
<link rel="stylesheet" media="(min-width: 601px)" href="desktop.css">

Learn more: MDN Media Queries

Preloading Resources

Preload resources for improved performance.

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="image.jpg" as="image">

Learn more: MDN rel=”preload”

Prefetching Resources

Prefetch resources for upcoming navigations.

<link rel="prefetch" href="next-page.html">

Learn more: MDN rel=”prefetch”

Social Media

Open Graph and Twitter Card Tags

Facebook Open Graph tags customize content appearance when shared on social media platforms like Facebook, while Twitter Card tags enhance previews on Twitter.

prefix Attribute for Open Graph Tags

The prefix attribute defines a special marker for Open Graph (OG) meta tags in an HTML document. It’s like a label that tells browsers and social media sites to treat property attributes beginning with og: as Open Graph details.

By adding prefix="og:" to your HTML, you ensure that anything with og: is recognized as Open Graph information. This helps browsers and platforms understand your content better.

<head prefix="og: http://ogp.me/ns#">
  <!-- ... -->
</head>

og:url

The URL of the shared content.

<meta property="og:url" content="https://example.com/page">

og:type

The type of the content, e.g., “website” or “article”.

<meta property="og:type" content="article">

og:title

The title of the shared content.

<meta property="og:title" content="Page Title">

og:description

The description of the shared content.

<meta property="og:description" content="Description of the content">

og:image

An image to display when the content is shared.

<meta property="og:image" content="image.jpg">

og:image:alt

Alt text for the og:image.

<meta property="og:image:alt" content="Alt text for the image">

og:image:type

MIME type of the og:image.

<meta property="og:image:type" content="image/jpeg">

og:image:height

Height of the og:image.

<meta property="og:image:height" content="600">

og:image:width

Width of the og:image.

<meta property="og:image:width" content="800">

og:site_name

The name of the site or app.

<meta property="og:site_name" content="Site Name">

og:locale

The locale for the content.

<meta property="og:locale" content="en_US">

twitter:card

The type of Twitter card to use.

<meta name="twitter:card" content="summary">

twitter:site

The Twitter handle of the site’s creator.

<meta name="twitter:site" content="@username">

twitter:creator

The Twitter handle of the content creator.

<meta name="twitter:creator" content="@author">

When implementing social media tags, it’s important to note that Twitter Card tags (e.g., twitter:title, twitter:description, etc.) are often unnecessary when equivalent Open Graph tags (e.g., og:title, og:description, etc.) are present. Twitter will automatically use Open Graph tags as a fallback when generating previews on its platform. Therefore, you can simplify your implementation by focusing on the Open Graph tags and omitting their Twitter Card counterparts. Twitter Card Fallback Behavior

Learn more: The Open Graph Protocol, Facebook Open Graph, Twitter Card Markup

Extra

Absolutely, let’s add information about the <base>, <style>, <script>, and <noscript> elements as well:

Style Tags

Style tags define inline styles directly within the HTML document.

<style>

Defines internal styles for the document.

<style>
  /* Your styles here */
</style>

Script Tags

Script tags are used to include JavaScript code within the HTML document.

<script>

Includes external or inline JavaScript.

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

NoScript Tags

NoScript tags provide content for browsers with disabled JavaScript.

<noscript>

Displays content when JavaScript is disabled.

<noscript>
  <p>Please enable JavaScript to view this site.</p>
</noscript>

đź“ť License

This project is licensed under the MIT License, allowing you to freely use, modify, and distribute the content.

This site is open source. Improve this page.