HTML cheatsheet

Anchor tag. Add the title attribute to improve SEO and screen reader support. Id attribute works as an in-page anchor.

#html#tag#seo#accessibility 
<a href="#" title="Anchor title" name="Anchor name" id="page-anchor">Anchor text</a>
 copy

Use this code to autoplay embedded video. Modern browsers will only autoplay muted videos. The 'playsinline' property is required for Safari iOS if you don't want it to play in the fullscreen overlay.

#html#tag#video 
<video autoplay="autoplay" playsinline muted loop poster="/path/to/poster.jpg">
    <source src="/path/to/video.mp4" type="video/mp4">
    <source src="/path/to/video.webm" type="video/webm">
</video>
 copy

Add this meta tag to stop most crawlers from indexing the page.

#html#tag#meta#seo 
<meta name="robots" content="noindex">
 copy

An example of a breadcrumbs list following Structured Data schema.

#html#breadcrumbs 
<ol vocab="https://schema.org/" typeof="BreadcrumbList">
    <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage" href="https://shortcode.dev/">
            <span property="name">Home</span>
        </a>›
        <meta property="position" content="1">
    </li>
    <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage" href="https://shortcode.dev/html-cheatsheet">
            <span property="name">HTML</span>
        </a>›
        <meta property="position" content="2">
    </li>
    <li property="itemListElement" typeof="ListItem">
        <span property="name">Code example</span>
        <meta property="position" content="3">
    </li>
</ol>
 copy

Break to a new line.

#html#tag 
</br>
 copy

Canonical tag informs search engines which version of the page is primary. This is useful if the page is being served under multiple domains.

#html#seo 
<link rel="canonical" href="https://shortcode.dev"/>
 copy
#html#tag 
<!-- Some comment -->
 copy

Provides data hints for the input fields similarly to autocomplete.

#html#tag 
<input type="text" placeholder="Select a shape" list="shapes">
<datalist id="shapes">
    <option value="Square"></option>
    <option value="Circle"></option>
    <option value="Oval"></option>
    <option value="Rectangle"></option>
</datalist>
Output:

 copy

Description list is ideal for more structured list data.

#html#list 
<dl>
    <dt>Colors</dt>
    <dd>Blue</dd>
    <dd>Red</dd>
    <dd>Yellow</dd>    
    <dt>Shapes</dt>
    <dd>Circle</dd>
    <dd>Square</dd>
    <dd>Triangle</dd>
</dl>
Output:
Colors
Blue
Red
Yellow
Shapes
Circle
Square
Triangle
 copy

Provides a native solution to toggle content. You can use 'open' attribute to capture state of the element.

#html#tag 
<style>
    #details-element{
        padding: 1rem;
        border: 1px solid;
        margin: 1rem;
        border-radius: 0.4rem;
        cursor: pointer;
    }

    #details-element[open] {
        border-color: lightgreen !important;
    }
</style>
<details id="details-element">
    <summary>Show more details</summary>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi tempore rerum possimus. Ipsum temporibus consequuntur saepe aliquid quis deserunt quisquam a odit voluptatum eveniet?</p>
</details>
Output:
Show more details

Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi tempore rerum possimus. Ipsum temporibus consequuntur saepe aliquid quis deserunt quisquam a odit voluptatum eveniet?

 copy

DNS prefetch improves performance of loading third party resources.

#html#performance 
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
 copy

HTML document type declaration.

#html#tag 
<!DOCTYPE html>
 copy

Marks the start and the end of the html document.

#html#tag 
<html>
    <!-- html content -->
</html>
 copy

Examples of HTML entity codes.

#html 
1. &amp; 2. &lt; 3. &gt; 4. &laquo; 5. &raquo; 6. &copy; 7. &reg;  8. &trade; 9. &pound; 10. &euro;
Output:
  1. & 2. < 3. > 4. « 5. » 6. © 7. ® 8. ™ 9. £ 10. €
 copy

This HTML attribute can be added to image or iframe tags and provides native browser support for lazy loading resources. You can set it to one of these modes lazy|eager|auto. Check browser support before using.

#html#attribute#performance 
<!-- On the image tag -->
<img src="./assets/icon-144x144.png" loading="lazy" alt="Some image"/>

<!-- In the picture element with source sets -->
<picture>
    <source media="(min-width: 1024px)" srcset="./assets/icon-512x512.png">
    <source srcset="./assets/icon-144x144.png 1x, ./assets/icon-512x512.png 2x">
    <img src="./assets/icon-64x64.png" loading="lazy">
</picture>
Output:

Some image

 copy

The content of this tag shows in the search results below the title. Suggested character count is 160. It carries very little value for the search engines.

#tag#meta#seo 
<meta name="description" content="Page description, maximum 160 characrers.">
 copy

Common responsive website viewport settings. You can include and change the following options - width, scale and zoom.

#html#tag#meta#responsive 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 copy

Number form input field.

#html#form#input#tag 
<input type="number" name="label-name" value="1" placeholder="Number field placeholder" tabindex="0">
Output:

 copy

Ordered list example. Use "type" attribute for different list item prefixes; type="1" - numbers; type="A" - uppercase letters; type="a" - lowercase letters; type="I" - uppercase roman numbers; type="i" - lowercase roman numbers.

#html#list 
<ol>
    <li>Blue</li>
    <li>Red</li>
    <li>Yellow</li>
    <li>Green</li>
</ol>

<ol type="I">
    <li>Uppercase roman style number list item 1</li>
    <li>Uppercase roman style number list item 2</li>
    <li>Uppercase roman style number list item 3</li>
