<details>
<summary>Visible title</summary>
Text content displayed on click.
</details>source: Building Accordions With the HTML5 Details Tag (No JavaScript Needed)
The capture attribute allows access to mobile device's microphone/camera.
Notice it won't access your computers microphone/camera.
<input type="file" id="soundFile" capture="user" accept="audio/*" />
<input type="file" id="videoFile" capture="environment" accept="video/*" />Note: the user value will get the user-facing camera while the environment value will get the outward-facing.
<audio controls autoplay>
<source src = "/html5/audio.ogg" type = "audio/ogg" />
<source src = "/html5/audio.wav" type = "audio/wav" />
Your browser does not support the audio element.
</audio>Note: add the loop attribute to start over everytime track ends.
Same attributes works with the video tag.
<ol type="A"> // or <ol type="I">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Note: after 26 items, list will keep on going with AA., AB., ...
<ol start="4">
<li>Step 4</li>
<li>Step 5</li>
</ol>Note: the start attribute only works with numbers.
You can higlight text using the <mark>tag.
You can cross out text without any CSS rule using the <s> tag
Use the <abbr> tag with a title attribute to display the meaning of a word/abbr when the user hovers on it
The time tag allows machines like search engines to read temporal values inside texts.
It takes the attribute datetime.
<time datetime="2018-09-28 19:00"> le 28 septembre</time>When set to true, will automatically check for spelling while user edit the content.
<textarea spellcheck="true">This exampull will be checkd fur spellung.
Et ça machre ausis en frnaçais.</textarea>This attribute prevent browser to translate some content to keep it in its original language.
<p translate="no">Ne pas Traduire ce Paragraphe.</p>Allows to manage priority when user uses tab to navigate through the page.
<p tabindex="1">Allows to manage priority when user uses tab to navigate through the <a href ="#" tabindex="2">page</a>.</p>Note: consider semantic first to optimize accessibility
Similar to the select option, display is more subtle.
<label>Chose a car model: </label>
<input list="cars" id="carsInput" />
<datalist id="cars">
<option value="BMW" />
<option value="Bentley" />
<option value="Mercedes" />
<option value="Audi" />
<option value="Volkswagen" />
</datalistm>
<button onclick="datalistcall()" type="button">Click Here</button>
Create a zone you can fill with shapes/sketches or use as a free drawing space.
<canvas id="canvas" width="400" height="100" style="border:2px solid;">
//script:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// red rectangle:
ctx.fillStyle = "#FF0000";
ctx.fillRect(100, 20, 80, 80);
// blue rectangle:
ctx.fillStyle = "rgba(0, 0, 200, 0.8)";
ctx.fillRect(60, 70, 50, 100);
// circle:
ctx.fillStyle = "#FFFFFF";
ctx.arc(300, 75, 50, 0, 2 * Math.PI);
ctx.fill();<svg id = "svgelem" height = "200" xmlns = "http://www.abc.org/2000/svg">
<circle id = "redcircle" cx = "50" cy = "50" r = "50" fill = "red" />
</svg>
<svg width="200" height="120">
<rect x="20" y="10" rx="20" ry="20" width="140" height="90" style="fill:rgb(55, 208, 255);stroke:rgb(240, 230, 230);stroke-width:5;opacity:0.5" />
</svg>
Note: While canvas is rendered pixel by pixel, SVG is XML based and generate elements available whithin de DOM. Which means they can handle events.
The empty output get updated with a result value generated by a script that execute a calculation.
<form oninput="sumresult.value = parseInt(firstnum.value) + parseInt(secondnum.value)">
<input type="number" name="firstnum" value="50" />
<input type="number" name="secondnum" value="0" />
<span>Sum = </span> <output name="sumresult"></output>
</form>
The progress tag takes a value + a max value
<progress value="55" max="100"></progress>This tag requires Javascript to update the value.
<button onClick="displayProgress()">Run Progress Bar</button> <progress value="0" id="downloadProgress" max="30">Hello</progress> <script>let milisec=0 let max=30 function displayProgress(){ if(milisec>=max){ document.getElementById('message').innerHTML="Done!"; } milisec+=1; document.getElementById('downloadProgress').value=milisec; setTimeout("displayProgress()",max); }</script>
Source: HTML <progress> Tag
The meter tag allows to display static value.
Define min, max and a current value to generate a gauge.
Specify high, lowans optimum values update color content.
<meter id="score" min="0" max="100"
low="30" high="66" optimum="80"
value="50">
</meter>Add a usemap attribute to the image you want to define clickable areas so you can add different links depending on where the user clicks.
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="https://en.wikipedia.org/wiki/Laptop">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="https://en.wikipedia.org/wiki/Smartphone">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="https://en.wikipedia.org/wiki/Coffee">
</map>Note: area always works within a map tag and requires to define coordinates.
Launched by Facebook in 2010, Open Graph is a protocol that optimise web pages representation when they got shared on social networks.
<meta property="og:title" content="HTML Tips." />
<meta property="og:description" content="HTML Tips." />
<meta property="og:image" content="https://ahrefs.com/blog/wp-content/uploads/2019/12/fb-how-to-become-an-seo-expert.png" />SOURCE: Open Graph: what you need to know.
More about OG: Open Graph Meta Tags: Everything You Need to Know.
Note: Twitter uses its own twitter:* properties for Twitter Cards (twitter doc).
A non exhaustive list of deprecated features in HTML5: