7 HTML Tricks You Should Know About

November 1, 2020

Hey there queens,

It can be easy to skim through the basic HTML elements that are normally used in websites and focus more on the styling and interactivity aspects of web design.

However, if you thrust a little deeper, you will find HTML can make your life a lot easier. So without further ado, zip up and let’s dive in!

Conditionally loading resources with media queries

Did you know that when loading resources, you can provide a media type or query? If you do, then only if the medias are true will the resource be loaded. For example:

<link href="print.css" rel="stylesheet" media="print" />
<link href="mobile.css" rel="stylesheet" media="all" />
<link
  href="desktop.css"
  rel="stylesheet"
  media="screen and (min-width: 600px)"
/>
<link
  href="highres.css"
  rel="stylesheet"
  media="screen and (min-resolution: 300dpi)"
/>

Now if someone visits your site on a desktop or mobile browser, you can save them some loading time by only rendering the CSS requried for that screen size.

Totally fetch! 💁‍♀️

Preloading content

You most commonly link to your CSS files like so:

<link rel="stylesheet" href="styles/main.css" />

However, if our styles are preloaded, they are available as soon as they are required for page rendering later.

<link rel="preload" href="style.css" as="style" />
<!-- ... -->
<link rel="stylesheet" href="style.css" />

The benefits are clearer the later resources are discovered on the page. For example:

Resources indicated from within CSS, such as fonts or images.
JavaScript resources, such as JSON, imported scripts, or web workers.
Larger images and video files.

Let’s look at a few types of content that can be preloaded. There are many others that you can try, so feel free to read more about it here.

Cross-origin fetches

<link
  rel="preload"
  href="fonts/cicle_fina-webfont.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>
<link
  rel="preload"
  href="fonts/zantroke-webfont.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>

Including media

<link
  rel="preload"
  href="bg-image-narrow.png"
  as="image"
  media="(max-width: 600px)"
/>
<link
  rel="preload"
  href="bg-image-wide.png"
  as="image"
  media="(min-width: 601px)"
/>

The window.matchMedia method can be used to conditionally render different elements on the webpage like so:

var mediaQueryList = window.matchMedia('(max-width: 600px)');
var header = document.querySelector('header');

if (mediaQueryList.matches) {
  header.style.backgroundImage = 'url(bg-image-narrow.png)';
} else {
  header.style.backgroundImage = 'url(bg-image-wide.png)';
}

Another useful media query to check out is prefers-color-scheme.

Who needs Tinder when you can match with media queries, amirite?

Deferring script execution

In order to ensure that scripts don't block parsing and assessment of DOM content, you will normally add your script tags at the body's end. However, by means of the 'defer' attribute, we can tell the browser that the script should be executed after the parsing of the document is complete, and prior to firing the DOMContentLoaded event.

<head>
  <!-- ... -->
  <script defer src="main.js"></script>
</head>

The keyboard input element

Now, in the past you have probably given someone else instructions on how to type commands in a terminal, find items in a menu, or use some keyboard shortcuts for an application you use.

This is wheere '' can help you. This tag can be used to show a span of inline text indicating text user input from a keyboard, voice input, or any other text input device. If that sounds a little confusing, check out these examples.

<!-- basic example -->
<p>
  Use the command <kbd>help mycommand</kbd> to view documentation for the
  command "mycommand".
</p>

<!-- representing keystrokes -->
<p>
  You can also create a new document using the keyboard shortcut
  <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd
  >.
</p>

Nesting a <kbd> element inside a <samp> element represents input that has been echoed back to the user by the system.

<p>
  If a syntax error occurs, the tool will output the initial command you typed
  for your review:
</p>
<blockquote>
  <samp><kbd>custom-git ad my-new-file.cpp</kbd></samp>
</blockquote>

Nesting a <samp> element inside a <kbd> element represents input which is based on text presented by the system, such as the names of menus and menu items, or the names of buttons displayed on the screen.

<p>
  To create a new file, choose the menu option
  <kbd
    ><kbd><samp>File</samp></kbd
    >⇒<kbd><samp>New Document</samp></kbd></kbd
  >.
</p>
<p>
  Don't forget to click the <kbd><samp>OK</samp></kbd> button to confirm once
  you've entered the name of the new file.
</p>

Addresses and time periods

Okay, so you may already know about these, but I wanted to add them in here just to be thorough. Whenever you’re working with addresses, dates or times, you should use the <address> and <time> tags.

