The head and metadata

The four lines that are not optional

lang on <html> sets the language for screen reader pronunciation, hyphenation and translation offers.
charset must be within the first 1024 bytes, so it goes first.
viewport stops a phone rendering at 980px and scaling down.
<title> is the tab, the bookmark, the search result and the first thing a screen reader reads.

the minimum

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Learn HTML — DOMVYBE</title>
  <meta name="description" content="The document, the elements and the meaning behind them.">
</head>

Writing a title and a description

Title: put the distinctive part first — "Learn HTML — DOMVYBE", not "DOMVYBE — Learn HTML". Around 60 characters before search engines truncate it.
Description: one or two sentences, roughly 150 characters. It is not a ranking factor, but it is the sentence people read before deciding to click.
Both must be unique per page. Duplicated titles across a site are the commonest avoidable SEO problem.

Canonical

A page reachable at several URLs — with and without a trailing slash, with tracking parameters, on two domains — looks like several pages. A canonical link names the one that counts.

one address for one page

<link rel="canonical" href="https://domvybe.com/learn/html/">

Open Graph is what a link preview uses in messaging apps and social networks. Without it, a shared link is a bare URL.

Open Graph and Twitter

<meta property="og:type" content="article">
<meta property="og:title" content="Learn HTML">
<meta property="og:description" content="The document, the elements and the meaning behind them.">
<meta property="og:url" content="https://domvybe.com/learn/html/">
<meta property="og:image" content="https://domvybe.com/ui/media/learn-card.jpg">
<meta name="twitter:card" content="summary_large_image">

Two things break social cards most often

The image URL must be absolute, including the scheme and domain — a relative path will not resolve. And most scrapers cache: after changing the tags you usually have to ask the platform to re-fetch.

Icons and theme

favicon and address bar

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta name="theme-color" content="#07090c">

Stylesheets and scripts

A <link rel="stylesheet"> blocks rendering until it arrives — that is deliberate, it prevents a flash of unstyled text. Keep it small and in the head.

A plain <script> in the head blocks parsing. defer downloads in parallel and runs after the HTML is parsed, in order. async runs whenever it arrives, in no particular order. type="module" is deferred automatically.

loading order

<link rel="stylesheet" href="/ui/site.css">
<script type="module" src="/ui/app.js"></script>     <!-- deferred -->
<script defer src="/legacy.js"></script>             <!-- runs after parsing -->
<script async src="/analytics.js"></script>          <!-- whenever it lands -->

Robots and structured data

<meta name="robots" content="noindex"> keeps a page out of search results — useful for a staging copy or a thank-you page. Structured data in JSON-LD lets a search engine understand what the page is about.

JSON-LD for an article

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Learn HTML",
  "datePublished": "2026-09-21",
  "author": { "@type": "Person", "name": "Ulvi Shabanbayli" }
}
</script>