<details>
The <details> element is a plain HTML way to create collapsible
elements instead of replicating the functionality in JavaScript.
Inside <details>, you can use the <summary> element to define the
title of the collapsible section.
<details>
<summary>Click me!</summary>
Additional information...
</details>
Click me!
Additional information...popover
While popovers aren’t really their own tags, they can be used to create popups and dialogs without JS.
Use the popover attribute to make the element a popover.
Use the popovertarget attribute with the value of the popover’s id
on a clickable element to make it activate the popover on click.
<button popovertarget="my-popover">Open Popover</button>
<div popover id="my-popover">This wasn't here before!</div>
<style>
:popover-open {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<noscript>
The <noscript> element is used to display certain content only if
the user has disabled Javascript in their browser.
The <noscript> element can be used in both <head> and <body>.
<noscript>
<p>You did it!</p>
</noscript>
Disable Javascript in your browser to see the result:
<address>
This is one of the more boring elements, but it’s worth discussing because many people add contact sections to their websites, but not many use this element.
The <address> element is used to display contact information for the
current page. It doesn’t make a visual difference, but it helps add
context to your page.
This will help make your website more accessible to screen readers and crawlers, which will rank your website higher in Google searches.
<address>
<p>Email me at:</p>
<a href="mailto:business@gustafik.com">business@gustafik.com</a>
</address>
Email me at:
business@gustafik.com<meter> & <progress>
The <meter> and <progress> elements are used to display progress bars
with a value and a range of possible values.
The difference between the two elements is that the <meter> element
also defines the visual appearance of the progress bar with attributes
like high, low, and optimum.
<label for="fuel">Meter:</label>
<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="50"></meter>
<label for="progress">Progress:</label>
<progress id="progress" value="50" max="100"></progress>
// code for the interactive slider
<input type="range" id="range" min="0" max="100" value="50"></input>
<script>
const range = document.getElementById("range");
range.addEventListener("input", () => {
document.getElementById("progress").value = range.value;
document.getElementById("fuel").value = range.value;
});
</script>