Semantic Elements
📗 Semantic Elements in HTML (W3Schools)
📗 Introduction to ARIA (Google)
ARIA can modify existing element semantics or add semantics to elements where no native semantics exist.
semantic element list
# | tag | inline | meaning |
1 | <main> | there should be at most one main on each page. | |
2 | <section> | generic section of a document. | |
3 | <nav> | navigation part of a document. | |
4 | <article> | independent, self-contained content. | |
5 | <aside> | sidebar. | |
6 | <header> | ||
7 | <footer> | ||
8 | <mark> | marked/highlighted text. | |
9 | <time> | date/time. | |
10 | <figure> | annotate illustrations, diagrams, photos, code listings, etc. | |
11 | <figcaption> | provide a caption for the parent <figure> element. | |
12 | <details> | parent container of <summary>, constains additional info. | |
13 | <summary> | A piece of text that when clicked, opens/hides a panel with additional information. |
about <details> disclosure marker
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.
ARIA Landmark role
role | corresponding element |
banner | |
navigation | <nav> |
main | <main> |
complementary | <aside> |
form | <form> |
contentinfo | |
region | <section> |
search | no corresponding HTML5 element.
use |
*️ not contained within other elements
Last updated