#html#tag#seo#accessibility

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

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

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

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

An example of a breadcrumbs list following Structured Data schema.

<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
#html#tag

Break to a new line.

</br>
copy
#html#seo

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

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

Description list is ideal for more structured list data.

<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
#html#performance

DNS prefetch improves performance of loading third party resources.

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

HTML document type declaration.

<!DOCTYPE html>
copy
#html#tag

Marks the start and the end of the html document.

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

Examples of HTML entity codes.

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
#html#attribute#performance

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.

<!-- 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
#tag#meta#seo

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.

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

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

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

Number form input field.

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

copy
#html#list

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.

<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
#html#tag#responsive#media

Responsive image sources. Media attribute accepts standard media queries.

<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
#html#attribute#performance

Base64 encoded semi-transparent 1x1px png image.

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

Transparent image

copy
#html#attribute#async#performance

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

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

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.

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

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.

<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
#html#element#svg

Scalable vector graphics, rectangle examples.

<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
#html#tag

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.

<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
#html#form#input#tag

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.

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

copy
#html#list

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

<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
#html#tag

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

somereallylongemailaddress@<wbr>emailprovideraddress.com
Output:

somereallylongemailaddress@emailprovideraddress.com

copy
Sitemap Git repository