Big Beautiful HTML Elements

In this document I am listing all the HTML elements with the purpose of studying them.

I am using minimal styling in order to preserve the vanilla HTML feel.

The main body of information is gathered from W3Schools, MDN Web Docs, and the HTML Living Standard. There's a lot of copy/paste from those three websites.

The information there is not always as comprehensive or understandable as I need it to be, so I've also linked to complimentary resources and added additional explanations with the help of AI.

This document is meant to be viewed on a desktop browser for best experience.

Contents:

Elements and Tags

Overview of elements and tags

An element is a part of a webpage. In XML and HTML, an element may contain a data item or a chunk of text or an image, or perhaps nothing. A typical element includes an opening tag with some attributes, enclosed text content, and a closing tag.

Anatomy of and HTML element.

Elements and tags are not the same things. Tags begin or end an element in source code, whereas elements are part of the DOM, the document model for displaying the page in the browser.

Self-closing tags

Besides the standard elements with opening and closing tags, HTML has self-closing tags, also known as void elements or empty elements.

Their purpose is simply to embed something into the page, to mark a specific point, or to specify metadata. Since they don't wrap around content, they don't need a closing tag.

For instance, an <img> tag embeds an image, and a <br> tag inserts a line break. All the information they need is provided through their attributes.

You will see these tags written in two ways:
HTML5 Style: <br>
XHTML Style: <br />

In modern HTML5, the trailing slash (/) is optional and unnecessary. However, in the older and stricter XHTML, it was required to make the document valid XML.

Many developers still use the trailing slash (<img />) out of habit or to maintain compatibility with older tools, but for modern web development, simply using <img> is perfectly fine.

The existing self-closing tags are <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <param>, <source>, <track>, and <wbr>.

Nesting

You can also put elements inside other elements, which is called nesting. This is how you build the structure of a webpage. The entire content of your page is nested inside the <body> element, which itself is nested inside the <html> element.

Here's a simple example of nesting: 

<body>
  <h1>My Awesome Webpage</h1>
  <p>This is my first paragraph. I want to <strong>emphasize</strong> this word.</p>
</body>

In this example, the <strong> element is nested inside the <p> element to make the word "emphasize" bold.

Nesting elements correctly is fundamental to writing valid and semantic HTML. Think of it like a set of Russian dolls - some dolls fit inside others, but you can't just jam any doll into another. The rules are based on what type of content an element is designed to hold.

The main principle revolves around two categories of elements: block-level elements and inline elements.

Block-level elements create a "block" that takes up the full available width and starts on a new line.

Inline elements fit in a "line" of text and only take up as much width as they need.

The General Rules of Nesting are:

Block-in-Block:
You can almost always nest a block-level element inside another block-level element. This is how page layouts are built.

Inline-in-Block:
You can nest inline elements inside block-level elements. This is very common, like putting a link (<a>) inside a paragraph (<p>).

Inline-in-Inline:
You can usually nest inline elements inside other inline elements.

Block-in-Inline (Forbidden):
You cannot nest a block-level element inside an inline element. It's semantically incorrect and will lead to unpredictable browser behavior.


The block-level elements are <address>, <article>, <aside>, <blockquote>, <details>, <dialog>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <li>, <main>, <nav>, <ol>, <p>, <pre>, <section>, <table>, and <ul>.

The inline elements are <a>, <abbr>, <b>, <bdo>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <output>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, and <var>.

Main Root

<html>

Description:

The <html> element represents the root (top-level element) of an HTML document, so it is also referred to as the root element. It signals to the browser that the document is, in fact, an HTML page. All other elements must be descendants of (wrapped inside) this element.

There can be only one <html> element in a document.

Attributes:

xmlns

Specifies the XML Namespace of the document. Default value is "http://www.w3.org/1999/xhtml". This is required in documents parsed with XML parsers, and optional in text/html documents.

It was a requirement in XHTML (a stricter, XML-based variant of HTML). In modern HTML5, this attribute is optional because the HTML parser automatically handles it. However, you might still encounter it in older codebases or when working with XML-based formats.

For standard HTML5 documents, omitting it is perfectly acceptable and even recommended for simplicity.

Example: 

<html xmlns="http://www.w3.org/1999/xhtml">
lang

The lang attribute specifies the primary language of the content within the document. It's important to include it because this information is vital for:

Accessibility:
Screen readers use the lang attribute to pronounce the text correctly.

Search Engines:
SEO crawlers use this attribute to understand the language of the page and serve it to the appropriate audience.

Browsers:
Browsers can use this information to suggest translation options or select appropriate fonts.

Example: 

<html lang="en">

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Links:

MDN / W3S / Standard

Document Metadata

Metadata contains information about the page. This includes information about styles, scripts and data to help software (search engines, browsers, etc.) use and render the page.

Metadata for styles and scripts may be defined in the page or linked to another file that has the information.

Description:

The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.

Metadata is data about the HTML document. Metadata is not displayed.

Metadata typically define the document title, character set, styles, scripts, and other meta information.

The following elements can go inside the <head> element:

Example:

<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Document title</title>
</head>
</html>

Links:

MDN / W3S / Standard

<base>

Description:

The <base> tag specifies the base URL and/or target for all relative URLs in a document.

The <base> tag must have either an href or a target attribute present, or both.

There can only be one single <base> element in a document, and it must be inside the <head> element.

If multiple <base> elements are used, only the first href and first target are obeyed — all others are ignored.

Use Cases:

The <base> element is particularly useful in several scenarios:

Simplified Asset Management:
In large websites with a consistent directory structure for assets like images, stylesheets, and scripts, you can set a base URL pointing to the assets folder. This allows you to use simpler relative paths in your code.

Content Migration and Staging:
When moving a website from a staging server to a live domain, you only need to change the href value in the <base> element instead of updating every single link throughout the site.

Single-Page Applications (SPAs):
In some SPA architectures, where the URL in the address bar changes dynamically without full page reloads, the <base> tag can help ensure that relative resource URLs are always resolved correctly relative to the application's root.

Mirrored Content:
If the same content is served from multiple domains or subdomains, the <base> element can ensure that all relative links point back to a canonical domain, which can also be beneficial for SEO.

Attributes:

href

The base URL to be used throughout the document for relative URLs. Absolute and relative URLs are allowed. data: and javascript: URLs are not allowed.

target

A keyword or author-defined name of the default browsing context to show the results of navigation from <a>, <area>, or <form> elements without explicit target attributes. The following keywords have special meanings:

  • _self (default): Show the result in the current browsing context.
  • _blank: Show the result in a new, unnamed browsing context.
  • _parent: Show the result in the parent browsing context of the current one, if the current page is inside a frame. If there is no parent, acts the same as _self.
  • _top: Show the result in the topmost browsing context (the browsing context that is an ancestor of the current one and has no parent). If there is no parent, acts the same as _self.

Example:

<head>
    <base href="https://www.example.com/" target="_blank">
</head>

Links:

MDN / W3S / Standard

<title>

Description:

The <title> HTML element defines the document's title that is shown in a browser's title bar or a page's tab. It only contains text; HTML tags within the element, if any, are also treated as plain text.

The contents of a page title can have significant implications for search engine optimization (SEO).

Search engines typically display about the first 55 to 60 characters of a page title.

When users bookmark a page, the title is used as the default name for the bookmark.

Dynamic Titles

Titles can be dynamically updated using JavaScript, which is useful for single-page applications (SPAs) or pages with changing content.

That is done with JavaScript by using the document.title property.*

* In the context of web development, document properties refer to the attributes and methods associated with the document object in the DOM (Document Object Model). The document object represents the entire HTML or XML document loaded in the browser and provides access to its structure, content, and metadata.

Here's a simple example.

Key considerations for dynamic titles:

Search engines may not index dynamically updated titles if they are changed after the page loads. Use server-side rendering for critical titles.

Some browsers may cache the original title, so dynamic changes might not always be reflected immediately in bookmarks or history.

Example:

<title>Grandma's Heavy Metal Festival Journal</title>

Links:

MDN / W3S / Standard

<meta>

Description:

The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data.

<meta> tags always go inside the <head> element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings.

Metadata will not be displayed on the page, but is machine parsable.

Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services.

Attributes:

charset

The charset attribute specifies the character encoding for the HTML document.

The HTML5 specification encourages web developers to use the UTF-8 character set, which covers almost all of the characters and symbols in the world!

<meta> elements which declare a character encoding must be located entirely within the first 1024 bytes of the document.

Example: 

<meta charset="UTF-8">
content

The content attribute contains the value for the http-equiv or name attribute.

Examples: 

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

<meta name="author" content="John Doe">
name

The name attribute provides metadata in name-value pairs. When a <meta> element has a name attribute, a content attribute defines the corresponding value. The metadata is document-level metadata that applies to the whole page.

If the http-equiv attribute is set, the name attribute should not be set in the same tag.

The <meta> tag and its name attribute are used for a variety of purposes, and the names can come from different sources, including the HTML Specification, the CSS Device Adaptation specification, the WHATWG MetaExtensions Wiki, and others.

While names defined in the HTML specification are the safest and most universally supported, many names from other specifications or the WHATWG MetaExtensions wiki are widely adopted and provide useful functionality.

Check compatibility using resources like Can I Use or browser documentation.

If a name provides functionality you need (e.g., theme-color for branding), it's worth using even if it's not part of the HTML specification.

For less widely supported names, provide fallbacks or ensure your site functions correctly even if the metadata is ignored.

Meta names defined in the HTML specification:

  • application-name

    Specifies the name of the Web application that the page represents.

    Browsers may use this to identify the application running in the web page. It is different from the <title> element, which may contain an application (or website) name, but a <title> may add contextual information like a document name or a status.

    Some browsers may use the application-name value in their UI, such as when displaying pinned tabs or bookmarks.

    Individual pages shouldn't define their own, unique application-name.

    Example: 

    <meta name="application-name" content="My Web App">

    To provide translations, use multiple <meta> tags with the lang attribute for each language: 

    <meta name="application-name" content="Weather Wizard" lang="en" />

<meta name="application-name" content="Mago del Clima" lang="es" />

    Other Use Cases:

    In PWAs, the application-name can complement other metadata (like the manifest file) to define the app's identity.

    PWAs often use a manifest.json file to define the app name, but the application-name meta tag can serve as a fallback or additional identifier.

    On Windows the application-name can be used in conjunction with other meta tags (like msapplication-* tags) to define the app's appearance and behavior on the platform (like the Start Menu or taskbar).

    Example: 

    <meta name="application-name" content="My Web App">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="tile.png">

  • author

    Specifies the name of the author of the document.

    Example: 

    <meta name="author" content="Ignat Ignatov">

  • color-scheme

    Specifies one or more color schemes with which the document is compatible. The browser will use this information in tandem with the user's browser or device settings to determine what colors to use for everything from background and foregrounds to form controls and scrollbars.

    The primary use for <meta name="color-scheme"> is to indicate compatibility and order of preference for light and dark color modes.

    Example: 

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

    This example specifies that the website supports both light and dark modes.

    You can use the prefers-color-scheme media query in your CSS to define custom styles for light and dark modes.

    Example: 

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="color-scheme" content="light dark">
    <title>Color Scheme Example</title>
    <style>
        body {
            background-color: white;
            color: black;
        }
        @media (prefers-color-scheme: dark) {
            body {
                background-color: black;
                color: white;
            }
        }
    </style>
