`<code>`: Inline code snippet.

`<pre>`: Preformatted text, preserves spaces and line breaks. Often used with `<code>`.

Lists:

`<ul>` (unordered), `<ol>` (ordered), `<li>` (list item). Use `<ol type="..." start="...">` for specific numbering.
`<dl>`, `<dt>`, `<dd>`: Description lists (e.g., glossary).

Figures:

`<figure>`, `<figcaption>`: For self-contained content like images, diagrams, code blocks with a caption.

<figure>
  <img src="graph.png" alt="Sales Growth">
  <figcaption>Annual sales growth over 5 years.</figcaption>
</figure>

3. Links (`<a>`) & Images (`<img>`)

Hyperlink (`<a>`):
- `href`: Destination URL.
- `target="_blank"`: Opens in new tab (use `rel="noopener noreferrer"` for security).
- `title`: Tooltip on hover (also good for accessibility).
- `rel="nofollow"`: Hint to search engines not to follow the link (e.g., user-generated content).
- SEO: Use descriptive link text, not "click here".
```
<a href="page.html" target="_blank" rel="noopener noreferrer">Learn More</a>
```
Image (`<img>`):
- `src`: Image path.
- `alt`: Crucial for accessibility and SEO. Describes image content for screen readers and when image fails to load.
- `width`, `height`: Specify dimensions to prevent layout shifts (CLS).
- `loading="lazy"`: Defer loading of off-screen images for performance.
- `srcset`, `sizes`: For responsive images (serving different images based on viewport size/resolution).
```
<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     sizes="(max-width: 600px) 480px, 800px"
     src="medium.jpg" alt="Description" loading="lazy">
```
- `<picture>`: For more complex art direction, using different image formats (e.g., WebP, JPEG).
```
<picture>
  <source srcset="img.webp" type="image/webp">
  <source srcset="img.jpg" type="image/jpeg">
  <img src="img.jpg" alt="Description">
</picture>
```

4. Tables (`<table>`)

For tabular data, not layout. Always use semantic elements for accessibility.

`<table>`: Main container.
`<caption>`: Table title (for accessibility).
`<thead>`, `<tbody>`, `<tfoot>`: Semantic grouping of rows.
`<tr>`: Table row.
`<th>`: Table header cell.
- `scope="col"` or `scope="row"`: Crucial for screen readers to associate header with data cells.
`<td>`: Table data cell.
- `colspan`, `rowspan`: Merge cells.

<table>
  <caption>Quarterly Sales Report</caption>
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Widget A</th>
      <td>$1000</td>
      <td>$1200</td>
    </tr>
  </tbody>
</table>

5. Forms (`<form>`) & User Input

Designing accessible and user-friendly forms is critical.<