Semantic HTML
Objectives
- Discuss the advantages of writing semantic HTML
- Create an accessible list of semantic tags
- Write semantic HTML markup
What is 'Semantic' HTML?
Identifying your content by its meaning, rather than its presentation
More concretely...
<div>
<div>
<div>
<div>
<div>
More concretely...
What are the advantages of semantic HTML?
- Readability
- Accessibility
- Consumability
- SEO
- Separation of Concerns
Semantic Scavenger Hunt
Build a House
with semantic tags, obvs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Make me semantic</title>
</head>
<body>
<div>Results for "Hackers"</div>
<div>
<div>Titles</div>
<div>
<img src="#"> Hackers (1995)
</div>
</div>
<div>
<div>Names</div>
<div>
<img src="#"> Amy Acker
<img src="#"> Drew Van Acker
</div>
</div>
<div>
<div>Keyworkds</div>
<div>
hacker (180 titles)
</div>
</div>
<div>
<div>Companies</div>
<div>
Crackerjack Management
Bleeker Street Media
</div>
</div>
<div>
<div>
<div>Category Search</div>
<div>
<ul>
<li>All</li>
<li>Name</li>
</ul>
</div>
</div>
<div>
<div>Additional Search Options</div>
<div>
<ul>
<li>Advanced Search</li>
<li>Advanced Title Search</li>
</ul>
</div>
</div>
</div>
</body>
</html>Good practice:
-
Tables used for tabular data, not for formatting
-
Images all have alt text
-
Headers used properly - smaller headers used to section content demarcated by larger headers
-
One h1 per page
-
h2s used to demarcate large sections of the page
-
h3-6 used for subsections
-
-
No tags that exist for no reason- all tags should have a purpose