Head

<head> - contains metadata about the document

  • metadata - is some data, which explains other data. in case of HTML it's machine-readable information about the document

<meta>

<meta /> - element, which represents metadata that cannot be represented by other HTML meta-related elements

name

name - attribute, which specifies the type of information meta element contains. it is applying to the whole page

theme-color - indicates a suggested color of the surrounding user interface

  • e.g. <meta name="theme-color" content="#ffffff" />
  • for Chrome default is white
  • Safari detects automatically, if not specified


author - serves informational purpose

  • e.g. <meta name="author" content="Michael Scott" />


description - is shown on search engine result page under the page title

  • e.g. <meta name="description" content="Rent a car service" />
  • see SEO for more SEO-related <head> elements


viewport - forces mobile browsers to adopt their real viewport width for loading web pages

  • e.g. <meta name="viewport" content="width=device-width, initial-scale=1.0"> - typical mobile-optimization
  • ?alternatively page will be loaded as for the larger viewport and after that shrunk


robots - is responsible for search engine indexing

  • e.g. <meta name="robots" content="noindex,nofollow">

Other Attributes

http-equiv - pragma directive

  • e.g. <meta http-equiv="X-UA-Compatible" content="IE=edge">


charset - charset declaration, giving the character encoding in which the document is encoded

  • e.g. <meta charset="UTF=8">


content - specifies the actual meta content. it contains the value for the name or http-equiv attribute

Open Graph

Open Graph meta tags - control how card under URL is displayed when shared on social media

  • property - meta attribute used by OG meta tags
  • in internet there are tools helping to validate how card looks
  • OG meta tags are part of Facebook's Open Graph protocol


og:title

  • e.g. <meta property="og:title" content="How to earn much money" />


og:description

og:image

<link>

<link /> - element, which specifies relationships between the current document and an external resource

Attributes

href - contains path to resource

rel - specifies type of relation

media - allows to pass media condition under which resource will be used

  • one use case is to render a favicon of suitable color for light and dark mode. see code example
  • note: Safari does not support media queries for favicons
<link rel="icon" href="/favicon.ico" media="(prefers-color-scheme: light)" />
<link rel="icon" href="/favicon-dark.ico" media="(prefers-color-scheme: dark)" />

Relation Types

stylesheet - is used for external CSS and fonts

  • e.g. <link rel="stylesheet" href="style.css">
  • reset CSS - file removing all default styles for elements. e.g. Meyer reset (Meyer reset transcript)
  • normalize CSS - alternative to full reset. file, which aligns element styles in consistent way


icon - is used for referencing favicon

  • e.g. <link rel="icon" href="/assets/favicon.ico" />
  • if not specified, browser always makes automatic request to /favicon.ico. so it's enough to put favicon into the root of bundle
  • type - required attribute if format of favicon is not ICO. it contains MIME type of image
  • type="image/png" - PNG is common alternative to ICO
  • type="image/svg+xml" - modern browsers support SVG favicon
  • one more <link rel="icon" /> can be used as a fallback for browsers which don't support SVG or in order to add multiple favicons. see media
  • good size for raster favicon is 32x32
  • tricks:
  • Firefox & Opera also support animated GIF


apple-touch-icon - is used by Apple as an icon for a website bookmarked to Safari home screen or device menu

  • recommendation is PNG of size 180x180 pixels
  • by default Apple uses website first letter over website's theme color. favicon is not used for this purpose
  • e.g. <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

Optimization

prefetch - notifies browser that specific resource might be needed soon, and browser downloads it asynchronously with low priority
preload - makes browser download resource immediately

preconnect - establishes a connection (i.e. DNS lookup, TCP handshake, TLS negotiation), but doesn't perform actual request

  • use case: third-party domains, serving assets, like fonts

dns-prefetch - performs DNS lookup, but doesn't establish a connection

  • use case: when preconnecting is too heavy


prerender - makes browser download page along with all the needed resources for it, and render it in hidden tab. once user opens page, browser provides it

  • use case: user is supposed to open payment page and it should be immediately displayed
  • prerender is useless for SPA as there is no page reload
  • this feature is considered deprecated

<script>

<script> - element, which is used to embed executable code or data

  • src - the URI of an external script. it is optional and is used as an alternative to embedding a script directly within a document
  • two scripts can exchange data with each other with the help of global object

type

type - indicates the type of represented script

  • by default is a "classic script", containing JavaScript code


module - ES module


text/template - custom type, which is ignored by browser. it provides a possibility to pass code to template engine

  • template engine - combines template with data and returns HTML, which can be inserted into DOM. e.g. Handlebars

defer & async

by default, there are two problems with scripts connected to HTML:
blocking script - once parser reaches <script>, browser pauses DOM building. instead it starts script download, then script execution. only after that DOM building continues
access to the whole DOM - since script is executed immediately once reached, it doesn't know about the HTML written under <script>

defer - solves the problem of blocking scripts and access to the whole DOM

  • defer makes browser download script asynchronously without blocking DOM, but execute it only once page will be built
  • the order of scripts is saved
  • defer works only for external scripts
  • in practice, defer is used for scripts execution order of which is important. and / or which require the whole DOM


async - partly solves the problem of blocking scripts

  • async makes browser download script asynchronously without blocking DOM, and once downloaded, pause DOM building and execute script
  • the order of scripts is not saved. the one which is downloaded first, will execute first
  • in practice, async is used for independent scripts execution order of which does not matter. and which don't require the whole DOM
  • e.g. counters; ads

<script> added at the end of <body> solves both problems, but this is inefficient practice, since script will start downloading only once parser will reach it

Other Elements

<title> - defines the document's title that is shown in a browser's title bar or a page's tab

  • can only contain text


<base /> - specifies the base URL to use for all relative URLs in a document

<style> - contains inline CSS for a document

<noscript>

MDN - HTML elements reference
JavaScript.info - Scripts: async, defer