HTML Reference

https://htmlreference.io/
Admin
HTML Reference is a free guide to HTML that provides a comprehensive and visual reference for HTML...
Tokens:17,652
Snippets:500
Trust Score:9.4
Update:1 month ago
Show doc for...
Tokens:
Raw
### Width attribute

Source: https://htmlreference.io/element/video

Example of setting the width of the video in pixels.

```text
"160"
```

--------------------------------

### Height attribute

Source: https://htmlreference.io/element/video

Example of setting the height of the video in pixels.

```text
"90"
```

--------------------------------

### HTML Heading Hierarchy Example

Source: https://htmlreference.io/element/h6

This example demonstrates the use of heading levels from h1 to h6 to structure a document.

```html
<h1>My blog post</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
<h2>Introduction</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
<h3>Example</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
<h4>Why</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
<h5>Reason</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
<h6>Focus</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
```

--------------------------------

### HTML link href attribute examples

Source: https://htmlreference.io/base

Examples of absolute and relative URL paths for the href attribute.

```html
"https://htmlreference.io/css/website.css"
```

```html
"/css/website.css"
```

--------------------------------

### Basic <p> element usage

Source: https://htmlreference.io/element/p

A simple example showing how to wrap text in a paragraph element.

```html
<p>Hello World</p>
```

--------------------------------

### HTML Heading Hierarchy Example

Source: https://htmlreference.io/element/h5

This example demonstrates the use of various heading levels from h1 to h5 within an HTML document structure.

```html
<h1>My blog post</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
<h2>Introduction</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
<h3>Example</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
<h4>Why</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
<h5>Reason</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
```

--------------------------------

### HTML <h2> Heading Structure Example

Source: https://htmlreference.io/element/h2

An example showing the use of <h1> for the main title and <h2> for a section heading.

```html
<h1>My blog post</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
<h2>Introduction</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
```

--------------------------------

### Media query in sizes

Source: https://htmlreference.io/element/source

Example of using media queries within the sizes attribute.

```html
"(min-width: 800px) 1440px, 720px"
```

--------------------------------

### Using the <code> element

Source: https://htmlreference.io/element/code

Example showing how to wrap text in a <code> tag to indicate it is code.

```html
Type <code>npm install</code> in your terminal to install a project's dependencies.
```

--------------------------------

### Basic progress bar usage

Source: https://htmlreference.io/element/progress

A simple example of a progress bar using a decimal value.

```html
<progress value="0.7">Progress</progress>
```

--------------------------------

### Basic text input example

Source: https://htmlreference.io/element/input

A simple single-line text input field.

```html
<input type="text" name="first_name" placeholder="e.g. Alex">
```

--------------------------------

### Ordered list item example

Source: https://htmlreference.io/element/li

Demonstrates the use of li elements within an ordered list.

```html
<ol>
  <li>Step one</li>
  <li>Step two</li>
  <li>????</li>
  <li>PROFIT!!!</li>
</ol>
```

--------------------------------

### Superscript text example

Source: https://htmlreference.io/element/sup

Demonstrates the use of the sup element to display a superscript exponent.

```html
The "power of two" is 2<sup>n</sup> where n is an integer.
```

--------------------------------

### Media query for <picture>

Source: https://htmlreference.io/element/source

Example of a media query used in the media attribute.

```html
"(min-width: 800px)"
```

--------------------------------

### Basic HTML header structure

Source: https://htmlreference.io/element/header

An example of a <header> element containing a heading and a navigation menu.

```html
<header>
  <h1>HTML Reference</h1>
  <nav>
    <a>Home</a>
    <a>About</a>
    <a>Contact</a>
  </nav>
</header>
```

--------------------------------

### Basic meter usage

Source: https://htmlreference.io/element/meter

A simple example of a meter element with a defined value.

```html
<meter value="0.7">Progress</meter>
```

--------------------------------

### Interactive Form Example

Source: https://htmlreference.io/element/form

A comprehensive example of an HTML form containing radio buttons, text inputs, email, telephone, password fields, a select dropdown, a checkbox, and submission/reset buttons.

```html
<form action="/signup" method="post">
  <p>
    <label>Title</label><br>
    <label>
      <input type="radio" name="title" value="mr">
      Mr
    </label>
    <label>
      <input type="radio" name="title" value="mrs">
      Mrs
    </label>
    <label>
      <input type="radio" name="title" value="miss">
      Miss
    </label>
  </p>
  <p>
    <label>First name</label><br>
    <input type="text" name="first_name">
  </p>
  <p>
    <label>Last name</label><br>
    <input type="text" name="last_name">
  </p>
  <p>
    <label>Email</label><br>
    <input type="email" name="email" required>
  </p>
  <p>
    <label>Phone number</label><br>
    <input type="tel" name="phone">
  </p>
  <p>
    <label>Password</label><br>
    <input type="password" name="password">
  </p>
  <p>
    <label>Country</label><br>
    <select>
      <option>China</option>
      <option>India</option>
      <option>United States</option>
      <option>Indonesia</option>
      <option>Brazil</option>
    </select>
  </p>
  <p>
    <label>
      <input type="checkbox" value="terms">
      I agree to the <a href="/terms">terms and conditions</a>
    </label>
  </p>
  <p>
    <button>Sign up</button>
    <button type="reset">Reset form</button>
  </p>
</form>
```

