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

• 📗 Use Sectioning Elements to Create Landmarks

role	corresponding element
banner	<header> *️
navigation	<nav>
main	<main>
complementary	<aside>
form	<form>
contentinfo	<footer> *️
region	<section>
search	no corresponding HTML5 element. use role="search"

*️ not contained within other elements