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" />
  • 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" />
  • is useful for SEO


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">


itemprop - user-defined metadata

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

  • href - contains path


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
<link href="light-favicon.png" rel="icon" media="(prefers-color-scheme: light)" />
<link href="dark-favicon.png" rel="icon" media="(prefers-color-scheme: dark)" />

rel

rel - attribute, which specifies type of relation

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 for "/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 and this is recommended approach due to responsiveness
  • one more <link rel="icon" /> can be used as fallback for browsers which don't support SVG or in order to add multiple favicons. see [media]
  • good size for raster favicon is 32x32
  • trick:
  • Firefox & Opera also support animated GIF

there is a list of "rel" values, which can be used for optimization

prefetch
preload
preconnect
dns-prefetch
prerender

<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: 1. blocking script - once parser reaches <script>, browser pauses DOM building. instead it starts script download, then script execution. only after that DOM building continues 2. access to whole DOM - script doesn't know about the HTML which is written under <script>

defer - solves the problem of blocking scripts and access to 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 the <body> - solves both problems, but this is worse 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
JavaScript.info

;