--------------------------------

### Defining a term with dfn

Source: https://htmlreference.io/element/dfn

This example shows how to wrap a term in the dfn element to indicate it is being defined.

```html
The <dfn>World Wide Web</dfn> is the part of the Internet that uses the HTTP protocol.
```

--------------------------------

### Email input with label and placeholder

Source: https://htmlreference.io/element/input

Best practice for email inputs involves using a label for description and a placeholder to show an example format.

```html
<form>
  <label>Email</label><br>
  <input type="email" name="email" placeholder="e.g. alex@smith.com">
</form>
```

--------------------------------

### Unordered list item example

Source: https://htmlreference.io/element/li

Demonstrates the use of li elements within an unordered list.

```html
<p>My shopping list:</p>
<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Chocolate</li>
  <li>More chocolate</li>
</ul>
```

--------------------------------

### Using the data element for machine-readable content

Source: https://htmlreference.io/element/data

This example demonstrates how to wrap list items with the data element to provide machine-readable values for computer hardware items.

```html
<p>Computers</p>
<ul>
  <li>
    <data value="499">Mini PC</data>
  </li>
  <li>
    <data value="899">Small laptop</data>
  </li>
  <li>
    <data value="1399">Large laptop</data>
  </li>
  <li>
    <data value="2099">Desktop PC</data>
  </li>
</ul>
```

--------------------------------

### Using the <small> element for metadata

Source: https://htmlreference.io/element/small

This example demonstrates how to wrap secondary information like post dates and categories in a <small> tag within a paragraph structure.

```html
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
<small>Posted on <time datetime="2017-04-29T19:00">Apr 29</time> in <a href="/category/code">Code</a></small>
```

--------------------------------

### Define image sources with <picture>

Source: https://htmlreference.io/element/picture

This example demonstrates how to use the <picture> element to provide responsive image sources based on media queries and pixel density, with a standard <img> element as a fallback.

```html
<picture>
 <source
  media="(min-width: 800px)"
  srcset="/images/sunset-360.jpg 360w,
          /images/sunset-720.jpg 720w,
          /images/sunset-1440.jpg 1440w"
  sizes="33.3vw">
 <source
  srcset="/images/sunset-720.jpg 2x,
          /images/sunset-360.jpg 1x">
 <img src="/images/sunset.jpg" alt="Picture of a Ha Long Bay sunset">
</picture>
```

--------------------------------

### Poster image attribute

Source: https://htmlreference.io/element/video

Example of defining an image to display until the video is played.

```text
"/images/html-reference-share.png"
```

--------------------------------

### Basic definition list structure with <dd>

Source: https://htmlreference.io/element/dd

This example demonstrates how to use the <dd> element to define terms within a <dl> container.

```html
<dl>
  <dt>Web</dt>
  <dd>The part of the Internet that contains websites and web pages</dd>
  <dt>HTML</dt>
  <dd>A markup language for creating web pages</dd>
  <dt>CSS</dt>
  <dd>A technology to make HTML look better</dd>
</dl>
```

--------------------------------

### HTML <output> element calculation example

Source: https://htmlreference.io/element/output

Demonstrates using the <output> element to display the sum of two input numbers in real-time via the oninput event.

```html
<form oninput="sum.value = parseInt(a.value) + parseInt(b.value)">
  <input type="number" name="a" value="4">
  +
  <input type="number" name="b" value="7">
  =
  <output name="sum">11</output>
</form>
```

--------------------------------

### Relative URL for src attribute

Source: https://htmlreference.io/base

Example of a relative URL path for the src attribute.

```text
"/javascript/my-scripts.js"
```

--------------------------------

### Relative path for src attribute

Source: https://htmlreference.io/element/video

Example of a relative path used to define the source of the video file.

```text
"/assets/HTML 5 Video.mp4"
```

--------------------------------

### Basic <footer> element usage

Source: https://htmlreference.io/element/footer

A simple example showing the footer element containing text content.

```html
<footer>
  HTML Reference - A free reference to all HTML5 elements and attributes
</footer>
```

--------------------------------

### Basic hgroup usage

Source: https://htmlreference.io/element/hgroup

Example showing how to group an h1 and h2 element within an hgroup tag.

```html
<hgroup>
  <h1>HTML Reference</h1>
  <h2>A free guide to all HTML elements and attributes.</h2>
</hgroup>
```

--------------------------------

### Basic <dialog> element usage

Source: https://htmlreference.io/element/dialog

A simple example of a <dialog> element containing text content.

```html
<dialog>
  This is a dialog box!
</dialog>
```

--------------------------------

### Datetime attribute format

Source: https://htmlreference.io/element/time

Example of a valid time string value for the datetime attribute.

```text
"2017-04-29T19:00"
```

--------------------------------

### Width descriptor in srcset

Source: https://htmlreference.io/element/source

Example of using width descriptors in the srcset attribute.

```html
"/images/sunset-360.jpg 360w,  
 /images/sunset-720.jpg 720w,  
 /images/sunset-1440.jpg 1440w"
```

--------------------------------

### Label for attribute example

Source: https://htmlreference.io/element/label

Demonstrates the 'for' attribute where clicking the label focuses the input with the matching 'id'.

```html
<label for="last_name">Last name</label>
<br>
<input type="text" name="last_name" id="last_name">
```

--------------------------------

### Relative path for src attribute

Source: https://htmlreference.io/element/audio

Example of a relative path used within the src attribute to define the audio file source.

```text
"/assets/Hal.mp3"
```

--------------------------------

### Create an autocomplete list with datalist

Source: https://htmlreference.io/element/datalist

This example demonstrates how to link an input element to a datalist using the list attribute, providing a dropdown of South American countries.

```html
<label>South American countries</label><br>
<input list="countries" placeholder="Type a country">

<datalist id="countries">
  <option value="Argentina">
  <option value="Bolivia">
  <option value="Brazil">
  <option value="Chile">
  <option value="Colombia">
  <option value="Ecuador">
  <option value="Guyana">
  <option value="Paraguay">
  <option value="Peru">
  <option value="Suriname">
  <option value="Uruguay">
  <option value="Venezuela">
</datalist>
```

--------------------------------

### href attribute absolute URL

Source: https://htmlreference.io/element/link

Example of using an absolute URL for the href attribute.

```text
"https://htmlreference.io/css/website.css"
```

--------------------------------

### Paragraph with longer text

Source: https://htmlreference.io/element/p

An example demonstrating the <p> element containing a longer string of text.

```html
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
```

--------------------------------

### Define column groups with colgroup

Source: https://htmlreference.io/element/colgroup

This example demonstrates how to use the colgroup element to apply background colors to specific columns within a table.

```html
<table>
  <colgroup>
    <col style="background-color: hotpink;">
    <col span="2" style="background-color: springgreen;">
  </colgroup>
  <tr>
    <td>John Lennon</td>
    <td>Rhythm Guitar</td>
    <td>1960–1969</td>
  </tr>
  <tr>
    <td>Paul McCartney</td>
    <td>Bass</td>
    <td>1960–1970</td>
  </tr>
  <tr>
    <td>George Harrison</td>
    <td>Lead Guitar</td>
    <td>1960–1970</td>
  </tr>
  <tr>
    <td>Ringo Starr</td>
    <td>Drums</td>
    <td>1960–1970</td>
  </tr>
</table>
```

--------------------------------

### Define a table caption

Source: https://htmlreference.io/element/caption

This example demonstrates how to use the <caption> element to provide a title for a table containing member information.

```html
<table>
  <caption>The Beatles</caption>
  <tr>
    <td>John Lennon</td>
    <td>Rhythm Guitar</td>
  </tr>
  <tr>
    <td>Paul McCartney</td>
    <td>Bass</td>
  </tr>
  <tr>
    <td>George Harrison</td>
    <td>Lead Guitar</td>
  </tr>
  <tr>
    <td>Ringo Starr</td>
    <td>Drums</td>
  </tr>
</table>
```

--------------------------------

### Basic aside element usage

Source: https://htmlreference.io/element/aside

An example showing the aside element used alongside a main content block to provide supplementary information about an author.

```html
<main>
  <h1>My blog post</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
  <p>etc.</p>
</main>

<aside>
  <h3>About the author</h3>
  <p>Frontend Designer from Bordeaux, currently working for Improbable in sunny London.</p>
</aside>
```

--------------------------------

### Interactive image map with area elements

Source: https://htmlreference.io/element/area

This example demonstrates how to use the <map> element with multiple <area> tags to define clickable regions on an image.

```html
<img src="/images/world-continents.png" width="320" height="160" orgwidth="320" orgheight="160" usemap="#world-continents">
<map name="world-continents">
  <area title="North America" href="https://en.wikipedia.org/wiki/North_America" shape="poly" coords="48,89,67,69,77,49,140,0,68,0,6,10,4,31,16,69">
  <area title="South America" href="https://en.wikipedia.org/wiki/South_America" shape="poly" coords="48,88,61,74,119,99,95,160,66,159">
  <area title="Europe" href="https://en.wikipedia.org/wiki/Europe" shape="poly" coords="124,49,145,46,158,50,187,43,198,6,146,1,115,21">
  <area title="Africa" href="https://en.wikipedia.org/wiki/Africa" shape="poly" coords="121,53,140,47,169,51,186,77,196,80,188,137,156,136,138,97,118,86">
  <area title="Asia" href="https://en.wikipedia.org/wiki/Asia" shape="poly" coords="166,50,184,77,201,74,215,91,258,108,263,87,283,74,297,8,192,3,191,29,187,46,170,42">
  <area title="Australia" href="https://en.wikipedia.org/wiki/Australia_(continent)" shape="poly" coords="257,107,263,85,314,89,316,137,294,151,249,132,248,114">
</map>
```

