HTML Semantics

HTML SEMANTICS Shay Howe @shayhowe www.shayhowe.com

HTML Semantics SHAY HOWE www.shayhowe.com – @shayhowe @shayhowe

WHY SEMANTICS? @shayhowe HTML Semantics

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. @shayhowe HTML Semantics

STRUCTURAL @shayhowe HTML Semantics

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

STRUCTURAL ELEMENTS <body> <header> <nav>...</nav>
</header> <article> <section>...</section> </article> <aside>...</aside> <footer>...</footer> </body> @shayhowe HTML Semantics

ARIA ROLES <body> <header role="banner"> <nav
role="navigation">...</nav> </header> <article role="article"> <section role="region">...</section> </article> <aside role="complementary">...</aside> <footer role="contentinfo">...</footer> </body> @shayhowe HTML Semantics

TEXT @shayhowe HTML Semantics

BOLDING TEXT B <b>...</b> Stylistically offset without importance. Strong <strong>...</strong>
Strong emphasis. @shayhowe HTML Semantics

ITALICIZING TEXT I <i>...</i> Alternative voice or tone. Em <em>...</em>
Stressed emphasis. @shayhowe HTML Semantics

UNDERLINING TEXT U <u>...</u> An unarticulated annotation. Ins <ins cite="#"
datetime="2011-‐08-‐24">...</ins> Text added to the document. @shayhowe HTML Semantics

STRIKING TEXT S <s>...</s> No longer accurate or relevant. Del
<del cite="#" datetime="2011-‐08-‐24">...</del> Text deleted from the document. @shayhowe HTML Semantics

NAVIGATION & ACTIONS Nav <nav>...</nav> Major navigational links. Menu <menu>...</menu>
Group of controls, commonly within web apps. @shayhowe HTML Semantics

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> @shayhowe HTML Semantics

HYPERLINK DOWNLOAD Boolean <a href="logo.png" download> Company Logo </a>
With a value <a href="logo.png" download="Company-‐Logo"> Company Logo </a> @shayhowe HTML Semantics

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

CITATIONS Cite <p><cite><a href="#">Steve Jobs</a></cite> by Walter Isaacson
is truly inspirational.</p> Specifically a reference to a title of work. @shayhowe HTML Semantics

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. @shayhowe HTML Semantics

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.» @shayhowe HTML Semantics

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> @shayhowe HTML Semantics

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> @shayhowe HTML Semantics

INDICATING PROGRESS You are <progress>50%</progress> complete. <progress min="0" max="100" value="50">Hold
tight, your getting there.</progress> @shayhowe HTML Semantics

REPRESENTING TIME <time datetime="15:00">3pm</time> <time datetime="2011-‐08-‐24">August 24th, 2011</ time> <time
datetime="2011-‐08-‐24T15:00">August 24th, 2011 at 3pm</time> <time datetime="2011-‐08-‐24" pubdate>August 24th, 2011</time> <time>2011-‐08-‐24</time> @shayhowe HTML Semantics

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. @shayhowe HTML Semantics

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... @shayhowe HTML Semantics

LIST @shayhowe HTML Semantics

SETTING A START <ol start="30"> <li>30</li> <li>31</li>
<li>32</li> <li>33</li> </ol> <ol start="30"> <li>30</li> <li>31</li> <li value="40">40</li> <li>41</li> </ol> @shayhowe HTML Semantics

REVERSING A LIST <ol reversed> <li>4</li> <li>3</li>
<li>2</li> <li>1</li> </ol> <ol reversed> <li>4</li> <li>3</li> <li value="30">30</li> <li>29</li> </ol> @shayhowe HTML Semantics

IMAGES @shayhowe HTML Semantics

FIGURE & FIGCAPTION <figure> <img src="shay.jpg" height="300" width="200">
<figcaption>Shay Howe, the Man</figcaption> </figure> <figure> <img src="june.jpg" height="200" width="200"> <img src="july.jpg" height="200" width="200"> <figcpation>Summer Months</figcaption> </figure> @shayhowe HTML Semantics

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"> @shayhowe HTML Semantics

VIDEO @shayhowe HTML Semantics

VIDEO <video src="movie.webm" height="390" width="640"> </video> <video src="movie.webm"
height="390" width="640" poster="poster.jpg" preload="auto" autoplay controls loop muted> </video> @shayhowe HTML Semantics

VIDEO FALLBACKS <video height="390" width="640" poster="poster.jpg"> <source src="movie.webm"
type='video/webm; codecs="vp8, vorbis"'> <source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'> <source src="movie.ogv" type='video/ogg; codecs="theora, voris"'> <object type="application/x-‐shockwave-‐flash" data="player.swf"> <img src="poster.jpg" alt="" title="Movie Poster"> <p><strong>Download Movie:</strong> <a href="movie.webm" download>WebM</a>, <a href="movie.mp4" download>MPEG-‐4</a>, <a href="movie.ogv" download>Ogg</a>.</p> </object> </video> @shayhowe HTML Semantics

