Exploring HTML Elements and Attributes – A Deep Dive

After reviewing the MDN HTML documentation, I discovered several HTML elements and attributes that I had not explored deeply before. This post serves as a personal reference and knowledge update.

Description Lists (dl, dt, dd)

A description list (dl) is used for presenting a list of name-value pairs. Each term (dt) is followed by one or more descriptions (dd).

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

aside – The Sidebar

The <aside> element represents content related to the main content but separate from it, often used for sidebars or pull quotes.

<aside>
  <h2>Related Articles</h2>
  <p>Check out our guide on CSS Flexbox.</p>
</aside>

abbr – Abbreviations

The <abbr> tag defines an abbreviation or acronym, often providing an expansion via the title attribute.

<p>The <abbr title="World Health Organization">WHO</abbr> was established in 1948.</p>

address – Contact Information

The <address> tag represents contact details for its enclosing content.

<address>
  Contact us at <a href="mailto:[email protected]">[email protected]</a>
</address>

Superscript & Subscript (sup, sub)

Used for mathematical notations, footnotes, and chemical formulas.

<p>H<sub>2</sub>O (Water)</p>
<p>4<sup>2</sup> = 16</p>

Representing Code (code, pre, kbd)

• <code>: Inline code snippets
• <pre>: Preserves whitespace and formatting
• <kbd>: User input

<p>Use the <code>&lt;section&gt;</code> tag for semantic structure.</p>
<pre>
function greet() {
    console.log("Hello, world!");
}
</pre>
<p>Press <kbd>Ctrl + C</kbd> to copy.</p>

a with the download Attribute

The download attribute allows users to download linked resources instead of navigating to them.

<a href="document.pdf" download="MyDocument.pdf">Download PDF</a>

Replaced Elements

Some HTML elements, like <img>, <video>, and <input>, are called replaced elements because the content inside them is not controlled by HTML but by external resources.

<img src="image.jpg" alt="Example image">

Figures and Captions (figure, figcaption)

The <figure> element groups media (e.g., images, diagrams) with an optional <figcaption>.

<figure>
  <img src="graph.png" alt="Sales Graph">
  <figcaption>Figure 1: Sales performance over Q1.</figcaption>
</figure>

Tables with Row Group Headers

HTML tables can be structured with <thead>, <tbody>, and <tfoot> to improve readability.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

Forms and Input Attributes

The autocomplete attribute allows browsers to fill in user input automatically.

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="email">
  <button type="submit">Submit</button>
</form>

Conclusion

This exploration helped me better understand various HTML elements and attributes, especially those that improve accessibility, structure, and usability. Keeping up with MDN documentation ensures that I write cleaner, more semantic HTML.