--------------------------------

### Ruby annotation with rt and rp elements

Source: https://htmlreference.io/element/rt

This example demonstrates how to use the rt element to provide pronunciation for characters, with rp elements providing fallback parentheses for browsers that do not support ruby annotations.

```html
<ruby>
  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
  字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
```

--------------------------------

### Basic article element structure

Source: https://htmlreference.io/element/article

An example of an article element containing a header, a section for the main content, and a footer with metadata.

```html
<article>
  <header>
    <h3>
      <a href="/my-blog-post">My blog post</a>
    </h3>
  </header>
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
  </section>
  <footer>
    <small>
      Posted on <time datetime="2017-04-29T19:00">Apr 29</time> in <a href="/category/code">Code</a>
    </small>
  </footer>
</article>
```

--------------------------------

### HTML h3 Heading Structure

Source: https://htmlreference.io/element/h3

An example showing the hierarchical structure of a document using h1, h2, and h3 headings.

```html
<h1>My blog post</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
<h2>Introduction</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
<h3>Example</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
```

--------------------------------

### Using <rtc> for ruby annotations

Source: https://htmlreference.io/element/rtc

This example demonstrates how to use the <rtc> element to group ruby text within a <ruby> annotation structure.

```html
<ruby>
   <rb>旧</rb>
   <rb>金</rb>
   <rb>山</rb>
   <rt>jiù</rt>
   <rt>jīn</rt>
   <rt>shān</rt>
   <rtc>San Francisco</rtc>
</ruby>
```

--------------------------------

### HTML Table with <td> Elements

Source: https://htmlreference.io/element/td

A comprehensive example demonstrating the use of <td> elements within a table structure, including the use of colspan and rowspan attributes.

```html
<table>
  <thead>
    <tr>
      <th colspan="4">World Cup winners</th>
    </tr>
    <tr>
      <td colspan="2">Location</td>
      <td colspan="2">Score</td>
    </tr>
    <tr>
      <td>Continent</td>
      <td>Country</td>
      <td>First</td>
      <td>Total</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="3">South America</td>
      <td>Uruguay</td>
      <td>1930</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Brazil</td>
      <td>1958</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Argentina</td>
      <td>1978</td>
      <td>2</td>
    </tr>
    <tr>
      <td rowspan="5">Europe</td>
      <td>Italy</td>
      <td>1934</td>
      <td>4</td>
    </tr>
    <tr>
      <td>Germany</td>
      <td>1954</td>
      <td>4</td>
    </tr>
    <tr>
      <td>England</td>
      <td>1966</td>
      <td>1</td>
    </tr>
    <tr>
      <td>France</td>
      <td>1998</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Spain</td>
      <td>2010</td>
      <td>1</td>
    </tr>
  </tbody>
</table>
```

--------------------------------

### HTML link element example

Source: https://htmlreference.io/base

The link element connects the current page to external resources like stylesheets.

```html
<link rel="stylesheet" type="text/css" href="https://htmlreference.io/css/website.css">
```

--------------------------------

### Using the <br> element for line breaks

Source: https://htmlreference.io/element/br

This example demonstrates how to insert line breaks within a paragraph of text using the <br> tag.

```html
Lorem ipsum dolor sit<br>amet, consectetur adipiscing elit. Donec viverra<br>nec<br>nulla vitae mollis.
```

--------------------------------

### Displaying subscript text with <sub>

Source: https://htmlreference.io/element/sub

Use the <sub> element to render text as a subscript, as shown in this example for the chemical formula of carbon dioxide.

```html
The formula of carbon dioxide is CO<sub>2</sub>.
```

--------------------------------

### Embed external resource with <object>

Source: https://htmlreference.io/element/object

An example of using the <object> element to embed a Flash file, including fallback content for browsers that do not support the plugin.

```html
<object type="application/x-shockwave-flash" data="/assets/golf.swf" width="800" height="360">
  <param name="movie" value="/assets/golf.swf">
  <param name="wmode" value="transparent">
  <p>You need to enable Flash to view this content.</p>
</object>
```

--------------------------------

### Basic kbd usage

Source: https://htmlreference.io/element/kbd

Demonstrates how to use the kbd element to represent keyboard shortcuts.

```html
To save, press <kbd>Ctrl + S</kbd>.
```

--------------------------------

### Basic usage of the samp element

Source: https://htmlreference.io/element/samp

Demonstrates how to use the <samp> element to mark up sample output from a command-line interface.

```html
I entered <code>git push</code> and the terminal printed out <samp>Everything up-to-date</samp>.
```

--------------------------------

### HTML h4 Heading Structure

Source: https://htmlreference.io/element/h4

An example showing the h4 element used within a hierarchical document structure alongside other heading levels.