VIDEO TRACKS <video height="390" width="640" poster="poster.jpg"> <source src="movie.webm"
type='video/webm; codecs="vp8, vorbis"'> <source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'> <source src="movie.ogv" type='video/ogg; codecs="theora, voris"'> <track kind="captions" label="English Captions" src="english-‐cc.vtt" srclang="en" default> <track kind="subtitles" label="English Subtitles" src="english-‐st.vtt" srclang="en"> <track kind="subtitles" label="French Subtitles" src="french-‐st.vtt" srclang="fr"> </video> @shayhowe HTML Semantics

AUDIO @shayhowe HTML Semantics

AUDIO <audio src="song.mp3"></audio> <audio src="song.mp3" autoplay controls loop
preload="auto"></audio> @shayhowe HTML Semantics

AUDIO FALLBACKS <audio controls> <source src="song.oga"
type='audio/ogg; codecs="vorbis"'> <source src="song.m4a" type='audio/mp4; codecs="mp4a.40.2"'> <p><strong>Download Song:</strong> <a href="song.oga" download>Ogg</a> <a href="song.m4v" download>ACC</a>.</p> </audio> @shayhowe HTML Semantics

IFRAMES @shayhowe HTML Semantics

FALLBACK <iframe src="page.html" height="200" width="600"> <a href="page.html">View embedded
webpage.</a> </iframe> @shayhowe HTML Semantics

SANDBOX ATTRIBUTE No form submission No JavaScript No external link
targets Restricted local access No plug-ins @shayhowe HTML Semantics

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 @shayhowe HTML Semantics

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"> @shayhowe HTML Semantics

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> @shayhowe HTML Semantics

FORMS @shayhowe HTML Semantics

COLOR <input type="color" name="color"> @shayhowe HTML Semantics

DATE & TIME date: 2012-‐05-‐21 datetime: 2012-‐05-‐24T12:00:00+01 month: 2012-‐05 time:
12:00:00 week: 2012-‐W21 <input type="datetime-‐local" name="event"> @shayhowe HTML Semantics

EMAIL <input type="email" name="email" multiple> @shayhowe HTML Semantics

NUMBER <input type="number" name="cost" min="10" max="100"> @shayhowe HTML
Semantics

RANGE <input type="range" name="rating" min="0" max="10"> @shayhowe HTML
Semantics

TEL <input type="tel" name="phone"> @shayhowe HTML Semantics

SEARCH <input type="search" name="query"> @shayhowe HTML Semantics

URL <input type="url" name="website"> @shayhowe HTML Semantics

DATALIST <input type="text" name="city" list="cities"> <datalist id="cities"> <option value="Chicago">
<option value="Los Angeles"> <option value="New York"> </datalist> @shayhowe HTML Semantics

AUTOMATION Autocomplete <form action="foo" autocomplete="off"> <input type="text" name="destination"
autocomplete="off"> Autofocus <input type="text" name="destination" autofocus> @shayhowe HTML Semantics

ASSISTANCE Placeholder <input type="text" name="destination" placeholder="Chicago"> Title <input
type="text" name="destination" title="Please enter your destination."> @shayhowe HTML Semantics

DISABLING INPUTS Inputs <input type="text" name="destination" disabled> Groups of inputs
<fieldset disabled> <input type="text" name="destination"> <input type="number" name="cost"> </fieldset> @shayhowe HTML Semantics

INCREMENTAL STEPS Numbers <input type="number" name="cost" min="10" max="100"
step="2"> <input type="range" name="rating" min="0" max="10" step=".5"> Time <input type="date" name="event" min="2012-‐05-‐01" max="2012-‐08-‐32" step="2"> @shayhowe HTML Semantics

VALIDATION Required <input type="text" name="destination" required> Pattern <input type="tel" name="phone"
pattern="^[0-‐9]+[\-‐ ]*[0-‐9]+$"> Maxlength <input type="url" name="website" maxlength="100"> @shayhowe HTML Semantics

VALIDATION HTML <input type="text" name="destination" required> CSS input:required:after {
color: red; content: "\002A"; } input:required:valid:after { color: green; content: "\2713"; } @shayhowe HTML Semantics

GET INVOLVED @shayhowe HTML Semantics

QUESTIONS? Thank you! @shayhowe HTML Semantics

HTML Semantics

HTML Semantics

More Decks by Shay Howe

Other Decks in Technology

Featured

Transcript