While the core HTML elements and attributes are widely known, there are a few hidden gems that can elevate your development skills and surprise even experienced developers. Here are some unique HTML snippets to explore:
1. The dialog element:
This element allows you to create modal dialog boxes without JavaScript. It offers built-in accessibility features and can be styled with CSS.
<dialog open>
<h2>This is a modal dialog!</h2>
<p>This content is hidden until the dialog is opened.</p>
<button>Close</button>
</dialog>2. The meter element:
This element allows you to create a progress bar. It can be used to display the progress of a task, such as a file upload or download.
<progress value="50" max="100">50%</progress>3. The details element:
This element allows you to create an expandable section of content. It can be used to hide or show additional information, such as a list of frequently asked questions.
<details>
<summary>Click to expand</summary>
<p>This content is hidden until the details element is opened.</p>
</details>4. The time element:
This element allows you to display a date or time in a human-readable format. It can be used to display the current date and time, or a date and time in the past or future.
<time datetime="2023-08-01">August 1, 2023</time>5. The mark element:
This element allows you to highlight text. It can be used to draw attention to important information, such as a keyword or phrase.
<p>
The <mark>mark element</mark> allows you to highlight text.
</p>6. The slot attribute:
This attribute allows you to distribute content into different slots within a web component. This is primarily used for component development.
<my-component>
<template slot="header">This is the header</template>
<template slot="content">This is the content</template>
</my-component>7. The bdi element:
This element allows you to isolate a part of text that might be formatted in a different direction from other text outside it. It can be used to display text in a different direction from the rest of the text on the page.
<p>
<bdi>مرحبا</bdi> <bdi>你好</bdi> <bdi>こんにちは</bdi>
</p>8. The wbr element:
This element allows you to specify where in a word it is acceptable to break a line. It can be used to prevent long words from breaking in the middle.
<p>
This is a very long word that will not break:
<wbr>supercalifragilisticexpialidocious
</p>9. The picture element:
This element provides a more responsive way to handle images by specifying different sources for different screen sizes.
<picture>
<source srcset="img_large.jpg" media="(min-width: 768px)">
<source srcset="img_medium.jpg" media="(min-width: 480px)">
<img src="img_small.jpg" alt="My image">
</picture>