Semantic HTML
Goals
- Thoughtful approach to composing HTML
- Treat HTML pages as documents
- Better overall front end code
Real world document: publication
Has structure!
- Front page
- Table of contents
- Introduction
- Chapters
- Conclusion
- References
Other elements
- Header & footer
- Footnotes
- Asides
- Definitions
- Tables
- Formulas
- ...
World Wide Web
Made up of documents
Plenty of elements
Deep nesting
High dynamicity
Many representations
Still documents
Lots of them!
Hypertext
Fundamental concept behind WWWThe Idea
Plenty of texts with links between them
Extend, connect, share
The language?
HyperText Markup LanguageThe Web Triforce
HTML documents
Composed of elements
<html> <!-- ROOT ELEMENT -->
<head>
<!-- METADATA: title, author, description, etc. -->
</head>
<body>
<!-- PAYLOAD CONTENT -->
</body>
</html>
Element order
MATTERS!
- Search engines
- Mobile browsing
- Keyboard navigation
- Find in page
Element order
Element order
Element order
Links
Essence of the World Wide Web1. Hyperlinks
<a href="/cats.html">Please don't break my href!</a>
2. Links to external resources
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/touch-icon.png">
<link rel="stylesheet" href="/styles/main.css">
… used to augment the current document, generally automatically processed by the user agent.
Other uses of link
Author
Site search
News feed
Also...
- Alternate language
- Previous/next page
- License
- PDF version
See the spec for more
HTML5
- Simplified syntax
- New elements and attributes
- New API
- Precisely defined parsing rules,
including error behavior
New elements
- section, article, aside, nav
- header, footer
- figure, figcaption
- time, meter, progress, mark
- audio, video, canvas
Not enough elements?
Not enough elements?
Are you sure?
Not enough elements?
Are you sure?
Use the class attribute
Sections
Each section is like a mini-document
New input types
search, email, url, tel,number,
range, color
date, month, week,
time, datetime, datetime-local
Input: not just text!
<input type="file" accept="image/*;capture=camera">
<!-- also: camcorder, microphone -->
Benefits of semantic markup
Better read by programs
- Screen readers
- Search engines
- Sharing tools
- Content clippers
- News grabbers
- ...
Easier to change presentation
Reusability across projects
<section class="carousel">
<h1>Featured Content</h1>
<article class="slide">
<h2>Slide Title</h2>
<div class="slide-content"> ... </div>
</article>
<article class="slide">
<h2>Slide Title</h2>
<div class="slide-content"> ... </div>
</article>
</section>
Improves your JS too
Demo: css-tricks.com
Mobile view
Mobile view (with navigation)
Evernote Clipped Article
Search result snippet (article)
Search result snippet (home)
Google Plus Share
Takeaways
Be responsible about IA*
Your HTML = your IA
Hyperlinks are important!
Don't break their functionality!
Experiment, make mistakes
Follow the standards
Stuff gets obsolete
Let's talk!
Attributions
- Boston Globe responsive website by Antoine Lefeuvre
- Extend, connect share from image by Noah Sussman
- WWW browser by Tim Berners-Lee
- HTML5 Logo by W3C
- JS Logo by AJ ONeal
- CSS3 Logo by ???
- HTML5 Elements image by Tim Wright
- Content is like water image by Stéphanie Walter