10 lesser known HTML tricks

Ever felt like your HTML could use a little extra sparkle? In this quick read, I’m showing you 10 lesser-known HTML tricks that could be the game-changers your projects need.

01. Spellcheck on an input field

This attribute allows a spellcheck on an input field. It can be used on input fields, text areas and editable fields.


  <input type="text" name="fname" spellcheck="true">

02. <meter> element for progress bars

The <meter> element creates a gauge or progress bar. You can set the value attribute to control the percentage.


  <meter> value="0.6">60%</meter>

03. <wbr> element for word breaks

The <wbr> (Word Break Opportunity) element specifies where in a text it would be ok to add a line break.


  <p>ThisIsALongWord<wbr>BrokenOverTwoLines</p>

04. Custom data attribute

You can use data-* attributes to store custom data private to the page or application.


   <div data-custom="value"> This div has a custom data attribute. </div>

05. Responsive images with srcset

The srcset attribute allows you to provide multiple image sources based on different resolutions.


<img src="image.jpg" alt="Description" srcset="image.jpg 1024w, image-2x.jpg 2048w" sizes="(max-width: 767px) 100vw, (max-width: 1023px) 50vw, 33.3vw">

06. Preload attribute for resource loading

The preload attribute is used to specify what resources the page will need very soon when loading it.


<link rel="preload" href="styles.css" as="style">

07. Lang attribute for language specification

The lang attribute in the <html> tag is used to declare the language of the document.


<html lang="en">

08. The hidden attribute

The hidden attribute hides items by default.


<p hidden>This paragraph is hidden.</p>

09. The content editable attribute

The content editable attribute makes any HTML element editable by the user.


<p contenteditable="true">This paragraph is editable.</p>

10. Details and summary for content

The <details> and <summary> elements allow you to create a dropdown that shows the hidden content in the <p> tag.


<details>
  <summary>Click to expand</summary>
  <p>Hidden content goes here.</p>
</details>

Like this post?