> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/html/semantic.md).

# Semantic Elements

* :green\_book: [Semantic Elements in HTML](https://www.w3schools.com/html/html5_semantic_elements.asp) (W3Schools)
* :green\_book: [Introduction to ARIA](https://developers.google.com/web/fundamentals/accessibility/semantics-aria) (Google)

{% hint style="info" %}
[ARIA](https://developers.google.com/web/fundamentals/accessibility/semantics-aria#what_can_aria_do) can **modify** existing element **semantics** or **add semantics** to elements where no native semantics exist.
{% endhint %}

## semantic element list 

|  #  | tag                                                                          | inline               | meaning                                                                                 |
| :-: | ---------------------------------------------------------------------------- | -------------------- | --------------------------------------------------------------------------------------- |
|  1  | <**main**>                                                                   | :x:                  | there should be **at most one main** on each page.                                      |
|  2  | <**section**>                                                                | :x:                  | **generic section** of a document.                                                      |
|  3  | <**nav**>                                                                    | :x:                  | **navigation** part of a document.                                                      |
|  4  | <**article**>                                                                | :x:                  | **independent**, **self-contained** content.                                            |
|  5  | <**aside**>                                                                  | :x:                  | sidebar.                                                                                |
|  6  | <**header**>                                                                 | :x:                  |                                                                                         |
|  7  | <**footer**>                                                                 | :x:                  |                                                                                         |
|  8  | <[**mark**](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark)> | :question:           | marked/highlighted text.                                                                |
|  9  | <**time**>                                                                   | :white\_check\_mark: | date/time.                                                                              |
|  10 | <**figure**>                                                                 | :x:                  | annotate illustrations, diagrams, photos, code listings, etc.                           |
|  11 | <**figcaption**>                                                             | :x:                  | provide a caption for the parent <**figure**>  element.                                 |
|  12 | <**details**>                                                                | :x:                  | parent container of <**summary**>, constains additional info.                           |
|  13 | <**summary**>                                                                | :x:                  | A piece of text that **when clicked**, opens/hides a panel with additional information. |

### about \<details> disclosure marker

{% hint style="warning" %}
Different browsers have their own implementations of how we can deal with the **marker** for the <**details**> elements. As W3C **hasn't defined** a **selector** for that **marker**, to disable it, you need to use a **proprietary pseudo class** :

**`summary::-webkit-details-marker { display: none; }`**

You can use that same selector to style the marker differently. Currently, there is **no way** of **animating** the open and close.
{% endhint %}

## **ARIA Landmark role**

* :green\_book: [Use Sectioning Elements to Create Landmarks](https://www.hassellinclusion.com/blog/html5-sectioning-elements-accessible-landmarks/)

| role          | corresponding element                                                                     |
| ------------- | ----------------------------------------------------------------------------------------- |
| banner        | \<header> :asterisk\_symbol:                                                              |
| navigation    | \<nav>                                                                                    |
| main          | \<main>                                                                                   |
| complementary | \<aside>                                                                                  |
| form          | \<form>                                                                                   |
| contentinfo   | \<footer> :asterisk\_symbol:                                                              |
| region        | \<section>                                                                                |
| search        | <p>no corresponding HTML5 element.<br>use <strong><code>role="search"</code></strong></p> |

:asterisk\_symbol: not contained within other elements