```html
<h1>My blog post</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
<h2>Introduction</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
<h3>Example</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
<h4>Why</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
```

--------------------------------

### Basic usage of the <q> element

Source: https://htmlreference.io/element/q

Demonstrates how to wrap a short quotation within a sentence using the <q> tag and the cite attribute.

```html
He looks around and says <q cite="https://en.wikiquote.org/wiki/The_Terminator">I'll be back</q>.
```

--------------------------------

### Using the <strong> element

Source: https://htmlreference.io/element/strong

Demonstrates how to wrap text in the <strong> element to indicate strong importance.

```html
HTML should only be used to write <strong>content</strong>, and keep CSS for <strong>styling</strong> the web page.
```

--------------------------------

### Basic <option> usage in <select>

Source: https://htmlreference.io/element/option

Defines a list of options within a select dropdown menu.

```html
<select name="country">
  <option value="Argentina">Argentina</option>
  <option value="Bolivia">Bolivia</option>
  <option value="Brazil">Brazil</option>
  <option value="Chile">Chile</option>
  <option value="Colombia">Colombia</option>
  <option value="Ecuador">Ecuador</option>
  <option value="Guyana">Guyana</option>
  <option value="Paraguay">Paraguay</option>
  <option value="Peru">Peru</option>
  <option value="Suriname">Suriname</option>
  <option value="Uruguay">Uruguay</option>
  <option value="Venezuela">Venezuela</option>
</select>
```

--------------------------------

### Using the <var> element

Source: https://htmlreference.io/element/var

Demonstrates how to wrap a variable name in the <var> tag to semantically define it within text.

```html
The value of <var>x</var> is 12.
```

--------------------------------

### Responsive img with srcset and sizes

Source: https://htmlreference.io/element/img

Uses srcset and sizes attributes to provide multiple image sources for different viewport widths.

```html
<!-- For responsive images, use srcset and sizes -->

<img src="/images/sunset-360.jpg"
  alt="Picture of a Ha Long Bay sunset"
  srcset="/images/sunset-360.jpg 360w,
          /images/sunset-720.jpg 720w,
          /images/sunset-1440.jpg 1440w>"
  sizes="(min-width: 800px) 720px, 360px">
```

--------------------------------

### Basic <a> element usage

Source: https://htmlreference.io/element/a

Creates a standard hyperlink to a specified URL.

```html
<a href="https://htmlreference.io">HTML Reference</a>
```

--------------------------------

### Basic <details> usage

Source: https://htmlreference.io/element/details

A standard implementation of the <details> element containing a <summary> and hidden paragraph content.

```html
<details>
  <summary>Read more</summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
</details>
```

--------------------------------

### Highlight text with <mark>

Source: https://htmlreference.io/element/mark

Demonstrates how to use the <mark> element to highlight a specific word within a sentence.

```html
We use HTML5 to write <mark>content</mark> on the Web.
```

--------------------------------

### Basic figcaption usage

Source: https://htmlreference.io/element/figcaption

Demonstrates how to use the figcaption element within a figure to provide a caption for an image.

```html
<figure>
  <img src="/images/html-reference-logo.png" alt="HTML Reference logo">
  <figcaption>The HTML Reference logo</figcaption>
</figure>
```

--------------------------------

### Using the em element for emphasis

Source: https://htmlreference.io/element/em

Demonstrates how to wrap text in the <em> tag to apply emphasis.

```html
HTML should only be used to write <em>content</em>, and keep CSS for <em>styling</em> the web page.
```

--------------------------------

### Basic <section> usage

Source: https://htmlreference.io/element/section

A standard implementation of a section containing a heading and a paragraph.

```html
<section>
  <h2>Section title</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
</section>
```

--------------------------------

### img with pixel density descriptor

Source: https://htmlreference.io/element/img

Demonstrates using a 2x pixel density descriptor in the srcset attribute.

```html
<img src="/images/sunset.jpg"
     srcset="/images/sunset-@2x.jpg 2x"
     alt="Picture of a Ha Long Bay sunset">
```

--------------------------------

### Using the selected attribute

Source: https://htmlreference.io/element/option

The selected attribute pre-selects an option when the page loads.

```html
<select>
  <option>Monday</option>
  <option>Tuesday</option>
  <option>Wednesday</option>
  <option>Thursday</option>
  <option selected>Friday</option>
  <option>Saturday</option>
  <option>Sunday</option>
</select>
```

--------------------------------

### Using the <cite> element

Source: https://htmlreference.io/element/cite

Demonstrates how to wrap the title of a cited work within the <cite> tag.

```html
If you want to learn HTML and CSS, go read <cite>MarkSheet.io</cite>!
```

--------------------------------

### Common meta tag configurations

Source: https://htmlreference.io/base

Standard metadata tags for character encoding, browser compatibility, viewport scaling, and theme color definition.

```html
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#ffffff">
```

--------------------------------

### Basic h1 heading usage

Source: https://htmlreference.io/element/h1

