Basic structure of an HTML document with an explanation of each line

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">

  <title>Unique page title - My Site</title>

  <script type="module">
    document.documentElement.classList.remove('no-js');
    document.documentElement.classList.add('js');
  </script>

  <link rel="stylesheet" href="/assets/css/styles.css">
  <link rel="stylesheet" href="/assets/css/print.css" media="print">

  <meta name="description" content="Page description">
  <meta property="og:title" content="Unique page title - My Site">
  <meta property="og:description" content="Page description">
  <meta property="og:image" content="https://www.mywebsite.com/image.jpg">
  <meta property="og:image:alt" content="Image description">
  <meta property="og:locale" content="en_GB">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">
  <meta property="og:url" content="https://www.mywebsite.com/page">
  <link rel="canonical" href="https://www.mywebsite.com/page">

  <link rel="icon" href="/favicon.ico">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/my.webmanifest">
  <meta name="theme-color" content="#FF00FF">
</head>

<body>
  <!-- Content -->
  <script src="/assets/js/xy-polyfill.js" nomodule></script>
  <script src="/assets/js/script.js" type="module"></script>
</body>
</html>

Under the cut – analysis of each line

Usually when I start a new project I either copy the HTML structure of the last site I created or go to HTML5 Boilerplate and copy their template. I haven’t recently started a new project, but I had to document the structure we use at work for the sites we build. So simple copy and paste was not an option, I had to figure out which choice was made. Since I spent quite a lot of time researching and creating the structure, I decided to share it with you.

Parsing each line

General

<!DOCTYPE html>

For old school students, we don’t need any other doc types that you have learned by heart. This one will be one and only. Despite the fact that today there are no other real options, it should be present on for compatibility reasons

<html lang="en" class="no-js">

Attribute lang is one of the most important attributes in HTML because it is powerful and is responsible for many things. You can read more about this On Use of the Lang Attribute and The lang attribute: browsers telling lies, telling sweet little lies… Applied to element html, it defines the natural language of the page. It contains one “language tag” in the format defined in Tags for Identifying Languages ​​(BCP47), eg, en for english, de for german or ru for Russian.

I am using the class no-js in case I want to apply styling to specific components in browsers that don’t support JavaScript. This class will be removed in browsers that support and run modern JavaScript.

<meta charset="UTF-8">

This attribute declares the character encoding of the document. If left disabled, certain characters may not display correctly in some browsers.

This is how Safari displays my name with a meta tag charset and without it.

Manuel Matuzović – Manuel MatuzoviÄ ‡

It must come before the element titleto avoid incorrect characters in the page title.

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

The viewport meta tag allows us to change the width of the viewport, which is necessary for responsive web design. width = device-width sets the width of the viewport to the width of the screen. initial-scale controls the zoom level when the page is first loaded.

I’m not sure if the setting initial-scale = 1 is still needed. I seem to have read somewhere that this is only needed for Safari on viewport should appear in the document as early as possible in order to ensure the correct rendering of the document

Parameter shrink-to-fit = no no longer needed starting with iOS 9.3.

Title, description, social media

<title>Unique page title - My Site</title>

The unique title of the page. It shows up in many places, like in a browser tab, in search results, when you save a page as a bookmark, etc.

Provide informative, unique page titles
Accessible page titles in a Single Page App

<script type="module">
  document.documentElement.classList.remove('no-js');
  document.documentElement.classList.add('js');
</script>

I I cut the mustard powered by JS module. If the browser supports JavaScript modules, that means it is a browser that supports modern JavaScript like modules, ES 6 syntax, fetch, etc. I only send most of the JS to these browsers and use the class js in CSS if the styles of the component are different when JS is active.

image

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

CSS for the site.

<link rel="stylesheet" href="/assets/css/print.css" media="print">

Print CSS for the site.

<meta name="description" content="Page description">

A unique description of the page, such as displayed on search results pages. It can be of any length, but search engines truncate fragments to ~ 155-160 characters.

<meta property="og:title" content="Unique page title - My Site">

The unique title of the page. Used by social media URL parsers like Twitter or Facebook.

<meta property="og:description" content="Page description">

Unique description of the page. Used by social media URL parsers like Twitter or Facebook.

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

The image displayed when you share a link to a page on social media, chat apps, or other sites that clean up URLs.

Ideally, this should be a square image with important content, centered in a square within a rectangle with an aspect ratio of 2: 1. This will ensure that the image will look good on rectangular and square image cards.

