Let’s conclude with this part the section related to the relevant HTML elements we can use in the website creation.
Here the elements we are going to talk about:
Audio
The audio element is used to include sound content in a document. The supported formats are mp3, wav and ogg.
The <audio> tag contains one or more <source> tags with different audio sources (to reduce the odds that the audio doesn’t work). From all the sources the first one working is picked it up by the browser.
If the browser doesn’t support any of the audio formats, then the text between the audio tags is displayed.
<audio controls>
<source src="https://creazilla.com/media/audio/15442377/game-over-arcade.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio><h3 id="Button"></h3>Inside a button element it is possible to insert text and tags like <b>, <i>, <u> and even images. In case you need to add this kind of tags, use this element instead of the input one.
<button type="button"><b><u><i>Ok</i></u></b></button>Canvas
The canvas element is an area which you can draw on. This is a bitmap graphic, meaning that an image is formed from rows of different colored pixels.
Instructions to make the draws come from JavaScript code. These instructions are “translated and transferred” in the HTML file via the Canvas API.
In a canvas you can make shapes, lines, curves, text, rotations and much more.
Comment
A comment is defined by the opening tag <!– and the closing tag –>. Anything between these tags is not rendered by the browser, but is readable opening the file (ex. an .html file) with a text editor. The comment is useful to pass a message to anyone reading the file. Here an example:
<h3>How to make the perfect pizza</h3>
<!-- Put the ingredients list -->
<p><b>Step 1</b> - Stir the flour with yeast, salt and water until getting a fairly wet dough. Rising time: 3 hours.
<!-- Add images --><br>
<b>Step 2</b> - Mix the passata with herbs and roll out the dough in a floured surface.
<!-- Add images --><br>
<b>Step 3</b> - Spread the sauce, add cheese and olive oil and bake at 230 °C for about 10 mins.
<!-- Add images --></p>How to make the perfect pizza
Step 1 – Stir the flour with yeast, salt and water until getting a fairly wet dough. Rising time: 3 hours.
Step 2 – Mix the passata with herbs and roll out the dough in a floured surface.
Step 3 – Spread the sauce, add cheese and olive oil and bake at 230 °C for about 10 mins.
Details
This element provides further details about a topic. I consists in a closed widget that gets expanded when the user hits the associated written:
<details>
<summary>Pink Floyd</summary>
<p>Pink Floyd was a British rock band formed in London in 1965, which has gained an early following as one of the first British psychedelic groups and popularized the concept album for mass rock audiences in the next decade.</p>
</details>Pink Floyd
Pink Floyd was a British rock band formed in London in 1965, which has gained an early following as one of the first British psychedelic groups and popularized the concept album for mass rock audiences in the next decade.
As you can notice, the written which needs to be clicked on is placed between the summary tags.
Link
This element
The link element consists in a single tag and is used to establish a connection between the current document and an external resource. Placed between the header element, it’s commonly use to link the current webpages to external style sheets (CSS files) or to set an icon (favicon) for the website:
<head>
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/x-icon" href="/ng-dev/images/favicon.ico">
</head>
Map
This element is used to create an image map, which is an image with clickable areas.
The image is shown through the img element, which has the required usemap attribute, which value is given by the # symbol followed by the map’s name attribute.
The required name attribute of the map element must be the same of the with the img’s usemap attribute and creates a relationship between the image and the map.
The map element, beside the usemap attribute, contains a certain number of area elements, that define the clickable areas in the image map:
<img src="/images/desk.png" alt="desk" usemap="#desk" width="810" height="540">
<map name="desk">
<area shape="rect" coords="207,130,602,361" alt="Monitor" title="Monitor">
<area shape="rect" coords="119,318,180,373" alt="Speaker" title="Speaker">
<area shape="rect" coords="628,318,688,377" alt="Speaker" title="Speaker">
<area shape="rect" coords="226,428,597,459" alt="Keyboard" title="Keyboard">
<area shape="rect" coords="810,540,809,426" alt="Laptop" title="Laptop">
</map>
In this example hovering the desk’s devices the relative names pop up.
Meter
This element is used to create a scalar measurement (or a gauge) within a known range, or a fractional value. It can be useful to indicate something’s level or a survey result for example.
<label for="speaker_vol">Speaker Volume:</label>
<meter id="speaker_vol" value="65" min="0" max="100">65%</meter><br>
<label for="mic_vol">Microphone Volume:</label>
<meter id="mic_vol" value="85" min="0" max="100">85%</meter>Video
The video element is used to include video content in a document. The supported formats in HTML are MP4, WebM, and OGG.
The <video> tag contains one or more <source> tags with different video sources (to reduce the odds that the video doesn’t work). From all the sources the first one working is picked it up by the browser.
If the browser doesn’t support any of the audio formats, then the text between the video tags is displayed.
<video width="320" height="240" controls>
<source src="https://intothedev.com/wp-content/uploads/2025/08/clock.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>Well, with this we have completed the HTML elements section. I hope you found it useful and I invite you to check out some of the other article related to this topic.