Displays the standard syntax for defining a level one heading in HTML.

```html
<h1>My blog post</h1>
```

--------------------------------

### Link an image to a map using usemap

Source: https://htmlreference.io/element/map

The usemap attribute on an img element references the name attribute of a map element to create an overlay.

```html
<img usemap="#world-continents">
```

--------------------------------

### Using the width attribute

Source: https://htmlreference.io/element/embed

Defines the width of the container in pixels.

```html
"150"
```

--------------------------------

### Using the src attribute

Source: https://htmlreference.io/element/embed

Specifies the source URL for the external content, such as a third-party video.

```html
"https://www.youtube.com/embed/kmk43_2dtn0"
```

--------------------------------

### Basic HTML Table Structure

Source: https://htmlreference.io/element/table

A standard table implementation including thead, tfoot, and tbody sections to organize tabular data.

```html
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Instrument</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Instrument</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>John Lennon</td>
      <td>Rhythm Guitar</td>
    </tr>
    <tr>
      <td>Paul McCartney</td>
      <td>Bass</td>
    </tr>
    <tr>
      <td>George Harrison</td>
      <td>Lead Guitar</td>
    </tr>
    <tr>
      <td>Ringo Starr</td>
      <td>Drums</td>
    </tr>
  </tbody>
</table>
```

--------------------------------

### Basic usage of the del element

Source: https://htmlreference.io/element/del

Demonstrates how to use the del element to indicate deleted text, optionally including a cite attribute to link to an explanation.

```html
To write abbreviations, use the <del cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/acronym">acronym</del> <ins>abbr</ins> HTML element.
```

--------------------------------

### HTML base target _self

Source: https://htmlreference.io/element/base

Opens links in the current tab.

```html
"_self"
```

--------------------------------

### Using the type attribute

Source: https://htmlreference.io/element/embed

Specifies the MIME type of the embedded application.

```html
"mp4"
```

--------------------------------

### Basic style element usage

Source: https://htmlreference.io/element/style

Defines a container to add CSS within a web page.

```html
<style type="text/css">
  .important {
    color: red;
  }
</style>
```

--------------------------------

### Multiple progress bars with max attribute

Source: https://htmlreference.io/element/progress

Demonstrates multiple progress bars with specific max values to represent different completion states.

```html
<progress value="71" max="100">Alex</progress><br>
<progress value="16" max="100">Brandon</progress><br>
<progress value="40" max="100">Charlotte</progress><br>
<progress value="92" max="100">Sam</progress>
```

--------------------------------

### Basic iframe implementation

Source: https://htmlreference.io/element/iframe

A standard iframe element embedding a URL with fallback text for browsers that do not support iframes.

```html
<iframe src="https://cssreference.io">
  Fallback text for non-supported browsers
</iframe>
```

--------------------------------

### Basic nav element usage

Source: https://htmlreference.io/element/nav

A standard implementation of the nav element containing a list of anchor tags for site navigation.

```html
<nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </nav>
```

--------------------------------

### Basic usage of the <time> element

Source: https://htmlreference.io/element/time

Displays a time on a 24-hour clock using the datetime attribute for machine-readable formatting.

```html
The game starts at <time datetime="2017-04-29T19:00">19:00</time>.
```

--------------------------------

### Basic HTML document structure with body

Source: https://htmlreference.io/element/body

Shows the standard placement of the <body> element within an HTML document structure.

```html
<!DOCTYPE html>
<html>
  <head>
    <!-- Document metadata -->
  </head>
  <body>
    <!-- Document content -->
  </body>
</html>
```

--------------------------------

### Override text direction with bdo

Source: https://htmlreference.io/element/bdo

Demonstrates using the bdo element with the dir attribute set to rtl to display text in reverse order.

```html
The word <bdo dir="rtl">Hello</bdo> is "Hello" spelled backwards.
```

--------------------------------

### Basic <embed> element usage

Source: https://htmlreference.io/element/embed

Defines a container for an external application, such as a video.

```html
<embed src="https://www.youtube.com/embed/kmk43_2dtn0" width="640" height="480">
```

--------------------------------

### HTML base target _blank

Source: https://htmlreference.io/element/base

Opens links in a new browsing context, typically a new tab.

```html
"_blank"
```

--------------------------------

### Absolute URL for src

Source: https://htmlreference.io/element/source

Using an absolute URL for the src attribute.

```html
"https://htmlreference.io/images/traffic.jpg"
```

--------------------------------

### Displaying preformatted HTML code

Source: https://htmlreference.io/element/pre

Using the <pre> element to display HTML code blocks while preserving formatting and escaping special characters.

```html
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Hello World&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>
```

--------------------------------

### noframes element usage

Source: https://htmlreference.io/element/noframes

Demonstrates the use of the noframes element within a frameset to provide fallback text for browsers that do not support frames.

```html
<frameset cols="50%, 50%">
  <frame src="https://htmlreference.io/element/frameset">
  <frame src="https://htmlreference.io/element/frame">
  <noframes>This browser does not support framesets.</noframes>
</frameset>
```

