Advanced HTML Elements and Semantic Tags
Modern HTML includes elements that solve common interface and content problems without inventing generic markup. This page is a quick gateway to the Plus2net tutorials for disclosure widgets, dialogs, semantic annotations, machine-readable values, progress indicators and other useful elements.
Interactive elements Top ↑
<details>and<summary>for native disclosure content.<dialog>for modal and non-modal dialogs controlled with JavaScript.<output>for calculation or form results.
Semantic text and supporting content Top ↑
<figure>and<figcaption>for self-contained content with an optional caption.<mark>for text that is relevant in the current context, such as a matched search term.<abbr>for abbreviations when an expansion is useful.<wbr>for optional line-break opportunities inside long strings.
Machine-readable values Top ↑
Use <time> for dates, times and durations. Use <data> when visible text needs a machine-readable value that is not time-related.
<time datetime="2026-09-10">September 10, 2026</time>
<data value="SKU-1042">Blue notebook</data>Progress and measurements Top ↑
The <progress> and <meter> tutorial explains two elements that look similar but represent different information: task completion versus a scalar value within a known range.
Related HTML references Top ↑
HTML tutorial index · HTML tags and elements · HTML document structure
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
