Here are some underused semantic HTML tags that can help improve the structure and accessibility of your web pages:
### 1. `<aside>`
Represents content that is tangentially related to the content around it, such as sidebars, pull quotes, or related links.
```html
<aside>
<h2>Related Articles</h2>
<ul>
<li><a href="#">Article 1</a></li>
<li><a href="#">Article 2</a></li>
</ul>
</aside>
```
### 2. `<figure>` and `<figcaption>`
Used for self-contained content, like images, diagrams, or illustrations, along with a caption.
```html
<figure>
<img src="image.jpg" alt="Description of image">
<figcaption>This is a caption for the image.</figcaption>
</figure>
```
### 3. `<main>`
Defines the main content area of a document, excluding headers, footers, sidebars, etc.
```html
<main>
<article>
<h1>Main Article Title</h1>
<p>Content goes here...</p>
</article>
</main>
```
### 4. `<mark>`
Indicates text that has been highlighted or marked for reference or emphasis.
```html
<p>This is a <mark>highlighted</mark> text example.</p>
```
### 5. `<time>`
Represents a specific period in time, which can be useful for dates and times.
```html
<p>Event Date: <time datetime="2024-10-30">October 30, 2024</time></p>
```
### 6. `<address>`
Used to provide contact information for a person or organization.
```html
<address>
<p>Contact us at:</p>
<p>John Doe<br>
1234 Main St.<br>
City, State, Zip<br>
<a href="mailto:
[email protected]">
[email protected]</a></p>
</address>
```
### 7. `<details>` and `<summary>`
Used to create a disclosure widget from which the user can obtain additional information or controls.
```html
<details>
<summary>More Info</summary>
<p>This is additional information that is hidden by default.</p>
</details>
```
### 8. `<template>`
Represents a container for HTML that won’t be rendered when the page loads but can be instantiated later.
```html
<template id="my-template">
<div class="item">
<h2>Item Title</h2>
<p>Item description.</p>
</div>
</template>
```
### 9. `<progress>`
Represents the completion progress of a task.
```html
<progress value="70" max="100">70%</progress>
```
### 10. `<output>`
Represents the result of a calculation or user action.
```html
<form onsubmit="calculate(); return false;">
<input type="number" id="number1" required>
<input type="number" id="number2" required>
<button type="submit">Add</button>
<output id="result"></output>
</form>
<script>
function calculate() {
const num1 = document.getElementById('number1').value;
const num2 = document.getElementById('number2').value;
document.getElementById('result').value = Number(num1) + Number(num2);
}
</script>
```
Using these semantic HTML tags not only makes your markup clearer and more meaningful but also improves accessibility and SEO. It's great that you're keeping your skills fresh—using semantic tags is a fantastic way to enhance your HTML practices!