</head>

    Possible content values for color-scheme

    • normal

      The document is unaware of color schemes and should be rendered using the default color palette.

    • light, dark, light dark, dark light

      One or more color schemes supported by the document. Multiple color schemes indicates that the first scheme is preferred by the document, but that the second scheme is acceptable if the user prefers it. Specifying the same color scheme multiple times has the same effect as specifying it once.

    • only light

      Indicates that the document only supports light mode, with a light background and dark foreground colors. only dark is invalid, because forcing a document to render in dark mode when it isn't compatible can result in unreadable content and all major browsers default to light mode if not otherwise configured.

    Other optional color-scheme values:

    • media (Optional)

      Any valid media type or query. If provided, the options for the document's color scheme defined in the content attribute are suggested to the browser when the media query matches. This is mostly useful for the prefers-color-scheme CSS media feature.

      Example: 

      <meta name="color-scheme" content="dark" media="(prefers-color-scheme: dark)">

      This meta tag declares that the website supports dark mode when the user's system or browser is set to dark mode.

  • description

    Specifies a description of the page. Search engines can pick up this description to show with the results of searches.

    Example: 

    <meta name="description" content="An HTML website, haha."

  • generator

    Specifies one of the software packages used to generate the document (not used on hand-authored pages).

    Example: 

    <meta name="generator" content="WordPress 6.8">

  • keywords

    Specifies a comma-separated list of keywords - relevant to the page (Informs search engines what the page is about).

    Example: 

    <meta name="keywords" content="HTML, HTML tags, tag reference">

  • referrer

    The referrer meta tag is used to control the behavior of the Referer HTTP header, which is sent by the browser when navigating from one page to another or when making requests (e.g., for images, scripts, or other resources). The Referer header contains the URL of the page that initiated the request, and the referrer meta tag allows you to specify how much of this information is shared.

    This tag is particularly useful for managing privacy, security, and analytics, as it gives you control over what information is sent to external websites or servers.

    Example: 

    <meta name="referrer" content="origin" />

    More resources:
    W3C's Referrer Policy Specification
    Referrer header (MDN article)
    Referrer-Policy header (MDN article)
    Referer and Referrer-Policy best practices (web.dev article) HTTP referer (Wikipedia article)


    Values:

    • no-refferer

      Means that the Referer header will not be sent.

      Maximum privacy; no referrer information is shared.

    • no-refferer-when-downgrade

      The Referer header is sent only for requests made over the same or more secure protocols (e.g., HTTPS to HTTPS). It is not sent when navigating from HTTPS to HTTP.

      Default behavior in most browsers; balances privacy and functionality.

    • origin

      Only the origin (protocol, domain, and port) of the referrer is sent, not the full URL.

      For example if the referrer is https://example.com/page.html, only https://example.com is sent.

      Share minimal information while maintaining some context.

    • origin-when-cross-origin

      Sends the full URL for same-origin requests but only the origin for cross-origin requests.

      For example:

      Same-origin: https://example.com/page.html → Sent: https://example.com/page.html

      Cross-origin: https://example.com/page.html → Sent: https://example.com

      Balance between privacy and functionality.

    • same-origin

      The Referer header is sent only for same-origin requests. It is not sent for cross-origin requests.

      Prevent referrer information from being shared with external sites.

    • strict-origin

      Sends only the origin of the referrer, but only for requests made over the same or more secure protocols (e.g., HTTPS to HTTPS). It is not sent when navigating from HTTPS to HTTP.

      Enhanced privacy and security.

    • strict-origin-when-cross-origin

      Sends the full URL for same-origin requests, only the origin for cross-origin requests, and nothing when navigating from HTTPS to HTTP.

      A good balance of privacy, security, and functionality.

    • unsafe-url

      Sends the full URL of the referrer for all requests, regardless of protocol or origin (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.

      Maximum functionality, but least privacy.

    Example Use Cases:

    Privacy-Focused Websites:
    Use no-referrer or strict-origin to prevent sensitive information from being leaked in the Referer header.

    Analytics and Tracking:
    Use origin or origin-when-cross-origin to provide minimal but useful referrer information for analytics purposes.

    Security-Sensitive Applications:
    Use strict-origin or strict-origin-when-cross-origin to ensure referrer information is not sent to less secure protocols (e.g., HTTP).

    Maximum Functionality:
    Use unsafe-url if you need to send the full URL in all cases (e.g., for detailed analytics), but be aware of the privacy implications.

  • theme-color

    The theme-color value for the name attribute of the <meta> element indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface. If specified, you define a theme color using a content attribute in the <meta> element as a CSS <color> value.

    You can set the media to which the theme color metadata applies, include the media attribute with a valid media query list.

    Mainly supported for mobile browsers and PWAs.

    Example: 

    <meta
  name="theme-color"
  content="cornflowerblue"
  media="(prefers-color-scheme: light)" />
<meta
  name="theme-color"
  content="dimgray"
  media="(prefers-color-scheme: dark)" />

    Example of effect:
    Anatomy of and HTML element.

Meta names defined in the CSS Device Adaptation specification:

  • viewport

    Controls the viewport (the user's visible area of a web page).

    The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.

    You should include the following <meta> viewport element in all your web pages: 

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

    A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.

    The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

    The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

    Possible viewport values:

    • width

      Defines the pixel width of the viewport that you want the website to be rendered at. It can be a positive whole number or the keyword device-width.

    • height

      Defines the height of the viewport. It can be a positive whole number or the keyword device-height. This is not used by any browser.

    • initial-scale

      Defines the ratio between the device width (device-width in portrait mode or device-height in landscape mode) and the viewport size. It can be a number between 0.0 and 10.0.

    • maximum-scale

      Defines the minimum zoom level. It must be smaller or equal to the maximum-scale or the behavior is undefined. Browser settings can ignore this rule, and iOS10+ ignores it by default. It can be a number between 0.0 and 10.0.

    • user-scalable

      A boolean indicating if the user can zoom the web page. Browser settings can ignore this rule, and iOS10+ ignores it by default. It can be either yes or no, defaulting to yes.

    • viewport-fit

      Defines the viewable portions of the web page. It can be one of the keywords auto, contain, or cover.

      • auto
        Doesn't affect the initial layout viewport, and the whole web page is viewable.

      • contain
        The viewport is scaled to fit the largest rectangle inscribed within the display.

      • cover
        The viewport is scaled to fill the device display. It's highly recommended to use the safe area inset variables to ensure that important content doesn't end up outside the display.

Meta names defined in the WHATWG Wiki MetaExtensions wiki:

The WHATWG Wiki MetaExtensions page contains a large set of non-standard metadata names.

Some of the names included are used quite commonly in practice.

Some notable examples:

  • creator

    The name of the creator of the document, such as an organization or institution. If there are more than one, several <meta> elements should be used.

  • publisher

    The document publisher's name.

  • robots

    A comma-separated list of values defining the crawl behavior that cooperative crawlers (or "robots") should use with the page.

    More info.

  • googlebot

    A synonym of robots, is only followed by Googlebot (the indexing crawler for Google).

http-equiv

The http-equiv attribute provides an HTTP header for the information/value of the content attribute.

The http-equiv attribute can be used to simulate an HTTP response header.

Values:

  • content-security-policy

    Specifies a content policy for the document.

    Example: 

    <meta http-equiv="content-security-policy" content="default-src 'self'">

    Official Reference: https://content-security-policy.com

    More resources:
    Content-Security-Policy (CSP) header (MDN article)
    Content Security Policy (CSP) (MDN article guide)

  • content-type

    Specifies the character encoding for the document.

    Example: 

    <meta http-quiv="content-type" content="text/html; charset=UTF-8">

    It's the same as <meta charset="utf-8">, so best to use charset.

    Source: Stack Overflow

  • default-style

    Specifies the preferred style sheet to use.

    Example: 

    <head>
    <meta charset="UTF-8">
    <meta http-equiv="default-style" content="Light mode">
    <title>Document</title>
    <link rel="stylesheet" href="dark.css" title="Dark mode">
    <link rel="stylesheet" href="light.css" title="Light mode">
</head>

    The value of the content attribute must match the value of the title attribute on a <link> element in the same document, or it must match the value of the title attribute on a style element in the same document.

  • refresh

    Defines a time interval for the document to refresh itself.

    Example: 

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

    The value "refresh" should be used carefully, as it takes the control of a page away from the user. Using "refresh" will cause a failure in W3C's Web Content Accessibility Guidelines.

Links:

MDN / W3S / Standard

Description:

The <link> HTML element specifies relationships between the current document and an external resource. This element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.

Attributes:

as

This attribute is required when rel="preload" has been set on the <link> element, optional when rel="modulepreload" has been set, and otherwise should not be used. It specifies the type of content being loaded by the <link>, which is necessary for request matching, application of correct content security policy, and setting of correct Accept request header.

Furthermore, rel="preload" uses this as a signal for request prioritization.

See more here (link to MDN article section with table reference for as values).

blocking

This attribute explicitly indicates that certain operations should be blocked on the fetching of an external resource. It must only be used when the rel attribute contains expect or stylesheet keywords.

The operations that are to be blocked must be a space-separated list of blocking tokens listed below:

  • render
    The rendering of content on the screen is blocked.

crossorigin

This enumerated attribute indicates whether CORS must be used when fetching the resource. CORS-enabled images can be reused in the <canvas> element without being tainted.

Values:

  • anonymous

    A cross-origin request (i.e., with an Origin HTTP header) is performed, but no credential is sent (i.e., no cookie, X.509 certificate, or HTTP Basic authentication). If the server does not give credentials to the origin site (by not setting the Access-Control-Allow-Origin HTTP header) the resource will be tainted and its usage restricted.

  • use-credentials

    A cross-origin request (i.e., with an Origin HTTP header) is performed along with a credential sent (i.e., a cookie, certificate, and/or HTTP Basic authentication is performed). If the server does not give credentials to the origin site (through Access-Control-Allow-Credentials HTTP header), the resource will be tainted and its usage restricted.

If the attribute is not present, the resource is fetched without a CORS request (i.e., without sending the Origin HTTP header), preventing its non-tainted usage. If invalid, it is handled as if the enumerated keyword anonymous was used.

More on CORS:
HTML attribute: crossorigin (MDN article)
Cross-Origin Resource Sharing (CORS) (MDN article)
CORS (MDN glossary item)
Cross-origin resource sharing (Wikipedia article)

disabled

For rel="stylesheet" only, the disabled Boolean attribute indicates whether the described stylesheet should be loaded and applied to the document. If disabled is specified in the HTML when it is loaded, the stylesheet will not be loaded during page load. Instead, the stylesheet will be loaded on-demand, if and when the disabled attribute is changed to false or removed.

Setting the disabled property in the DOM causes the stylesheet to be removed from the document's Document.styleSheets list.

fetchpriority

Provides a hint of the relative priority to use when fetching a resource of a particular type.

Values:

  • high

    Fetch the resource at a high priority relative to other resources of the same type.

  • low

    Fetch the resource at a low priority relative to other resources of the same type.

  • auto

    Don't set a preference for the fetch priority. This is the default. It is used if no value or an invalid value is set.

Look into HTMLLinkElement.fetchPriority for more information.

href

This attribute specifies the URL of the linked resource. A URL can be absolute or relative.

hreflang

This attribute indicates the language of the linked resource. It is purely advisory. Allowed values are specified by RFC 5646: Tags for Identifying Languages (also known as BCP 47). Use this attribute only if the href attribute is present.

imagesizes

For rel="preload" and as="image" only, the imagesizes attribute has similar syntax and semantics as the sizes attribute that indicates to preload the appropriate resource used by an img element with corresponding values for its srcset and sizes attributes.

imagesrcset

For rel="preload" and as="image" only, the imagesrcset attribute has similar syntax and semantics as the srcset attribute that indicates to preload the appropriate resource used by an img element with corresponding values for its srcset and sizes attributes.

integrity

Contains inline metadata — a base64-encoded cryptographic hash of the resource (file) you're telling the browser to fetch. The browser can use this to verify that the fetched resource has been delivered without unexpected manipulation. The attribute must only be specified when the rel attribute is specified to stylesheet, preload, or modulepreload.

Read up on Subresource Integrity (SRI) for more information.

media

This attribute specifies the media that the linked resource applies to. Its value must be a media type / media query. This attribute is mainly useful when linking to external stylesheets — it allows the user agent to pick the best adapted one for the device it runs on.

More on media queries:
CSS media queries (MDN article guide)
HTML <link> media Attribute (W3S article)

reffererpolicy

A string indicating which referrer to use when fetching the resource.

Values:

  • no-refferer

    Means that the Referer header will not be sent.

  • no-refferer-when-downgrade

    Means that no Referer header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent's default behavior, if no policy is otherwise specified.

  • origin

    Means that the referrer will be the origin of the page, which is roughly the scheme, the host, and the port.

  • origin-when-cross-origin

    Means that navigating to other origins will be limited to the scheme, the host, and the port, while navigating on the same origin will include the referrer's path.

  • unsafe-url

    Means that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.

rel

Required.
This attribute names a relationship of the linked document to the current document. The attribute must be a space-separated list of link type values.

More on rel and its possible values:
HTML attribute: rel (MDN article)
HTML <link> rel Attribute

sizes

This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the rel contains a value of icon or a non-standard type such as Apple's apple-touch-icon.

Values:

  • HeightxWidth

    Specifies one or more sizes for the linked icon.
    The height and width values are separated by an "x" or "X".

    Examples:

    1 size:
    <link rel="icon" href="favicon.png" sizes="16x16" type="image/png">

    2 sizes:
    <link rel="icon" href="favicon.png" sizes="16x16 32x32" type="image/png">

  • any

    Specifies that the icon is scalable (like an SVG image).

    Example:
    <link rel="icon" href="icon.svg" sizes="any" type="image/svg+xml">

    While the any value is technically permissable on raster images, it's best used with vectors, because you'd be promising infinite scalability for an image that will degrade when resized, leading to a poor user experience.

Most icon formats are only able to store one single icon; therefore, most of the time, the sizes attribute contains only one entry. Microsoft's ICO format and Apple's ICNS format can store multiple icon sizes in a single file. ICO has better browser support, so you should use this format if cross-browser support is a concern.

title

The title attribute has special semantics on the <link> element. When used on a <link rel="stylesheet"> it defines a default or an alternate stylesheet.

type

This attribute is used to define the type of the content linked to. The value of the attribute should be a MIME type such as text/html, text/css, and so on. The common use of this attribute is to define the type of stylesheet being referenced (such as text/css), but given that CSS is the only stylesheet language used on the web, not only is it possible to omit the type attribute, but is actually now recommended practice. It is also used on rel="preload" link types, to make sure the browser only downloads file types that it supports.

Look at IANA Media Types for a complete list of standard media types.

Links:

MDN / W3S / Standard

<style>

Description:

The <style> HTML element contains style information for a document, or part of a document. It contains CSS, which is applied to the contents of the document containing the <style> element.

Attributes:

blocking

This attribute explicitly indicates that certain operations should be blocked on the fetching of critical subresources. @import-ed stylesheets are generally considered as critical subresources, whereas background-image and fonts are not. The operations that are to be blocked must be a space-separated list of blocking tokens listed below:

  • render
    The rendering of content on the screen is blocked.

media

This attribute defines which media the style should be applied to. Its value is a media query, which defaults to all if the attribute is missing.

For more on media queries read here.

nonce

A cryptographic nonce (number used once) used to allow inline styles in a style-src Content-Security-Policy. The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial.

title

This attribute specifies alternative style sheet sets.

Examples:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
</head>
<body>

<h1>A heading</h1>
<p>A paragraph.</p>

</body>
</html>

Links:

MDN / W3S / Standard

Sectioning Root

<body>

Description:

The <body> HTML element represents the content of an HTML document. There can be only one <body> element in a document.

All the content that is visible to the user is placed inside the <body>.

Content outside the <body> tag (but inside <html>) is not displayed in the browser.

Examples:

<html>
<head>
  <title>Title of the document</title>
</head>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>

Links:

MDN / W3S / Standard

Content Sectioning

Content sectioning elements allow you to organize the document content into logical pieces. Use the sectioning elements to create a broad outline for your page content, including header and footer navigation, and heading elements to identify sections of content.

<address>

Description:

The <address> HTML element indicates that the enclosed HTML provides contact information for a person or people, or for an organization.

The contact information provided by an <address> element's contents can take whatever form is appropriate for the context, and may include any type of contact information that is needed, such as a physical address, URL, email address, phone number, social media handle, geographic coordinates, and so forth. The <address> element should include the name of the person, people, or organization to which the contact information refers.

<address> can be used in a variety of contexts, such as providing a business's contact information in the page footer, or indicating the author of an article by including an <address> element within the <article>.

The text in the <address> element usually renders in italic, and browsers will always add a line break before and after the <address> element.

Example:

<address>
  Contact us at: <a href="mailto:info@example.com">info@example.com</a><br>
  123 Main Street, Springfield, USA<br>
  Phone: +1-555-123-4567
</address>

Output of above example:

Contact us at: info@example.com
123 Main Street, Springfield, USA
Phone: +1-555-123-4567

Links:

MDN / W3S / Standard

<article>

Description:

The <article> HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

A given document can have multiple articles in it; for example, on a blog that shows the text of each article one after another as the reader scrolls, each post would be contained in an <article> element, possibly with one or more <section>s within.

Each <article> should be identified, typically by including a heading (<h1> - <h6> element) as a child of the <article> element.

Links:

MDN / W3S / Standard

<aside>

Description:

The <aside> HTML element represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes.

Links:

MDN / W3S / Standard

Description:

The <footer> HTML element represents a footer for its nearest ancestor sectioning content or sectioning root element. A <footer> typically contains information about the author of the section, copyright data or links to related documents.

Links:

MDN / W3S / Standard

Description:

The <header> HTML element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.

Links:

MDN / W3S / Standard

<h1> - <h6>

Description:

The <h1> to <h6> HTML elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest. By default, all heading elements create a block-level box in the layout, starting on a new line and taking up the full width available in their containing block.

Links:

MDN / W3S / Standard

<hgroup>

Description:

The <hgroup> HTML element represents a heading and related content. It groups a single <h1>-<h6> element with one or more <p>.

Links:

MDN / W3S / Standard

<main>

Description:

The <main> HTML element represents the dominant content of the <body> of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.

Links:

MDN / W3S / Standard

Description:

The <nav> HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.

Links:

MDN / W3S / Standard

<section>

Description:

The <section> HTML element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.

Links:

MDN / W3S / Standard

Description:

The <search> HTML element is a container representing the parts of the document or application with form controls or other content related to performing a search or filtering operation. The <search> element semantically identifies the purpose of the element's contents as having search or filtering capabilities. The search or filtering functionality can be for the website or application, the current web page or document, or the entire Internet or subsection thereof.

Links:

MDN / W3S / Standard

Text content

Use HTML text content elements to organize blocks or sections of content placed between the opening <body> and closing </body> tags. Important for accessibility and SEO, these elements identify the purpose or structure of that content.

<blockquote>

Description:

The <blockquote> HTML element indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation. A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element.

Attributes:

cite

A URL that designates a source document or message for the information quoted. This attribute is intended to point to information explaining the context or the reference for the quote.

Links:

MDN / W3S / Standard

<div>

Description:

The <div> HTML element is the generic container for flow content. It has no effect on the content or layout until styled in some way using CSS (e.g., styling is directly applied to it, or some kind of layout model like Flexbox is applied to its parent element).

As a "pure" container, the <div> element does not inherently represent anything. Instead, it's used to group content so it can be easily styled using the class or id attributes, marking a section of a document as being written in a different language (using the lang attribute), and so on.

The <div> element should be used only when no other semantic element (such as <article> or <nav>) is appropriate.

Links:

MDN / W3S / Standard

<dl/dt/dd>

Description:

The <dl> HTML element represents a description list. The element encloses a list of groups of terms (specified using the <dt> element) and descriptions (provided by <dd> elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).

The <dt> HTML element specifies a term in a description or definition list, and as such must be used inside a <dl> element. It is usually followed by a <dd> element; however, multiple <dt> elements in a row indicate several terms that are all defined by the immediate next <dd> element.

The <dd> HTML element provides the description, definition, or value for the preceding term (<dt>) in a description list (<dl>).

Example:

<p>Cryptids of Cornwall:</p>

<dl>
  <dt>Beast of Bodmin</dt>
  <dd>A large feline inhabiting Bodmin Moor.</dd>

  <dt>Morgawr</dt>
  <dd>A sea serpent.</dd>

  <dt>Owlman</dt>
  <dd>A giant owl-like creature.</dd>
</dl>

Output of code example:

Cryptids of Cornwall:

Beast of Bodmin
A large feline inhabiting Bodmin Moor.
Morgawr
A sea serpent.
Owlman
A giant owl-like creature.

Links:

<dl>
MDN / W3S / Standard

<dt>
MDN / W3S / Standard

<dd>
MDN / W3S / Standard

<figure> &
<figcaption>

Description:

The <figure> HTML element represents self-contained content, potentially with an optional caption, which is specified using the <figcaption> element. The figure, its caption, and its contents are referenced as a single unit.

The <figcaption> HTML element represents a caption or legend describing the rest of the contents of its parent <figure> element, providing the <figure> an accessible description.

Usually a <figure> is an image, illustration, diagram, code snippet, etc., that is referenced in the main flow of a document, but that can be moved to another part of the document or to an appendix without affecting the main flow.

Example:

<figure>
  <img
    src="images/elephant.jpg"
    alt="Elephant at sunset"
    width="300" />
  <figcaption>An elephant at sunset</figcaption>
</figure>

Output of code example:

Elephant at sunset
An elephant at sunset

Links:

<figure>
MDN / W3S / Standard

<figcaption>
MDN / W3S / Standard

<hr>

Description:

The <hr> HTML element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.

Historically, this has been presented as a horizontal rule or line. While it may still be displayed as a horizontal rule in visual browsers, this element is now defined in semantic terms, rather than presentational terms, so if you wish to draw a horizontal line, you should do so using appropriate CSS.

The horizontal lines separating the different sections in this document are done with the <hr> element.

Links:

MDN / W3S / Standard

Description:

The <menu> HTML element is described in the HTML specification as a semantic alternative to <ul>, but treated by browsers (and exposed through the accessibility tree) as no different than <ul>. It represents an unordered list of items (which are represented by <li> elements).

The <menu> and <ul> elements both represent an unordered list of items. The key difference is that <ul> primarily contains items for display, while <menu> represents a toolbar containing commands that the user can perform or activate.

Links:

MDN / W3S / Standard

<ol/ul/li>

Description:

The <ol> and <ul> elements both represent a list of items.

The <ol> and <ul> (or the synonym <menu>) elements may nest as deeply as desired, alternating between <ol>, <ul> (or <menu>) as needed.

<ol>

The <ol> HTML element represents an ordered list of items — typically rendered as a numbered list.

<ol> attributes:
reversed

This Boolean attribute specifies that the list's items are in reverse order. Items will be numbered from high to low.

start

An integer to start counting from for the list items. Always an Arabic numeral (1, 2, 3, etc.), even when the numbering type is letters or Roman numerals. For example, to start numbering elements from the letter "d" or the Roman numeral "iv," use start="4".

type

Sets the numbering type.

The specified type is used for the entire list unless a different type attribute is used on an enclosed <li> element.

Unless the type of the list number matters (like legal or technical documents where items are referenced by their number/letter), use the CSS list-style-type property instead.

Types:

  • a
    For lowercase letters.

  • A
    For uppercase letters.

  • i
    For lowercase Roman numerals.

  • I
    For uppercase Roman numerals.

  • 1
    For numbers. (default)

<ul>

The <ul> HTML element represents an unordered list of items, typically rendered as a bulleted list.

The <ul> element is for grouping a collection of items that do not have a numerical ordering, and their order in the list is meaningless. Typically, unordered-list items are displayed with a bullet, which can be of several forms, like a dot, a circle, or a square.

The bullet style is not defined in the HTML description of the page, but in its associated CSS, using the list-style-type property.

<li>

The <ol> HTML element is used to represent an item in a list. It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.

<li> attributes:
value

This integer attribute indicates the current ordinal value of the list item as defined by the <ol> element. The only allowed value for this attribute is a number, even if the list is displayed with Roman numerals or letters. List items that follow this one continue numbering from the value set. This attribute has no meaning for unordered lists (<ul>) or for menus (<menu>).

Links:

ol
MDN / W3S / Standard

ul
MDN / W3S / Standard

li
MDN / W3S / Standard

<p>

Description:

The <p> HTML element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.

Paragraphs are block-level elements, and notably will automatically close if another block-level element is parsed before the closing </p> tag.

Breaking up content into paragraphs helps make a page more accessible. Screen-readers and other assistive technology provide shortcuts to let their users skip to the next or previous paragraph, letting them skim content like how white space lets visual users skip around.

Links:

MDN / W3S / Standard

<pre>

Description:

The <pre> HTML element represents preformatted text which is to be presented exactly as written in the HTML file, preserving both spaces and line breaks. The text is typically rendered using a non-proportional, or monospaced font.

Whitespace inside this element is displayed as written, with one exception. If one or more leading newline characters are included immediately following the opening <pre> tag, the first newline character is stripped.

<pre> elements' text content is parsed as HTML, so if you want to ensure that your text content stays as plain text, some syntax characters, such as <, may need to be escaped using their respective character references (entities) as the browser might mix them with tags.

More on that:
HTML Entities (W3s article)
Character reference (MDN glossary article)
Entity (MDN glossary article)
List of XML and HTML character entity references (Wikipedia article)

<pre> elements commonly contain <code>, <samp>, and <kbd> elements, to represent computer code, computer output, and user input, respectively.

The code examples in this article are done with a <code> tag nested inside a <pre>, and a little bit of CSS to create a gray box.

By default, <pre> is a block-level element, i.e., its default display value is block.

A note on accessibility

It is important to provide an alternate description for any images or diagrams created using preformatted text. The alternate description should clearly and concisely describe the image or diagram's content.

People experiencing low vision conditions and browsing with the aid of assistive technology such as a screen reader may not understand what the preformatted text characters are representing when they are read out in sequence.

The aria-label attribute allows you to provide a concise, accessible descriptions. This description will be read by screen readers.

More on that:
ARIA: aria-label attribute (MDN article)

Example:

<pre role="img" aria-label="A cow saying, 'I'm an expert in my field'. The cow is illustrated using preformatted text characters.">
      ___________________________
    < I'm an expert in my field. >
      ---------------------------
          \   ^__^
           \  (oo)\_______
              (__)\       )\/\
                  ||----w |
                  ||     ||
</pre>

Output of example:

      ___________________________
    < I'm an expert in my field. >
      ---------------------------
          \   ^__^
           \  (oo)\_______
              (__)\       )\/\
                  ||----w |
                  ||     ||

