Pure HTML Widgets for your Web Application

Look ma, no JS! Less-known HTML elements that you should start using…

Pure HTML Capabilities

This post is a compilation of UI interfaces that you can build using just standard HTML elements and CSS support offered by most browsers.

To make it easy for you to follow, each section starts with the HTML snippet that is being discussed, sample screenshots of the corresponding rendering of the code and a codepen link to actual working code that you can play with.

Tip: Use Bit to easily share and reuse components across projects. It’s the fastest way to make components available between teams and apps. Try it.

Component Discovery and Collaboration · Bit

React spinners with Bit: choose, play, use

1. Accordion

Using the Details and Summary tags it is possible to create collapsible accordion with no JavaScript code. Check out the Codepen post below for an interactive demo.

<details>
<summary>Languages Used</summary>
<p>This page was written in HTML and CSS. The CSS was compiled from SASS. Regardless, this could all be done in plain HTML and CSS</p>
</details>
<details>
<summary>How it Works</summary>
<p>Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. </p>
</details>

Collapsible Accordion in HTML

Accordion using HTML/CSS

Browser support:

https://caniuse.com/#search=summary

2. Progress bar

The Meter and Progress elements render progress bars on the screen based on attributes that you can tweak. Progress takes two attributes: max and value to calibrate the progress bar, whereas the Meter tag offers a lot more customization.

<label for="upload">Upload progress:</label>
<meter id="upload" name="upload"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="50">
    at 50/100
</meter>
<hr/>
<label for="file">File progress:</label>
<progress id="file" max="100" value="70"> 70% </progress>

Progress and Meter Elements

Progress bars using HTML

Browser Support:

https://caniuse.com/#search=meter

3. More Input Types

When defining an input element, recent browsers allow you to specify a lot a more types. You would already know about text, email, password, number.

• date will display a native date picker
• datetime-local originally datetime will let you pick date and time.
• month is an exclusive month friendly date picker
• tel will let you enter a phone number. Open this on a mobile browser and the keyboard will change appropriately. As is the case for email too.
• search will style the input text box to be search friendly.

<label for="date">Enter date:</label>
<input type="date" id="date"/>
<label for="datetime">Enter date & time:</label>
<input type="datetime-local" id="datetime"/>
<label for="month">Enter month:</label>
<input type="month" id="month"/>
<label for="search">Search for:</label>
<input type="search" id="search"/>
<label for="tel">Enter Phone:</label>
<input type="tel" id="tel">

Behavior on mobile phones

Illustrating other input types

The MDN documentation for various new input types is extensive and very informative. Also, check Mobile Input Types to know the keyboard behavior for these input elements when the user is on a mobile browser.

4. Video & Audio

The video and audio elements have been part of the HTML specification for sometime now, but you will be surprised at the how much you can accomplish rendering a decent video player with controls on the screen just using the video tag.

<video controls>
<source src="https://addpipe.com/sample_vid/short.mp4" 
            poster="https://addpipe.com/sample_vid/poster.png">
Sorry, your browser doesn't support embedded videos.
</video>

Video with controls

Some attributes worth noting in the video tag are :

• poster A URL for an image to be shown while the video is downloading
• preload preload metadata or the entire video when the page loads
• autoplay should the video play automatically when in focus

Browser Support:

https://caniuse.com/#feat=video

5. Proof-reading text

Example of <del> and <ins> tags in action

The blockquote, del and ins elements can come in handy when you would like to show edits or history of changes to a chunk of text.

Play with the codepen below to know more:

<blockquote>
    There is <del>nothing</del> <ins>no code</ins> either good or bad, but <del>thinking</del> <ins>running it</ins> makes it so.
</blockquote>

<del> and <ins> example

6. Quotation marks

This one is more of a better and consistent way to display quotation marks in your application.

Don Corleone said <q cite="https://www.imdb.com/title/tt0068646/quotes/qt0361877">I'm gonna make him an offer he can't refuse. Okay? I want you to leave it all to me. Go on, go back to the party.</q>
<hr/>
Don Corleone said <i>"I'm gonna make him an offer he can't refuse. Okay? I want you to leave it all to me. Go on, go back to the party."</i>

Notice the difference in the way opening and closing quotes are displayed.

Using <q> tag will let you render quotations consistently on most browsers.

7. Keyboard tags

The <kbd> tags are less known but they can be styled in such a way as to convey key combinations in a nicer way.

<p>I know that <kbd>CTRL</kbd>+<kbd>C</kbd> and <kbd>CTRL</kbd>+<kbd>V</kbd> a are like the most used key combinations</p>

Rendering <kbd> tags

8. Sharing code using HTML

Using a combination of figure, figcaption , pre and code tags you can render code snippets that look decent with just plain HTML and CSS.

<figure>
  <figcaption>
      Defining a css <code>color</code> property for a class called 'golden'
  </figcaption>
  
  <pre>
    <code>
      .golden {
        color: golden;
      }
    </code>
  </pre>
</figure>

<pre> and <code> tags

You can also refer to the working draft of the latest HTML 5.3 specification document to know what is coming in the future. Cheers!

Learn more

5 Tools for Faster Development in React

11 JavaScript Animation Libraries For 2019

Monorepos Made Simpler with Bit