HTML One-Liners That Are Insanely Useful

Saúl Bustamante Bernabe IS 4°D

Basic Accordion

Content Editable

Text alignment as per the language

Text direction

Word Break Opportunity

Download the link instead of navigating

Download

A simple tooltip to your elements

+ info

Tooltip

HTML is a more powerful tool than many developers realize.

Get more accomplished

HTML

IS Insanely Useful

Set a base URL

Saúl Bustamante Bernabe IS 4°D

Spellcheck

Controlling Context Menu and Paste

Base URL

Load imag es on-demand

Lazy loading

Add captions to your video

Add Captions

HTML

IS Insanely Useful

You can load images on-demand(also called lazy loading) by setting the loading attribute to ‘lazy’. This is a simple but very effective optimization technique that loads only the section that is visible to the user and the other images are loaded later, as per the user’s need.

You can make any content editable by setting the contenteditable attribute to true. It doesn’t matter if it’s a div or a p , it will become editable. Moreover, you can also use the isContentEditable property to find whether a certain element is editable or not.

If you make calls to a common domain various times on your website, you can use the <base> element to set a base URL as shown in the code snippet provided above. Now the actual value of src in the image element is “https://www.w3schools.com/images/stickman.gif”.

Nobody likes when HTML breaks words where it’s not supposed to. Using <wbr> , you can easily the points(opportunities) where it is okay to break words. This is useful when the word is too long and there’s a good chance that the browser might break it at the incorrect place.

You can listen to events like when they use right-clicks or try to paste content and handle these events with oncontextmenu and onpaste attributes. If you don’t want users to be able to paste onto some field like password, you can write onpaste=”return false” on that input field and users won’t be able to paste there. Similarly, oncontextmenu fires whenever the user right-clicks on that element.

HTML and CSS are the bread-and-butter of the frontend development world. While being proficient in CSS and JavaScript is vital to creating fabulous websites, folks often underestimate the work you can accomplish with just a plain old HTML file. From lazy loading images to adding captions to videos, HTML is capable of a lot of things that most developers aren’t fully aware of.

The spellcheck attribute, when set to true, tells the browser that the user input in this element has to be checked for grammar and spelling mistakes. It is a handy attribute that facilitates users to write correct and error free content.

No CSS or JavaScript is needed for adding a simple tooltip to your HTML elements. With the title attribute, you can easily add a tooltip to provide extra information to your users.

With just HTML, you can add captions to your video files using the <track> element. Use the src attribute to point to the subtitles file and use the srclang attribute to set the language.

You can create a very basic yet easy accordion by using the details and summary semantic elements. Wrap your accordion element with details element and for the title use the summary element. Lastly, use the p paragraph element to write the main content of the accordion.

The download attribute is incredibly helpful when you want your users to download the link instead of navigating to the file. Moreover, you can also set the filename of the file your user will download.

With dir=”auto” , the browser will change the text alignment as per the language of the content. This is incredibly useful when you are dealing with languages that don’t follow the left to right like English. A potential place to use this attribute is in social media chat apps.