Links:

MDN / W3S / Standard

Inline text semantics

Use the HTML inline text semantic to define the meaning, structure, or style of a word, line, or any arbitrary piece of text.

<a>

Description:

The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.

Content within each <a> should indicate the link's destination. If the href attribute is present, pressing the enter key while focused on the <a> element will activate it.

Attributes:

download

Causes the browser to treat the linked URL as a download. Can be used with or without a filename value:

  • Without a value, the browser will suggest a filename/extension, generated from various sources:

    • The Content-Disposition HTTP header.

    • The final segment in the URL path.

    • The media type (from the Content-Type header, the start of a data: URL, or Blob.type for a blob: URL).

  • filename
    Defining a value suggests it as the filename. / and \ characters are converted to underscores (_). Filesystems may forbid other characters in filenames, so browsers will adjust the suggested name if necessary.

href

The URL that the hyperlink points to. Links are not restricted to HTTP-based URLs — they can use any URL scheme supported by browsers:

  • Telephone numbers with tel: URLs.

  • Email addresses with mailto: URLs.

  • SMS text messages with sms: URLs.

  • Executable code with javascript: URLs.

  • While web browsers may not support other URL schemes, websites can with registerProtocolHandler().

Moreover other URL features can locate specific parts of the resource, including:

  • Sections of a page with document fragments.

  • Specific text portions with text fragments.

  • Pieces of media files with media fragments.

