10 HTML5 Features, Tips, and Techniques you Must Know

Top 10 HTML5 Features, Tips and Techniques

HTML5 has been around for quite some time now. But are you really making the most off it? Check out these 10 Top HTML5 Features, Tips, and Techniques and see for yourself if you’re using HTML5 to its full potential.

If you’re new to Angular, you might be interested in understanding the Angular Project Structure. If you’re just interested in Angular overall, take a look at our other Angular Related Articles.

1. New Doctype

Are you still using the old, pesky, impossible-to-remember XHTML Doctype? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I hope not, but if you’re, you, my friend, do not have to suffer anymore. Switch to the new HTML5 doctype. You’re Welcome!

<!DOCTYPE html>

2. The <figure> Element

Consider the following markup for displaying an image with some label

<img src="path/to/image" alt="About image" />
<p>Image of Mars. </p>

There, unfortunately, isn’t any easy or semantic way to associate the caption, wrapped in a paragraph tag, with the image element itself. HTML5 rectifies this, with the introduction of the <figure> element. When combined with the <figcaption> element, we can now semantically associate captions with their image counterparts.

<figure> <img src="path/to/image" alt="About image" />
    <figcaption>
        <p>This is an image of something interesting. </p>
    </figcaption>
</figure>


3. The semantic <header>, <footer> and <main>

Are you still writing your HTML documents like this?

<div id="header"> ...</div>
<div id="main"> ...</div>
<div id="footer"> ...</div>

Divs, by nature, have no semantic structure — even after an id is applied. Now, with HTML5, we have access to the <header> and <footer> elements. The mark-up above can now be replaced with:

<header> ...</header>
<main> ...</main>
<footer> ...</footer>

Try not to confuse these elements with the “header” and “footer” of your website. They simply refer to their container. As such, it makes sense to place, for example, meta information at the bottom of a blog post within the footer element. The same holds true for the header.

4. <audio> Element

We don’t have to rely upon third-party plugins in order to render audio anymore. HTML5 now offers the <audio> element. Well, at least, ultimately, we won’t have to worry about these plugins. 

<audio autoplay="autoplay" controls="controls">
    <source src="file.ogg" />
    <source src="file.mp3" /> 
  <a>Download this file.</a>
</audio>

5. <video> Element

Much like the <audio> element, we have an HTML5 <video> element as well in the new browsers!  The HTML Video element (<video>) embeds a media player that supports video playback into the document. You can use <video> for audio content as well, but the <audio> element may provide a more appropriate user experience.

<video controls preload>
    <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
    <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
    <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>
</video>

6. Support for Regular Expressions in input fields

How often have you found yourself writing some quickie Regular Expression to verify a particular textbox? Thanks to the new pattern attribute, we can insert a regular expression directly into our markup.

<form action="" method="post">
    <label for="username">Create a Username: </label>
    <input type="text" name="username" id="username" 
           placeholder="4 <> 10" pattern="[A-Za-z]{4,10}" autofocus required>
    <button type="submit">Go </button>
</form>

If you’re moderately familiar with regular expressions, you’ll be aware that this pattern: [A-Za-z]{4,10} accepts only upper and lowercase letters. This string must also have a minimum of four characters, and a maximum of ten. 

If you want to learn regular expressions in a very interactive way, I recommend this awesome online tool –  https://www.regextester.com/

7. The Data attributes

We now officially have support for custom attributes within all HTML elements. While, before, we could still get away with things like:

<h1 id=someId customAttribute=value> Thank you, Tony. </h1>

 …the validators would kick up a fuss! But now, as long as we preface our custom attribute with “data,” we can officially use this method. If you’ve ever found yourself attaching important data to something like a class attribute, probably for JavaScript usage, this will come as a big help!

<div id="myDiv" data-custom-attr="My Value"> Bla Bla </div>

You can use Javascript to interact with the elements using these data attributes and even can use them in CSS files as selectors

8. Create sliders with range input

HTML5 introduces the new range type of input.

<input type="range">

Most notably, it can receive min, max, step, and value attributes, among others. Though only Opera seems to support this type of input right now fully, it’ll be fantastic when we can actually use this!

9. No More `Types` for Scripts and Links

You possibly still add the type attribute to your link and script tags.

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>

This is no longer necessary. It’s implied that both of these tags refer to stylesheets and scripts, respectively. As such, we can remove the type attribute altogether.

<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>

10. Make content editable

The new browsers have a nifty new attribute that can be applied to elements, called contenteditable.
As the name implies, this allows the user to edit any of the text contained within the element, including its children. There are a variety of uses for something like this, including an app as simple as a to-do list, which also takes advantage of local storage.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>untitled</title>
</head>

<body>
    <h2> To-Do List </h2>
    <ul contenteditable="true">
        <li> Break mechanical cab driver. </li>
        <li> Drive to abandoned factory
            <li> Watch video of self </li>
    </ul>
</body>

</html>

I hope you find these interesting. Let me know your thoughts in the comments section.

Be sure to follow us on the social media to get notified about the latest posts as soon as they’re published

Leave a comment

Your email address will not be published. Required fields are marked *