Assistance

Introduction

A major part of our role as front-end developers involves making sure our web pages are as easy to use as possible. The more informative and straightforward we make our web applications, the better the user engagement. This lesson aims to introduce you to various HTML elements and techniques to enhance user assistance and interaction, all without the use of JavaScript (which we’ll explore later in the program).

Details and Summary

The <details> and <summary> elements are used to create expandable and collapsible content. The <summary> element is used to define a visible heading for the <details> element. The <summary> element is optional and can be omitted if a heading is not required.

This can be useful for displaying additional information that is not essential to the user experience. For example, a user may want to see the details of a product, but not necessarily the product description. The <details> element can be used to hide the product description until the user clicks on the heading.

Let’s take a look at an example:

	<details>
	  <summary>Product Details</summary>
	  <p>
	    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
	    voluptatum, quibusdam, quia, quod voluptates voluptatem quos
	    voluptatibus quas quidem doloribus quae. Quisquam voluptatum,
	    quibusdam, quia, quod voluptates voluptatem quos voluptatibus quas
	    quidem doloribus quae.
	  </p>
	</details>

This can be a useful way to create dynamic layouts without the need for JavaScript. For example, you could use this to create an FAQ page where the user can click on a question to reveal the answer:

	<details>
	  <summary>What is the purpose of the &lt;details&gt; element?</summary>
	  <p>The &lt;details&gt; element is used to create a disclosure widget where information is visible only when the widget is toggled into an "open" state. It is often used for FAQ sections, code samples, or any content that the user might want to hide or show.</p>
	</details>
	<details>
	  <summary>Can I nest &lt;details&gt; elements inside each other?</summary>
	  <p>Yes, you can nest &lt;details&gt; elements within other &lt;details&gt; elements. However, be cautious when doing so to avoid creating a confusing user interface.</p>
	  <details>
	    <summary>Click for proof!</summary>
	    <p>It works!</p>
	  </details>
	</details>
	<details>
	  <summary>Is it possible to style &lt;details&gt; and &lt;summary&gt; elements?</summary>
	  <p>Yes, the &lt;details&gt; and &lt;summary&gt; elements can be styled using CSS. You can apply styles like background colour, borders, and font styles to customise their appearance.</p>
	</details>
	<details>
	  <summary>Are &lt;details&gt; and &lt;summary&gt; supported in all browsers?</summary>
	  <p>These elements are widely supported in modern web browsers, including Chrome, Firefox, and Safari. However, they may not be fully supported in some older versions of Internet Explorer.</p>
	</details>

Progress

The <progress> element is used to visually represent the completion status of a task. It can be used to indicate the progress of a download, file upload, or any other task that has a defined completion percentage.

This is most commonly used in conjunction with JavaScript to update the progress bar as the task progresses. However, it can also be used without JavaScript by setting the value attribute to a number between 0 and 1 to indicate the percentage of completion.

Let’s take a look at an example:

	<progress value="0.9">90%</progress>
	<progress value="0.5">50%</progress>
	<progress value="0.1">10%</progress>

We can express the progress value as a percentage by adding the max attribute and setting it to 1:

	<progress value="0.5" max="1">50%</progress>

Or in some cases we may have a specific number of steps that need to be completed. For example, if we have a form with 5 steps, we can set the max attribute to 5:

	<progress value="3" max="5">3/5</progress>

Consider how this could be useful for a multi-page form such as a checkout form.

Meter

The <meter> element is used to indicate scalar measurements within a defined range. It is very similar to progress, albeit with a few key differences. This is most commonly used to express measurements such as disk usage, file download/upload sizes, and other values that can be expressed as a number within a specific range. Note the use of low, high, and optimum attributes to define the range.

Let’s take a look at an example:

	<meter value="100" min="0" max="100" low="40" high="90" optimum="100">100%</meter>
	<meter value="45" min="0" max="100" low="40" high="90" optimum="100">45%</meter>
	<meter value="10" min="0" max="100" low="40" high="90" optimum="100">10%</meter>
	<meter value="0" min="0" max="100" low="40" high="90" optimum="100">0%</meter>

This element could be useful for displaying a user credit amount on an ecommerce store, or for displaying the amount of time left in a timed quiz.

Loaders

Loaders are used to indicate that a task is in progress. They are often used to indicate that a page is loading, or that a form is being submitted. Loaders can be implemented in a variety of ways, but they are typically animated to indicate that the task is in progress.

There is no specific, semantic HTML element dedicated to loaders. It is common to use a div element with a custom class to create a loading animation effect. Let’s create an example loader animation:

	.loader {
	  width: 50px;
	  height: 50px;
	  border-radius: 50%;
	  border: 5px solid #ccc;
	}
	
	.loader.spin {
	  border-top-color: #333;
	  animation: spin 1s linear infinite;
	  opacity: 0;
	}
	
	.loader.grow {
	  animation: grow 1s linear infinite;
	  background-color: #ccc;
	}
	
	@keyframes spin {
	  to {
	    transform: rotate(360deg);
	    opacity: 1;
	  }
	}
	
	@keyframes grow {
	  0% {
	    transform: scale(0);
	  }
	  50% {
	    transform: scale(1);
	  }
	  100% {
	    transform: scale(0);
	  }
	}

	<div class="loader spin"></div>
	<div class="loader grow"></div>

Check out this resource for more inspiration: https://loading.io/css/

Tooltips

Tooltips are used to provide additional information about an element when the user hovers over it. They are often used to provide a brief description of a form input, or to provide additional information about a link. Tooltips can be implemented in a variety of ways, but they are typically displayed as a small box that appears when the user hovers over the element.

It is common to use the title attribute to create a tooltip. Let’s take a look at an example:

	<form>
	  <label for="name">Name</label>
	  <input type="text" id="name" title="Enter your name" />
	  <button type="reset" title="Clear the form">Clear</button>
	</form>

Try hovering over the input element or button to see the tooltip box appear!

We can use this same approach for other elements, such as external links:

	<a href="https://www.google.com" target="_blank" title="Visit Google">Google</a>

Or internal anchor links to a specific part of the page:

	<a href="#introduction" title="Jump to Introduction">Intro</a>

In some cases we may want to provide a tooltip without linking anywhere, for example as a mini glossary:

	<q>Today we are discussing <abbr title="HyperText Markup Language">HTML</abbr> in the context of web development.</q>

Output

The <output> element is used to display the result of calculations or user actions dynamically. It is often used in conjunction with JavaScript to update the output as the user interacts with the page. However, it can also be used without JavaScript by setting the for attribute to the id of the element that will be used to calculate the output.

Let’s take a look at an example, we have hidden the JS to keep things focused on the HTML:

	<form>
	  <input type="number" value="10">
	  +
	  <input type="number" disabled value="20">
	  =
	  <output name="result">30</output>
	</form>