This is how this image will look on Twitter and WhatsApp.

image

image

Twitter Rules: Images for this Card support a 2: 1 aspect ratio with a minimum size of 300×157 or a maximum of 4096×4096 pixels. Images must be less than 5 MB in size. Supported formats are JPG, PNG, WEBP and GIF.

Twitter Developer Docs: Cards

<meta property="og:image:alt" content="Image description">

Description of the image. Do not use this meta tag if the image is purely decorative and does not contain meaningful information. Screen readers ignore the image if we don’t provide alt text.

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

Optional Open Graph property, but recommended. It defines the natural language of the page.

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

Content typewhich you are sharing like website, article, or video.movie… Required for valid Open Graph pages.

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

The canonical URL of the page. Required property for valid Open Graph pages.

The open graph protocol

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

This meta tag defines how the cards will look when posted to Twitter. There are two options for websites: summary and summary_large_image

summary_large_image

image

summary

image

As you can see, I am using a square image to make the card look good in both. I painted the top and bottom of the card pink so you can see that these parts will be cropped off. Summary_large_image

Icons and address bar

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

theme-color provides browsers with CSS color to customize the display of the page or surrounding user interface.

Supported browsers: Chrome, Brave and Samsung Internet on Android.

image

<link rel="icon" href="/favicon.ico">

32×32 pixel icon for legacy browsers. It should be located at the root of your website.

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Most modern browsers support SVG icons… Benefits favicon.svg is that it looks better when scaled because it is a vector image, not a bitmap, and we can add HTML and CSS to the SVG, which means we can support dark mode.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<style>
  path {
    fill: #153a51;
  }

  @media (prefers-color-scheme: dark) {
    path {
      fill: #FFFFFF;
    } 
  }
</style>
<path d="M397.8 117.9v290h-76.4V273.5h-.8l-46.4 97.2h-36.8l-46-96.8h-.8v134h-76.4v-290h80.4l60.8 150.8h.8l61.2-150.8h80.4z"/>
</svg>

The favicon on my site is in light mode.

image

The favicon on my site is in dark mode.
image

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

The 180×180 pixel icon will be used by Apple devices if you add a page to the home screen.

<link rel="manifest" href="/my.webmanifest">

For Android devices, we need a file .webmanifestwhich provides browsers with information about where the icons needed for the home screen and splash screen for PWA are located.

{
    "name": "matuzo.at",
    "icons": [
        { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
        { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
    ]
}

<link rel="canonical" href="https://www.mywebsite.com/page">

Use the element canonical links to prevent SEO problems caused by duplicate content by specifying the original source for pages that are accessible from multiple URLs.

<script src="/assets/js/xy-polyfill.js" nomodule></script>

If I want to serve JavaScript specifically for browsers that don’t support modules, I add the attribute nomodulewhich forces the script to run only in legacy browsers, namely IE 11.

<script src="/assets/js/script.js" type="module"></script>

JavaScript with type = "module" will only work in browsers that support modules, this is the opposite of the attribute nomodule


This is not an absolute minimum, but it is what I need on most of the sites I create. To summarize, I’ve added a few tags to this post that we probably don’t need anymore, as well as some others that you might need from time to time. If you want to know more about the item head and its children, check out the fantastic repository HEAD Josh Boochie.

Gizmos We Don’t Need Any More

<meta name="msapplication-TileColor" content="#efefef">

According to Andrey Sitnik, for the latest versions of Windows this is no longer required.

<meta http-equiv="X-UA-Compatible" content="ie=edge">

As of IE11, document modes are deprecated and should no longer be used except on a temporary basis.

Starting in IE11, Edge is the preferred document mode; it represents the highest support for modern standards available for the browser.

Compatibility changes in IE11

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#36b1bf">

Starting in Safari 12, we no longer need a separate icon option for pinned tabs.

Other notable elements

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

Use preloadif you want certain resources to be available earlier in the page’s lifecycle.

<link type="application/atom+xml" rel="alternate" href="/feed.xml" title="My Blog - Manuel Matuzovic">

RSS feed for your site.

<meta name="format-detection" content="telephone=no">

Disable automatic detection and formatting of phone numbers.

<meta name="twitter:dnt" content="on">

Prevent Twitter from using your site information for personalization purposes.


Cloud servers from Macleod fast and safe.

Register using the link above or by clicking on the banner and get a 10% discount for the first month of renting a server of any configuration!

Leave a Reply