9 Cool Things You Can Do With Just HTML

Photo by nicole duncan on Unsplash

1. Picture

The <picture> tag gives web developers more flexibility in specifying image resources. The most common use of the picture element is for responsive design.

The <picture> element contains two tags: one or more <source> tags and one <img> tag.

The browser will look for the first <source> element that matches the media query, which is got by the srcset attribute. If none of the media queries is matched, the browser will use the <img> element.

Example:

<picture>
   <source media="(min-width:1024px)" srcset="dog-big.jpg">
   <source media="(min-width:465px)" srcset="dog-small.jpg">
   <img src="cat.jpg" alt="Flowers" style="width:auto;">
 </picture>

Img cred Alvan Nee & Richard Brutyo

2. Color Picker

An <input> element with a type of “color” provides a UI element that lets the user specify a color.

The default value is #000000 (black).

Color Picker HTML

Example:

<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">

If you want a default color that is not black you just need to set the value. The value must be in seven-character hexadecimal notation.

Color Picker HTML

Example:

<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor" value="#e66465">

3. Title Tooltip

A nice easy way to do a tooltip over some text by just specifying the title attribute.

HTML Tooltip

Example:

<span title=”See, this is the tooltip. :)”>Move your mouse over me!</span>

4. Content Editable

Maybe not the most useful one with some JavaScript but still a neat trick.

By using some JavaScript event handlers, you can transform your web page into a full and fast rich text editor.

Content Editable (HTML)

Example:

<div contenteditable="true">
  User can edit this div!
</div>

5. Refresh the browser

Refresh the browser with a meta tag.

Place the below in <head> tag and the page will refresh every 3 seconds:

<meta http-equiv="refresh" content="3">

The content attribute defines how often in seconds you want to refresh. You can also do redirect to another site. The below will redirect to google.com in 3 seconds:

<meta http-equiv="refresh" content="3; url=https://google.com/">

6. Datalist

The <datalist> tag is used to provide an "autocomplete" feature for <input> elements. You will see a drop-down list of pre-defined options as you type.

<datalist>

Example:

<input list="animals" name="animal" id="animal">

<datalist id="animals">
    <option value="Cat">
    <option value="Dog">
    <option value="Chicken">
    <option value="Cow">
    <option value="Pig">
  </datalist>

The <datalist> id attribute (see bold items above) must be equal to the list attribute of the <input>, this is what binds them together.

7. Progress

The <progress> element represents the completion progress of a task.

<progress> HTML element

Example:

<label for="course">Course completion:</label>
<progress id="course" value="67" max="100"></progress> 67%

8. Meter

The <meter> element fines a scalar measurement within a known range or a fractional value.

<meter> HTML element

Example:

<label for="disk_g">Disk usage G:</label>
<meter id="disk_g" value="2" min="0" max="10">2 out of 10</meter>

<br>

<label for="disk_h">Disk usage H:</label>
<meter id="disk_h" value="0.7">70%</meter>

Meter vs progress

progress to mark up the completion rate/degree of progress of an “in progress” task through a progress bar, use progress element.

meter to represent a gauge use meter element.

You can think like that: progress = dynamic ; meter = static

9. Output

The <output> is a container element into which a user site can inject the results of a calculation or the outcome of a user action.

HTML element

Example:

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
      <input type="number" id="b" name="b" value="10" /> +
      <input type="number" id="a" name="a" value="10" /> =
      <output name="result" for="a b">20</output>
 </form>

for attribute a space-separated list of other elements' ids, indicating that those elements contribute to the input values.

form The <form> element to associate the output with. The value of this attribute must be the id of a <form> in the same document.

If you the attribute is not set (like above) the <output> is associated with its ancestor <form> element, if any.

Conclusion

Hopefully, you've learnt some new elements which you can show off to your colleagues. Having a wide range of HTML elements you're comfortable with can be so useful, a lot of developers jump straight to JavaScript and CSS when it's not really needed

Hope you've enjoyed reading!