--------------------------------

### Group options with <optgroup>

Source: https://htmlreference.io/element/optgroup

Organizes a list of countries into groups labeled 'South America' and 'Europe'.

```html
<select>
  <optgroup label="South America">
    <option>Uruguay</option>
    <option>Brazil</option>
    <option>Argentina</option>
  </optgroup>
  <optgroup label="Europe">
    <option>Italy</option>
    <option>Germany</option>
    <option>England</option>
    <option>France</option>
    <option>Spain</option>
  </optgroup>
</select>
```

--------------------------------

### HTML base target _top

Source: https://htmlreference.io/element/base

Opens links in the top browsing context, or the current tab if no parent exists.

```html
"_top"
```

--------------------------------

### Basic fieldset usage

Source: https://htmlreference.io/element/fieldset

A standard implementation of a fieldset grouping an email input and a button within a form.

```html
<form action="/subscribe" method="post">
  <fieldset>
    <legend>Subscribe to the Newsletter</legend>
    <input type="email" name="email">
    <button>Ok</button>
  </fieldset>
</form>
```

--------------------------------

### MIME type for JavaScript files

Source: https://htmlreference.io/base

The standard MIME type value for .js files.

```text
"text/javascript"
```

--------------------------------

### Define the title element

Source: https://htmlreference.io/element/title

Use the title element to set the text that appears in the browser tab for the document.

```html
<title>The title element - HTML Reference</title>
```

--------------------------------

### Basic audio element usage

Source: https://htmlreference.io/element/audio

Embeds an audio clip into a web page using the src attribute and enables browser controls.

```html
<audio src="/assets/Hal.mp3" controls></audio>
```

--------------------------------

### Meter with range attributes

Source: https://htmlreference.io/element/meter

A collection of meters demonstrating the use of min, low, value, high, and max attributes to indicate different status levels.

```html
<meter min="0" low="16" value="71" high="92" max="100">Alex</meter><br>
<meter min="0" low="16" value="16" high="92" max="100">Brandon</meter><br>
<meter min="0" low="16" value="40" high="92" max="100">Charlotte</meter><br>
<meter min="0" low="16" value="92" high="92" max="100">Sam</meter>
```

--------------------------------

### Standard HTML document structure

Source: https://htmlreference.io/element/pre

A basic HTML document structure used as a reference for preformatted display.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
  </body>
</html>
```

--------------------------------

### img with width descriptors

Source: https://htmlreference.io/element/img

Uses width descriptors in the srcset attribute to allow the browser to calculate pixel density based on defined sizes.

```html
<img src="/images/sunset-360.jpg"
  alt="Picture of a Ha Long Bay sunset"
  srcset="/images/sunset-360.jpg 360w,
          /images/sunset-720.jpg 720w,
          /images/sunset-1440.jpg 1440w>"
  sizes="(min-width: 800px) 720px, 360px">
```

--------------------------------

### Basic address element usage

Source: https://htmlreference.io/element/address

Displays contact information using the address element with line breaks.

```html
<address>
  Infinite Loop,<br>
  Cupertino, CA<br>
  95014, USA
</address>
```

--------------------------------

### HTML base element usage

Source: https://htmlreference.io/element/base

Defines the base URL for all relative links in the document. Place this element inside the <head> section.

```html
<base href="https://htmlreference.io">
<a href="/element/base">The HTML base element</a>
<!-- This will be an absolute link to https://htmlreference.io/element/base -->
```

--------------------------------

### Basic <video> element usage

Source: https://htmlreference.io/element/video

Embeds a video clip into a web page using the src attribute and enables browser controls.

```html
<video src="/assets/HTML 5 Video.mp4" controls></video>
```

--------------------------------

### Underline text with <u>

Source: https://htmlreference.io/element/u

Wraps text in the <u> element to apply an underline style.

```html
Hello <u>World</u>
```

--------------------------------

### Using the bdi element

Source: https://htmlreference.io/element/bdi

Wraps text in a bdi element to isolate its directionality from the surrounding content.

```html
The word <bdi>مرحبا</bdi> means "Hello" in Arabic
```

--------------------------------

### HTML base target _parent

Source: https://htmlreference.io/element/base

Opens links in the parent browsing context, or the current tab if no parent exists.

```html
"_parent"
```

--------------------------------

### Using the label attribute

Source: https://htmlreference.io/element/option

The label attribute provides a display label that replaces the option's inner text.

```html
<select>
  <option value="south-africa" label="Republic of South Africa">South Africa</option>
