Are you really sure you know HTML? 🤔
Sylvain DEDIEU
Frontend engineer – #ui-foundations 🛸
Sylvain DEDIEU
Frontend engineer – #ui-foundation 🛸
s.dedieu@criteo.com
@sdedieu.bsky.social
s.dedieu@criteo.com
Sylvain Dedieu
🤦♂️
Quizz
Which input type does not exist ?
<input type="submit" />
<input type="image" />
<input type="month" />
<input type="year" />Agenda
1
2
3
4
A bit of history
Structure a page properly
Tags and (aria-) roles
Go beyond
1
2
3
4
A bit of history
Structure a page properly
Tags and (aria-) roles
Go beyond
A bit of history
Meet ENQUIRE
1980 👨🏫
World Wide Web
1990
Hypertext Markup Language (HTML)
1990 👨🏫
Here are some of the many areas in which hypertext is used.
- General reference data - encyclopaedia, etc.
- Completely centralized publishing - online help, documentation, tutorial etc
- More or less centralized dissemination of news which has a limited life
- Collaborative authoring
- Collaborative design of something other than the hypertext itself
- Personal notebook
Versions
1990 => 2026
1
2
3
4
Late 1990
November 24, 1995
January 14, 1997
December 18, 1997
5
October 28, 2014
1
2
3
4
A bit of history
Structure a page properly
Tags and (aria-) roles
Go beyond
Structure a page properly
What purpose serves this content sectioning tag ?
Quizz
<hgroup>
HTML 101
Page proper structure
<!DOCTYPE html>
<html lang="en"> <!-- Page language (anounced by screen reader) -->
<head>
<meta charset="utf-8" /> <!-- Page encoding -->
<title>Bike Store</title> <!-- Page title -->
<link rel="icon" href=""> <!-- Favicon -->
<link
href="https://fonts.googleapis.com/css?family=Roboto+Condensed"
rel="stylesheet" /> <!-- Font injection -->
<link href="style.css" rel="stylesheet" /> <!-- Styles injection -->
</head>
<body>
<!-- page content -->
<script src="app.js"></script> <!-- javascript files injection -->
</body>
</html>This is the way.
Page proper structure
<body>
<header>
<h1>Bike Store</h1> <!-- Main title -->
<?> <!-- Guess the element -->
<ul>
<li><a href="#">Road</a></li>
<li><a href="#">Mountain Bike</a></li>
<li><a href="#">Gravel</a></li>
</ul>
</?>
</header>
<>
<!-- content -->
</>
<footer>
<p>
This fake website example is CC0 — any part of this code may be reused in
any way you wish. Original example written by Sylvain DEDIEU, 2025.
</p>
</footer>
</body>
This is the way.
Page proper structure
<body>
<header>
<h1>Pokemon favorite ranking</h1> <!-- Main title -->
<nav>
<ul>
<li><a href="#">Top 0 - 50</a></li>
<li><a href="#">Top 50 - 100</a></li>
<li><a href="#">Top 100 - 150</a></li>
</ul>
<nav/>
</header>
<?> <!-- guess the element -->
<!-- content -->
</?>
<footer>
<p>
This fake website example is CC0 — any part of this code may be reused in
any way you wish. Original example written by Sylvain DEDIEU, 2025.
</p>
</footer>
</body>
This is the way.
Page proper structure
<main>
<1?>
<2?>
<3?>
<4?>
</4?>
</3?>
</2?>
</1?>
<aside>
</aside>
</main>
Full example (demo)
Page proper structure
1
2
3
4
A bit of history
Structure a page properly
Tags and (aria-) roles
Go beyond
Tags and (aria-) roles
1
2
3
4
A bit of history
Structure a page properly
Tags you might not know about
(Aria-) roles
Go beyond !!! 🚀
What purpose serves this tag ?
Quizz
<output>Thank You !
Sylvain DEDIEU
Frontend engineer – #ui-foundation 🛸
s.dedieu@criteo.com
@sdedieu.bsky.social
s.dedieu@criteo.com
Sylvain Dedieu