Useful native HTML tips

  • avatar
  • 476 Views
  • 6 mins read

Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

I will share with you some very useful native HTML tips that does not need any CSS nor JavaScript.

Lazy loading images

Set the loading attribute to lazy to defer the loading of the image until the user scrolls to them.

<img src='image.png' loading='lazy' alt='image'>

Email, call and SMS links

Create direct links to send communications.

<a href="mailto:{email}?subject={subject}&body={message}">
Send us an email
</a>

<a href="tel:{number}">
Call us
</a>

<a href="sms:{number}?body={message}">
Send us a message
</a>

Native progress bars

Use the <meter> element to display a progress bar.

<style>
label {
display: block;
}

meter {
width: 300px;
}
</style>

<label for="value1">Low</label>
<meter id="value1" min="0" max="100" low="25" high="75"optimum="80" value="20"></meter>

<label for="value2">Medium</label>
<meter id="value2" min="0" max="100" low="25" high="75"optimum="80" value="50"></meter>

<label for="value3">High</label>
<meter id="value3" min="0" max="100" low="25" high="75"optimum="80" value="90"></meter>

Result:

html_progress_bar_native.png

Native search

Use the <datalist> element to display suggestions for your search.

<input list="items">

<datalist id="items">
<option value="option X">
<option value="option Y">
<option value="test 1">
<option value="test 2">
<option value="test 3">
</datalist>

Result:

html_suggestions_native.png

Native slider

Set input element type to range  to create sliders.

<style>
label {
display: block;
}
</style>

<label for="volume">Speed: </label>
<input type="range" id="speed" name="speed" min="0" max="20">

Result:

html_native_slider.png

Native accordion

Use the <details> element to create a native HTML accordion.

<details>
<summary>
Click me to see full text
</summary>

<p>
Full text goes here...
</p>
</details>

Result:

html_native_accordion_closed.png

html_native_accordion_open.png

Highlighted text

Simply use the <mark> tag to highlight text.

<p>Some text with <mark>highlight</mark></p>

Result:

html_native_highlight.png

Downloadable files

Instead of navigating to the file you can mark to download it.

<a href='path/to/file' download>
Download
</a>


Enjoy!

 Join Our Newsletter

Get the latest news and popular articles to your inbox every month

0 Comments

Leave a Reply

Your email address will not be published.