</select>
```

--------------------------------

### Bold text with <b>

Source: https://htmlreference.io/element/b

Displays the usage of the <b> element to bold the word 'World' within a sentence.

```html
Hello <b>World</b>
```

--------------------------------

### Mailto protocol href attribute

Source: https://htmlreference.io/element/a

Uses the mailto protocol to open the user's email client.

```html
"mailto:alex@smith.com"
```

--------------------------------

### type attribute text/css value

Source: https://htmlreference.io/element/link

Specifies that the linked resource is a CSS file.

```text
"text/css"
```

--------------------------------

### External script reference

Source: https://htmlreference.io/base

Defines a container for an external script using the src attribute.

```html
<script src="https://htmlreference.io/javascript/my-scripts.js"></script>
```

--------------------------------

### HTML base href attribute

Source: https://htmlreference.io/element/base

Sets the base target for all links using an absolute URL.

```html
"https://htmlreference.io"
```

--------------------------------

### Basic img element

Source: https://htmlreference.io/element/img

A standard implementation of an image tag requiring a source URL and alternative text.

```html
<img src="/images/sunset.jpg" alt="Picture of a Ha Long Bay sunset">
```

--------------------------------

### Using the cite attribute

Source: https://htmlreference.io/element/del

The cite attribute defines the URL where the reason for the deletion is explained. It requires a valid URL.

```html
"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/acronym"
```

--------------------------------

### rel attribute stylesheet value

Source: https://htmlreference.io/element/link

Specifies that the linked resource is a stylesheet.

```text
"stylesheet"
```

--------------------------------

### Using the <s> element for strikethrough text

Source: https://htmlreference.io/element/s

Demonstrates how to wrap text in the <s> tag to indicate it is no longer accurate.

```html
Alex is <s>37</s> 38 years old.
```

--------------------------------

### Using the datetime attribute

Source: https://htmlreference.io/element/del

The datetime attribute defines when the deletion occurred. It requires a valid datetime string.

```html
"2017-10-14T12:00:00.001-04:00"
```

--------------------------------

### Redirect page meta tag

Source: https://htmlreference.io/base

Configures the browser to immediately redirect to a specified URL using the refresh meta attribute.

```html
<!-- Redirect instantly to https://cssreference.io -->
<meta http-equiv="refresh" content="0; url=https://cssreference.io">
```

--------------------------------

### MIME type definition

Source: https://htmlreference.io/element/source

Defining the MIME type for the source.

```html
"image/jpg"
```

--------------------------------

### Button type attribute options

Source: https://htmlreference.io/element/button

Defines the behavior of the button, such as submitting or resetting a form.

```html
"submit"
```

```html
"reset"
```

--------------------------------

### Basic <button> element

Source: https://htmlreference.io/element/button

A standard clickable button used to submit a form.

```html
<button>
  Submit form
</button>
```

--------------------------------

### Loudest volume setting

Source: https://htmlreference.io/element/audio

Sets the volume attribute to 1.0, making the audio track play at the loudest volume.

```text
"1.0"
```

--------------------------------

### blockquote element usage

Source: https://htmlreference.io/element/blockquote

Basic implementation of a blockquote element with a cite attribute pointing to the source URL.

```html
<blockquote cite="https://en.wikiquote.org/wiki/Marie_Curie">
  Be less curious about people and more curious about ideas.
</blockquote>
```

--------------------------------

### type attribute text/html value

Source: https://htmlreference.io/element/link

Specifies that the linked resource is an HTML document.

```text
"text/html"
```

--------------------------------

### Basic figure element usage

Source: https://htmlreference.io/element/figure

A standard implementation of the figure element containing an image.

```html
<figure>
  <img src="/images/html-reference-logo.png" alt="HTML Reference logo">
</figure>
```

--------------------------------

### rel attribute next value

Source: https://htmlreference.io/element/link

Specifies that the linked resource is the next page in a sequence.

```text
"next"
```

--------------------------------

### rel attribute icon value

Source: https://htmlreference.io/element/link

Specifies that the linked resource is a favicon.

```text
"icon"
```

--------------------------------

### Silent volume setting

Source: https://htmlreference.io/element/audio

Sets the volume attribute to 0.0, making the audio track silent.

```text
"0.0"
```

--------------------------------

### HTML link type attribute values

Source: https://htmlreference.io/base

Common MIME types for the type attribute.

```html
"text/css"
```

```html
"text/html"
```

--------------------------------

### Checkbox input with label

Source: https://htmlreference.io/element/input

Wrapping a checkbox in a label increases the clickable area for the user.

```html
<label>
  <input type="checkbox">
  I accept the terms and conditions
</label>
```

--------------------------------

### Italicize text with <i>

Source: https://htmlreference.io/element/i

Use the <i> element to wrap text that should be displayed in italics.

```html
Hello <i>World</i>
```

--------------------------------

### Basic noscript usage

Source: https://htmlreference.io/element/noscript

Displays a simple text message when JavaScript is disabled.

```html
<noscript>Please enable JavaScript.</noscript>
```

--------------------------------

### Using the value attribute

Source: https://htmlreference.io/element/option

The value attribute defines the data sent to the server when the form is submitted.

```html
<select>
  <option value="south-africa">South Africa</option>
</select>
```

--------------------------------

### Relative URL href attribute

Source: https://htmlreference.io/element/a

Defines a URL relative to the root domain.

```html
"/element/div"
```
Tokens:
Raw