Download - HTML5 Semantics

HTML

SEMANTICS

Shay [email protected]

http://www.shayhowe.com


HTML Semantics

SHAY HOWEwww.shayhowe.com – @shayhowe

@shayhowe



WHY SEMANTICS?

@shayhoweHTML Semantics

WHY SEMANTICS?Unambiguous, shared meaningGive content significant value and meaning. AccessibilityProvide information to assistive technologies.

Search & globalizationImprove visibility and internalization.

InteroperabilityAllow exchange and use of information.


STRUCTURAL


STRUCTURAL ELEMENTS

@shayhowe

HeaderIntroductory or navigational aids.

NavSection with navigational links.

ArticleIndependently reusable content.

SectionGenerically, thematic grouping.

AsideTangentially related content.

FooterClosing related content.

HTML Semantics

STRUCTURAL ELEMENTS<body> <header> <nav>...</nav> </header> <article> <section>...</section> </article> <aside>...</aside> <footer>...</footer></body>


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>


TEXT


BOLDING TEXTB<b>...</b>Stylistically offset without importance. Strong<strong>...</strong>Strong emphasis.


ITALICIZING TEXTI<i>...</i>Alternative voice or tone. Em<em>...</em>Stressed emphasis.


UNDERLINING TEXTU<u>...</u>An unarticulated annotation. Ins<ins cite="#" datetime="2011-‐08-‐24">...</ins>Text added to the document.


http://shayhowe.com

http://shayhowe.com

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


http://shayhowe.com

http://shayhowe.com

NAVIGATION & ACTIONSNav<nav>...</nav>Major navigational links. Menu<menu>...</menu>Group of controls, commonly within web apps.


HYPERLINKSInline<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>






HYPERLINK DOWNLOADBoolean<a href="logo.png" download> Company Logo</a> With a value<a href="logo.png" download="Company-‐Logo"> Company Logo</a>


HYPERLINK REL ATTRIBUTEPossible Values

<a href="legal.html" rel="copyright"> Privacy Policy/Terms of Use</a>

@shayhowe

licensenextprevprevsection

subsectionstartstylesheettag

alternateappendixbookmarkchaptercontents

contentscopyrightglossaryhelpindex

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.


QUOTATIONSQ<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.


http://www.businessweek.com/magazine/content/06_06/b3970001.htm

http://www.businessweek.com/magazine/content/06_06/b3970001.htm

LANGUAGE SUPPORTEnglishq:lang(en) { quotes: "\201C" "\201D" "\2018" "\2019";}“English quote with a ‘nested’ quote.”

Frenchq:lang(fr) { quotes: "\AB" "\BB";}«French quote with a «nested» quote.»


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>




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>


INDICATING PROGRESSYou are <progress>50%</progress> complete.

<progress min="0" max="100" value="50">Hold tight, your getting there.</progress>


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>


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.


USING PSEUDO SELECTORSHTML<p>Hello <abbr title="and">&</abbr> welcome...</p>

CSSp:first-‐letter { font-‐size: 40px;}abbr[title="and"] { font: italic 18px Baskerville, serif; }

Hello & welcome...


LIST


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>


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>


IMAGES


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>


ALT VS. TITLE TEXTAlternate TextReplace an image, should it not be available Title TextProvide 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">


VIDEO


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>


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>


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>


AUDIO


AUDIO<audio src="song.mp3"></audio>

<audio src="song.mp3" autoplay controls loop preload="auto"></audio>


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>


IFRAMES


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


SANDBOX ATTRIBUTENo form submissionNo JavaScriptNo external link targetsRestricted local accessNo plug-ins


SANDBOX VALUESallow-formsAllow form submissions

allow-scriptsAllow scripts to execute

allow-same-originTreat content as if it is from the local server

allow-top-navigationAllow links to open in other browsing contexts


SANDBOX VALUESBoolean<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">


SEAMLESS ATTRIBUTELinks open in parent windowCSS and JS are inheritedScreen readers read content inline

<iframe src="page.html" seamless> <a href="page.html">View embedded webpage.</a></iframe>


FORMS


COLOR<input type="color" name="color">


DATE & TIMEdate: 2012-‐05-‐21datetime: 2012-‐05-‐24T12:00:00+01month: 2012-‐05time: 12:00:00week: 2012-‐W21

<input type="datetime-‐local" name="event">


EMAIL<input type="email" name="email" multiple>


NUMBER<input type="number" name="cost" min="10" max="100">


RANGE<input type="range" name="rating" min="0" max="10">


TEL<input type="tel" name="phone">


SEARCH<input type="search" name="query">


URL<input type="url" name="website">


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


AUTOMATION Autocomplete<form action="foo" autocomplete="off"><input type="text" name="destination" autocomplete="off">

Autofocus<input type="text" name="destination" autofocus>


ASSISTANCE Placeholder<input type="text" name="destination" placeholder="Chicago">

Title<input type="text" name="destination" title="Please enter your destination.">


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>


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">


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">


VALIDATIONHTML<input type="text" name="destination" required>

CSSinput:required:after { color: red; content: "\002A";}input:required:valid:after { color: green; content: "\2713";}


GET INVOLVED


QUESTIONS?Thank you!


Download - HTML5 Semantics

Top Related