<p>Contact the author of this page:</p>

<address>
  <a href="mailto:bunno@uhoppity.com">bunno@uhoppity.com</a><br />
  <a href="tel:+13115552368">(311) 555-2368</a>
</address>

<p>
  The Cure will be celebrating their 40th anniversary on
  <time datetime="2018-07-07">July 7</time> in London's Hyde Park.
</p>

<p>
  The concert starts at <time datetime="20:00">20:00</time> and you'll be able
  to enjoy the band for at least <time datetime="PT2H30M">2h 30m</time>.
</p>

While we're on the subject, did you know you can keep tabs on your man at all times? Address and time, calls and texts — you name it! Just install this tracker on his phone while he’s asleep.

Grouping and autocompleting inputs

Alright, so forms are a pretty big deal and there are a lot of libraries out there to help make working with them much easier. However, there are a few ways HTML can assist with organising and selecting elements.

Let’s say you want to give users a long list of options to choose from — say, a list of puppers cuz you know you want that Jeffree Star chihuahua cuteness. Now, using a radio button for such would be overkill. But you could use a <select> tag in tandem with <optgroup> to group the puppers by size.

<label for="pupper-select">Choose a pupper:</label>
<select id="pupper-select">
  <optgroup label="Large">
    <option>German Shepherd</option>
    <option>Siberian Husky</option>
    <option>Samoyed</option>
  </optgroup>
  <optgroup label="Small">
    <option>Labradoodle</option>
    <option>Chow Chow</option>
    <option>Beagle</option>
  </optgroup>
  <optgroup label="Teacup">
    <option>Pomeranian</option>
    <option>Chihuahua</option>
    <option>Yorkshire Terrier</option>
  </optgroup>
</select>

Another neat trick is autocompleting inputs. I led a project a few months back where someone decided to try and implement a custom component for autocompleting inputs. It was a buggy experience and not that great. Something that could have saved them a lot of time is the built-in <datalist> element. It contains a set of options that represent permissible or recommended options available to choose from.

<label for="ice-cream-choice">Choose a flavour:</label>
<input
  list="ice-cream-flavours"
  id="ice-cream-choice"
  name="ice-cream-choice"
/>

<datalist id="ice-cream-flavours">
  <option value="Chocolate"></option>
  <option value="Coconut"></option>
  <option value="Mint"></option>
  <option value="Strawberry"></option>
  <option value="Vanilla"></option>
</datalist>

Now that input element will pull from the datalist defined beneath it and allow autocompletion from those options.

wow. so much wow.

Web components

Want to build an app using JavaScript but without all of the framework bloat? Fortunately, web components are now supported by default in most browsers. Let’s see how they work!

<template id="purple-text">
  <style>
    p {
      color: purple;
    }
  </style>
  <p>Hello World!</p>
</template>

This <template> tag will be hidden in the browser by default.

It won’t appear in your page until you grab a reference to it and then append it to the DOM, using something like the following:

let template = document.getElementById('purple-text');
let templateContent = template.content;
document.body.appendChild(templateContent);

Although contrived, you can already start to see how this could be useful and encourage DRYer code. Now let’s define a web component that uses our template as the content of its shadow DOM.

customElements.define(
  'purple-text',
  class extends HTMLElement {
    constructor() {
      super();

      const template = document.getElementById('purple-text');
      const clone = template.content.cloneNode(true);

      this.attachShadow({ mode: 'open' }).appendChild(clone);
    }
  }
);

Once set up, you can then use it by adding it anywhere in the HTML document.

<purple-text></purple-text>

You can also make it dynamic by using the <slot> element. Let’s start by updating our <p> tag in the template.

<template id="purple-text">
  <style>
    p {
      color: purple;
    }
  </style>
  <!-- <p>Hello World!</p> -->
  <p><slot name="text">This is the default text.</slot></p>
</template>

And now when we use the component elsewhere we can add our own content!

<purple-text>
  <span slot="text">Let's have some different text!</span>
</purple-text>

Ain’t that neat? Definitely make use of this in one of your side projects if you wanna blow someone’s socks off.

Conclusion

If you've made it to this point, then twerk it hunty. You now know more than the average front-end developer. Thank you for taking the time to read my post; it was my first attempt.

Also, please consider sharing it with a friend if it helped you learn anything new today. Happy coding!