HTML - Lesson 11: Interactive

As we've seen in the previous lessons, the primary goal of HTML is to provide a solid structure of the content both for the human visitor and for the robots (search engines, screen readers, etc). However in HTML there are some micro-syntaxes that are on particular ground. On the one hand, without using JavaScript (or programming), we can build dynamic elements. An example, which we've already used, is the <select> dropdown that we used inside the form. Without programming we've created a special field which we can interact with using the keyboard and the mouse.

In summary, the interactive elements provide us with tools that will make the most recurring tasks easier, such as modals, autocompleters or accordions. They enrich the HTML syntax, improve the context of the content and create dynamic elements for human visitors.

Abbreviation

Tag	`<abbr>`
Description	Represents an abbreviation or acronym.
Attributes	title: Description
Type	Inline

<p>I'm learning <abbr title="Hypertext Markup Language">HTML</abbr> in the mornings.</p>

I'm learning HTML in the mornings.

Dropdown

Tag	`<details>`
Description	Creates a widget where the content stays hidden except when its controller is activated. Must be used together with the child `<summary>`
Attributes	`open` Marks its disposition to be open. Otherwise it will be closed.
Type	Block

Tag	`<summary>`
Description	Specifies the visible content of the `<details>` tag regardless of whether it's open or closed. Must be wrapped by `<details>`.
Attributes	Global
Type	Block

<details>
    <summary>Invoice</summary>
    <ul>
        <li>White wine: €12</li>
        <li>Olives: €3</li>
    </ul>
    <p>Total: €15</p>
</details>

Invoice (Click here to expand)

White wine: €12
Olives: €3

Total: €15

Modal

Tag	`<dialog>`
Description	Represents an informative box, alert, dialog or any other temporary element.
Attributes	`open` Marks its disposition to be visible. Otherwise it will be assumed to be hidden. `popover` Indicates that it's a pop-up dialog. `popovertarget` Indicates the ID of the element that activates it.
Type	Block

<dialog open>You have been registered successfully!</dialog>

If you want the dialog to be shown when a button is clicked, you can use the popovertarget attribute with the button's ID and popover to indicate that it's a pop-up dialog.

<button popovertarget="dialogo-emergente" popover>Show dialog</button>
<dialog popover id="dialogo-emergente">
    <p>You have been registered successfully!</p>
    <button popovertarget="dialogo-emergente">Close</button>
</dialog>

Autocompleter

Tag	`<datalist>`
Description	Container of options that can be used to make suggestions in an `<input>`. Each element to suggest will be wrapped in `<option>`.
Attributes	Global
Type	Inline

<label>Who is your favorite Harry Potter character?:
    <input list="personajes-harry-potter" type="text" name="personaje-favorito">
</label>

<datalist id="personajes-harry-potter">
    <option value="Harry Potter"></option>
    <option value="Ron Weasley"></option>
    <option value="Hermione Granger"></option>
    <option value="Lord Voldemort"></option>
    <option value="Albus Dumbledore"></option>
</datalist>

Who is your favorite Harry Potter character?:

Progress bar

Tag	`<progress>`
Description	Represents a horizontal graphic to inform the visitor of the state of a progress.
Attributes	`max`: Maximum value. `value`: Length of the percentage.
Type	Inline

<progress max="100" value="30">30%</progress>

30%

Meter

Tag	`<meter>`
Description	Represents a horizontal graphic of a value whose range or value is unknown.
Attributes	`min`: Minimum value. `max`: Maximum value. `low`: Lowest measure. `high`: Highest measure. `optimum`: Optimal value, the browser should paint it a different color. `value`: Value between `min` and `max`.
Type	Block

<label>
    Temperature
    <meter
        id="temperature"
        min="-275"
        max="100"
        value="28"
    >
        28
    </meter>
</label>

Temperature 28

<label>
    Battery
    <meter
        id="battery"
        min="0"
        max="100"
        low="60"
        high="80"
        optimum="85"
        value="65"
    >
        Between 60 and 80
    </meter>
</label>

Battery Between 60 and 80

Activity 1

The Prado museum has commissioned you to create a page to answer the most important details about a famous painting that belongs to it (any one of your choice). Use some details to resolve the most common questions.

For example: What is it called? Who is the author? When was it painted?...

Try to include some abbreviations with their explanation.

Activity 2

Create a smartphone search box that includes an autocompleter to select the brand and a select with price ranges.

Activity 3

Create a header that contains a title and a hamburger button (☰) that, when clicked, shows a navigation menu with links to the following hyperlinks: Home, Services, Contact and About us.

Use a dialog to show the menu using the popover and popovertarget attributes.

Activity 4

Create your own profile, as if it were a Curriculum Vitae, with bars to mark the following characteristics about you.