5 things you didn't know you could do with only HTML

Published April 06, 2020, 1 min read, tagged as: javascripthtmlcode

I've been seeing finding a lot of cool things that HTML can do by itself recently and decide to compile a list of a few of them (width code of course) to demonstrate what i've found.

Some of these won't work on your browser. I've only tested on the latest version of Chrome. To find out if compatibility, check caniuse.com.

Dialog Boxes

Dialog boxes are popups that open over your content. Up to now i've had to make do with "alerts" or using frameworks like Twitter Bootstrap to create modals. HTML actually has a <dialog /> element we can use and style out of the box.

Code

<dialog open="true">
  <p>Add some content</p>
</dialog>

Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Autocompletes

The first time I learnt how to create an autocomplete element was when I first learnt the Twitter Bootstrap framework. It's amazing to see that you can now just use pure HTML to achieve the same thing. The best thing is that it's such a simple change to convert an existing <input /> field into an autocomplete field.

Code

<label for="colors">Choose a color:</label>

<input type="text" list="colorList" id="colors" name="colors" placeholder="Select a color..." />

<datalist id="colorList">
  <option value="Green" />
  <option value="Red" />
  <option value="Blue" />
  <option value="Orange" />
  <option value="Purple" />
</datalist>

Demo

Accordions

Another element I first saw with the Twitter Bootstrap framework, I realied accordions are a great way to display a lot of information on a page without creating walls of boring text. We can now do the same thing with the <section /> element.

Code

<section>
  <details open>
    <summary>First Section</summary>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </details>

  <details>
    <summary>Second Section</summary>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </details>
</section>

Demo

First Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Second Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Date Pickers

When I was learning HTML, I only knew about a few of different input types, like text and radio. Now there's A BUNCH of others, like date, color, number and email. Give them a try!

Code

<label for="date">Select a date:</label>
<input type="date" name="date" for="date" id="date" />

Demo

Text Highlights and Edits

With all the interactivity we have on the web today, tt's crazy to think that HTML was originally created to just create and view documents. Sometimes you have to take it back to the basics and show a document. But what happens if you want to show updates? <mark />, <ins /> and <del /> to the rescue.

Code

<p>
  Ut enim <mark>ad minim veniam</mark>, eu fugiat <ins>nulla</ins> <del>pariatur</del>.
</p>

Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

I tweet about this type of thing a lot. If you enjoyed this article, you may enjoy following me.

March 18, 2020, 2 min read
javascriptcodeweb components

A Review of Web Components in 2020

According to Google, somewhere between 5% and 8% of all page loads today use one or more web components. That makes web components one of…

Read more

World Class Teams Create World Class Products

A Guide for Tech Leaders Navigating Growth and Change.

I'm writing a book! I share:

  • My framework to define and achieve engineering goals so you can move the needle in your organization and keep everyone rowing in the same direction
  • How to retain top tech talent and build high-performing teams
  • How to release great products rapidly with a structured Software Development Lifecycle (SDLC)
  • How to manage yourself and avoid common pitfalls that challenge many leaders
  • How to manage multiple teams and learn how to manage managers
  • Proven tactics to deliver better customer experience every time, even in fast paced environments

Released September 30, 2020

Subscribe to the mailing list to stay up to date

© 2020 Hashtag Coder
Built with Gatsby