Semantics have been an underlining part of HTML for years, using elements, attributes, and values to reinforce the meaning of content. In the wake of popularity, HTML5 has expanded the library of semantic options and cleaned up former semantic options along the way. These improved semantics advocate accessibility and progressive enhancement, providing more intuitive user interfaces and mobile supplementation. One problem still looms, semantics are only of benefit when used properly. Adoption at large is necessary, and essential to building a better web.
4. WHY SEMANTICS?
Unambiguous, shared meaning
Give content significant value and meaning.
Accessibility
Provide information to assistive technologies.
Search & globalization
Improve visibility and internalization.
Interoperability
Allow exchange and use of information.
@shayhoweHTML Semantics
6. STRUCTURAL ELEMENTS
@shayhowe
Header
Introductory or
navigational aids.
Nav
Section with navigational
links.
Article
Independently reusable
content.
Section
Generically, thematic
grouping.
Aside
Tangentially related
content.
Footer
Closing related content.
HTML Semantics
13. STRIKING TEXT
S
<s>...</s>
No longer accurate or relevant.
Del
<del cite="#" datetime="2011-‐08-‐24">...</del>
Text deleted from the document.
@shayhoweHTML Semantics
15. HYPERLINKS
Inline
<p><a href="http://www.shayhowe.com/">Shay
Howe</a> is a front-‐end web designer and
developer.</p>
Block
<a href="http://www.shayhowe.com/">
<h1>Shay Howe</h1>
<p>Front-‐end web designer and developer.</p>
</a>
@shayhoweHTML Semantics
17. HYPERLINK REL ATTRIBUTE
Possible Values
<a href="legal.html" rel="copyright">
Privacy Policy/Terms of Use
</a>
@shayhowe
license
next
prev
prev
section
subsection
start
stylesheet
tag
alternate
appendix
bookmark
chapter
contents
contents
copyright
glossary
help
index
HTML Semantics
19. QUOTATIONS
Q
<p><a href="#">Steve Jobs</a> once said, <q
cite="#">Stay hungry, stay foolish.</q></p>
Short, inline quotation.
Blockquote
<blockquote cite="#">
<p>Design is a funny word...</p>
<p><a href="#">Steve Jobs</a> in <cite><a
href="#">Fortune Magazine</a></cite></p>
</blockquote>
Longer, extended quotation.
@shayhoweHTML Semantics
20. LANGUAGE SUPPORT
English
q:lang(en) {
quotes: "201C" "201D" "2018" "2019";
}
“English quote with a ‘nested’ quote.”
French
q:lang(fr) {
quotes: "AB" "BB";
}
«French quote with a «nested» quote.»
@shayhoweHTML Semantics
21. HIGHLIGHTING TEXT
<h1>Search results for 'chicago'</h1>
<ol>
<li>
<a href="http://www.shayhowe.com/">Shay is
from <mark>Chicago</mark>.</a>
</li>
</ol>
@shayhoweHTML Semantics
22. GAUGING SCALE
<meter>7 out of 10 stars</meter>
<meter max="10">7 stars</meter>
<meter min="0" max="105" low="5" high="65"
optimum="45" value="47">The car is moving at
a decent average mile per hour.</meter>
@shayhoweHTML Semantics
23. INDICATING PROGRESS
You are <progress>50%</progress> complete.
<progress min="0" max="100" value="50">Hold
tight, your getting there.</progress>
@shayhoweHTML Semantics
25. HIDING CONTENT
Good
<div hidden>...</div>
Element, and contents, are not yet, or no longer relevant.
Not as Good
<div style="display: none;">...</div>
No value, commonly read by assistive technology.
@shayhoweHTML Semantics
26. USING PSEUDO SELECTORS
HTML
<p>Hello <abbr title="and">&</abbr>
welcome...</p>
CSS
p:first-‐letter {
font-‐size: 40px;
}
abbr[title="and"] {
font: italic 18px Baskerville, serif;
}
Hello & welcome...
@shayhoweHTML Semantics
32. ALT VS. TITLE TEXT
Alternate Text
Replace an image, should it not be available
Title Text
Provide a description of an image
<img src="june.jpg" height="200" width="200"
alt="June is a summer month with 30 days,
coming after May and before July"
title="Month of June">
@shayhoweHTML Semantics
42. SANDBOX ATTRIBUTE
No form submission
No JavaScript
No external link targets
Restricted local access
No plug-ins
@shayhoweHTML Semantics
43. SANDBOX VALUES
allow-forms
Allow form submissions
allow-scripts
Allow scripts to execute
allow-same-origin
Treat content as if it is from the local server
allow-top-navigation
Allow links to open in other browsing contexts
@shayhoweHTML Semantics
44. SANDBOX VALUES
Boolean
<iframe src="page.html" sandbox>
Single Value
<iframe src="page.html" sandbox="allow-‐forms">
Multiple Values
<iframe src="page.html"
sandbox="allow-‐scripts allow-‐same-‐origin">
@shayhoweHTML Semantics
45. SEAMLESS ATTRIBUTE
Links open in parent window
CSS and JS are inherited
Screen readers read content inline
<iframe src="page.html" seamless>
<a href="page.html">View embedded webpage.</a>
</iframe>
@shayhoweHTML Semantics