Home / HTML5 / Work Like a Pro with These HTML5 Hacks
5 minutes read
157 Views
Blog post thmbnail html5

HTML5 is an appealing language for a beginner or even a non-coder to learn. Because let’s face it, you’re dealing with HTML whenever you engage with a website.

When it comes to simple modifications or optimizing basic site elements, knowing how to navigate your way around the code can save you a lot of time (and even money).

So, if you have some spare time, here’s a list of ten essential HTML hacks that you can learn in a matter of hours.

1- To cache media resources locally, use the FileSystem API.

HTML5 FileSystem API was created as a replacement for AppCache in order to enable dynamic asset caching. But did you know you can use it to facilitate interactions with files on the user’s local device as well?

For example, you could add the following functionality:

  • Copy files into a local sandbox and upload them in chunks with a persistent uploader. After connection failures, browser crashes, and other issues, uploads can restarted.
  • For media-heavy apps like video games, audio players, and photo editors, enable local cache.
  • Create an offline mode to view content such as offline video, email attachments, and messages, among other things.

Note: Chrome is the only browser that supports the FileSystem API.

2- Use the “Pattern” Attribute to automate form validation.

Validation of forms is critical for website security and a positive user experience. So, let’s make it easier for users to fill in the proper values in any form on your website.

In HTML5, there are a number of new input types that come with built-in validation:

  • ‘email’
  • ‘url’
  • ‘tel’

However, the majority of issues arise when users are required to submit data that is not specified by standard inputs (e.g. a username containing special characters). The “pattern” characteristic comes in handy at this point.

Using Regular Expressions, Pattern allows you to create custom rules for validating form input (RegEx). RegEx specifies which expressions the value of the <input> the element will be compared against.

An example of how to add a new rule is shown below. For example, you might want to define that passwords must be no longer than 15 characters long and contain only lowercase letters:

<form action="/action_page.php">

Password: <input type="password" name="pw" pattern="[a-z].{1,15,}">

<input type="submit">

</form>

You can also send the recipient a personalised message explaining why their password didn’t match. Simply add another brief line to personalise the pop-up message in that case:

<form action="/action_page.php">
   <label>Password: </label>
   <input type="password" name="pw" pattern="[a-z].{1,15,}" title="One to fifteen characters, lowercase only".>>
   <input type="submit">
</form>

3- Emmet is a great tool for writing HTML5 code.

Emmet is a useful text editor plug-in that can help you speed up your HTML/CSS development processes. The tool use selector syntax similar to CSS, allowing you to construct a variety of abbreviations for typical HTML code elements.

Here’s an illustration. If you type the following:

div#header>h1.logo>a{website}

You will receive:

<div id="header">
    <h1 class="logo"><a href="">website</a></h1>
</div>

You can utilize the cheat sheet’s existing combos or construct your own for any HTML tags, then add them to your text editor by pressing Tab or Ctrl+E.

4- For a more optimised video delivery, use the HTML5 <Video> Tag.

The video tag allows you to easily incorporate a media player that supports video playback into your website.

You have the option of:

  • Use getUserMedia() or WebRTC to enable a live stream from a webcam.
  • Using the src property, play a locally hosted video: <video src="file.avi" />

You’ll also need to define ‘controls’ for your video (such as play, pause, and volume), otherwise, the user will be left with none. This is an example of code:

<video width="768" height="432" autoplay>

<source src="video.mp4" type="video/mp4">

</video>

You may also try experimenting with the following attributes to improve the watching experience even more:

  • disablePictureInPicture: The browser is prevented from providing a Picture-in-Picture context menu or automatically requesting Picture-in-Picture.
  • loop: When the video approaches the end, the browser is prompted to automatically replay it.
  • muted: mutes the audio in the video automatically.
  • poster: This option allows you to use a custom picture as the video thumbnail. Otherwise, the browser will display the video’s initial frame.
  • preload: informs the browser about the parameters that will provide the greatest user experience. This one can be set to none (no preload required); metadata will be fetched just for video metadata; auto: urges the user to download the entire video, even if they do not intend to watch it. This attribute takes precedence over the autoplay attribute.

5- 5- Improve Image Styling with the <Picture> Element

The <picture> tag aids in the presentation of your photographs.

It’s most typically used for:

  • Styling:Describe how media should be shown in specific situations (e.g. load an alternative image version for smaller displays). This is crucial when it comes to building responsive designs.
  • Speed: based on the user’s display, indicate which picture size should be loaded.
  • Browser support:supply a variety of picture formats for normal display in all browsers.
<picture>

<source media="(min-width: 846px)" srcset="img_1.jpg">

<source media="(min-width: 300 px)" srcset="img_2.jpg">

<img src="img_3.jpg" alt="logo">
</picture>

Two more sub-elements are included in the <picture> tag:

  • <source>: specifies medifor media elements, specifies media resources.
  • <img>: An image is defined via the <img> tag.

Add the following properties to the source> element to provide extra styling options:

  • srcset (required): Use srcset (needed) to specify the image’s destination URL.
  • media (similar to a media query): For each <source> element, the user agent assesses a condition called media.
  • sizes: the width descriptor is specified.
  • type: MIME type definition is provided by type.

The <img> the element ensures that images are shown correctly in browsers that don’t support the <picture> element.

Wrap Up

Now you have it: 5 new HTML5 tips and methods to help you create a website that is faster, more user-friendly, and appealing. Just remember to back up your website before you start experimenting!

Read More:


Post author

A bright, talented, ambitious and self-motivated 💻 Freelancer, ⌨ Programmer, JavaScript and Typescript lover 📍

  Tweet It


Leave a Reply

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