</ol>
Output:
  1. Blue
  2. Red
  3. Yellow
  4. Green
  1. Uppercase roman style number list item 1
  2. Uppercase roman style number list item 2
  3. Uppercase roman style number list item 3
 copy

Responsive image sources. Media attribute accepts standard media queries.

#html#tag#responsive#media 
<picture>
    <source media="(min-width: 1024px)" srcset="desktop-image.jpg">
    <source media="(min-width: 768px)" srcset="tablet-image.jpg">
    <img src="default-image.jpg" alt="Default mobile image">
</picture>
 copy

Base64 encoded semi-transparent 1x1px png image.

#html#attribute#performance 
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8Ww8AAj8BXkQ+xPEAAAAASUVORK5CYII=" width="20" height="20" alt="Transparent image"/>
Output:

Transparent image

 copy

Preload assets asynchronously. Can be used for preloading scripts, stylesheets, images, fonts and other asset types.

#html#attribute#async#performance 
<link rel="preload" href="style.css" as="style">
 copy

Front-end solution for the user input validation. Submitting the form with an empty field will trigger the validation. NOTE. Front-end validate should not be the only way of checking the submitted data. You do need to check and validate all data on the back-end of the application.

#html#form#input#attribute 
<form action="">
    <input type="text" placeholder="First name" required>
    <button type="submit">Submit</button>
</form>
Output:
 copy

Scalable vector graphics, path examples. The capital "L" uses absolute coordinates in the context of the viewBox whereas lowercase "l" uses relative values. For vertical and horizontal path movements use "v" and "h" respectively.

#html#element#svg 
<svg width="150" height="150" viewBox="0 0 100 100" style="border: 1px solid #CCC">
    <path d="M 10 10 L 90 90" stroke="#EB6300" /> <!-- Absolute coordinates -->
</svg>

<svg width="150" height="150" viewBox="0 0 100 100" style="border: 1px solid #CCC">
    <path d="M 10 10 l 90 90" stroke="#EB6300" /> <!-- Relative coordinates -->
</svg>

<svg width="150" height="150" viewBox="0 0 100 100" style="border: 1px solid #CCC">
    <path d="M 10 10 h 10 v 10 h 10 v 10 h 10 v 10 h 10 v 10 h 10 v 10 h 10 v 10 h 10 v 10 h 10 v 10" stroke="#EB6300" fill="none" />
    <!-- Horizontal and vertical path movements -->
</svg>
Output:
 copy

Scalable vector graphics, rectangle examples.

#html#element#svg 
<svg width="150" height="150" viewBox="0 0 100 100" style="border: 1px solid #CCC">
    <rect width="30" height="50" x="10" y="20" fill="#EB6300" />
</svg>

<svg width="150" height="150" viewBox="0 0 100 100" style="border: 1px solid #CCC">
    <rect width="30" height="50" x="10" y="20" fill="none" stroke="#EB6300" />
</svg>

<svg width="150" height="150" viewBox="0 0 100 100">
    <rect width="100" height="100" x="0" y="0" fill="#EB6300" />
</svg>
Output:
 copy

Template tag lets you create a HTML partial. By default it doesn't get rendered into the page. Instead, you can use Javascript to manipulate it and inject dynamic content.

#html#tag 
<style>
    .arial{ font-family: Arial }
    .arial-black{ font-family: Arial Black }
    .comic-sans{ font-family: Comic Sans MS }
    .impact{ font-family: Impact }
    .lucida-sans{ font-family: Lucida Sans Unicode }

    .font{ margin-bottom: 24px; }  
    .font__title{
        padding: 6px 12px;
        text-transform: capitalize;
    }
</style>

<!-- Simple template that serves as a base for our dynamic component -->
<template id="font-template">
    <div class="font">
        <div class="font__title">Title</div>
    </div>
</template>
 
<div class="container">
    <div id="font-gallery"><!-- Component will be injected here using Javascript --></div>
</div>

<script>
    // Get template element
    const fragment = document.getElementById('font-template');
    // This array contains the data we will loop through
    const fonts = [
        { family: 'arial' },
        { family: 'arial-black' },
        { family: 'comic-sans' },
        { family: 'impact' },
        { family: 'lucida-sans' }
    ];

    fonts.forEach(font => {
        // Create an instance of the template content
        const instance = document.importNode(fragment.content, true);
        // Add relevant content to the template
        instance.querySelector('.font').classList.add(font.family);
        instance.querySelector('.font__title').innerHTML = font.family + " font family";
        // Append the instance to the DOM
        document.getElementById('font-gallery').appendChild(instance);
    });
</script>
Output:
 copy

Input field example. You can change type attribute to control what data values can be inserted by the user and the behavior of the input.

#html#form#input#tag 
<input type="text" name="label-name" value="Default value" placeholder="Field placeholder" tabindex="0">
Output:

 copy

Unordered list example. Use CSS "list-style-type" tag for different list item prefixes; disc, bullet, circle, square or none.

#html#list 
<ul>
    <li>Blue</li>
    <li>Red</li>
    <li>Yellow</li>
    <li>Green</li>
</ul>

<ul style="list-style-type: square">
    <li>Square list item style</li>
</ul>
Output:
  • Blue
  • Red
  • Yellow
  • Green
  • Square list item style
 copy

Word break represented by the tag allows to break a string in a predefined point.

#html#tag 
somereallylongemailaddress@<wbr>emailprovideraddress.com
Output:

somereallylongemailaddress@emailprovideraddress.com

 copy