hreflang

Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as the global lang attribute.

ping

A space-separated list of URLs. When the link is followed, the browser will send POST requests with the body PING to the URLs. Typically for tracking.

referrerpolicy

Defines how much of the referrer to send when following the link.

Similiar to meta's referrer attribute (link to section in this document). Takes in same values.

target

Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>). The following keywords have special meanings for where to load the URL:

  • _self (default): Show the result in the current browsing context.
  • _blank: Usually a new tab, but users can configure browsers to open a new window instead.

    Setting target="_blank" on <a> elements implicitly provides the same rel behavior as setting rel="noopener" which does not set window.opener.
  • _parent: Show the result in the parent browsing context of the current one, if the current page is inside a frame. If there is no parent, acts the same as _self.
  • _top: Show the result in the topmost browsing context (the browsing context that is an ancestor of the current one and has no parent). If there is no parent, acts the same as _self.
  • _unfencedTop: Allows embedded fenced frames to navigate the top-level frame (i.e., traversing beyond the root of the fenced frame, unlike other reserved destinations). Note that the navigation will still succeed if this is used outside of a fenced frame context, but it will not act like a reserved keyword.
type

Hints at the linked URL's format with a MIME type. No built-in functionality.

Links:

MDN / W3S / Standard

<abbr>

Description:

The <abbr> HTML element represents an abbreviation or acronym.

When including an abbreviation or acronym, it best to provide a full expansion of the term in plain text on first use, along with the <abbr> to mark up the abbreviation. This informs the user what the abbreviation or acronym means.

On styling

The purpose of this element is purely for the convenience of the author and all browsers display it inline (display: inline) by default, though its default styling varies from one browser to another.

Some browsers add a dotted underline to the content of the element. Others add a dotted underline while converting the contents to small caps. Others may not style it differently than a <span> element.

To control this styling, use text-decoration and font-variant.

Attributes:

The title global attribute has a specific semantic meaning when used with the <abbr> element; it must contain a full human-readable description or expansion of the abbreviation. This text is often presented by browsers as a tooltip when the mouse cursor is hovered over the element.

Links:

MDN / W3S / Standard

<b>

Description:

The <b> HTML element is used to draw the reader's attention to the element's contents, which are not otherwise granted special importance. This was formerly known as the Boldface element, and most browsers still draw the text in boldface. However, you should not use <b> for styling text or granting importance. If you wish to create boldface text, you should use the CSS font-weight property. If you wish to indicate an element is of special importance, you should use the <strong> element.

Links:

MDN / W3S / Standard