html5 semantics

Download HTML5 Semantics

Post on 17-Jan-2017

48 views

Category:

Design

0 download

Embed Size (px)

TRANSCRIPT

  • HTML

    SEMANTICS

    Shay Howe@shayhowewww.shayhowe.com

    http://www.shayhowe.comhttp://www.shayhowe.com

  • HTML Semantics

    SHAY HOWEwww.shayhowe.com @shayhowe

    @shayhowe

    http://www.shayhowe.comhttp://www.shayhowe.com

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

    @shayhoweHTML Semantics

  • STRUCTURAL

    @shayhoweHTML Semantics

  • 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

    ... ... ... ...

    @shayhoweHTML Semantics

  • ARIA ROLES

    ... ... ... ...

    @shayhoweHTML Semantics

  • TEXT

    @shayhoweHTML Semantics

  • BOLDING TEXTB...Stylistically offset without importance. Strong...Strong emphasis.

    @shayhoweHTML Semantics

  • ITALICIZING TEXTI...Alternative voice or tone. Em...Stressed emphasis.

    @shayhoweHTML Semantics

  • UNDERLINING TEXTU...An unarticulated annotation. Ins...Text added to the document.

    @shayhoweHTML Semantics

    http://shayhowe.comhttp://shayhowe.com

  • STRIKING TEXTS...No longer accurate or relevant. Del...Text deleted from the document.

    @shayhoweHTML Semantics

    http://shayhowe.comhttp://shayhowe.com

  • NAVIGATION & ACTIONSNav...Major navigational links. Menu...Group of controls, commonly within web apps.

    @shayhoweHTML Semantics

  • HYPERLINKSInlineShay Howe is a front-end web designer and developer. Block

    Shay HoweFront-end web designer and developer.

    @shayhoweHTML Semantics

    http://www.shayhowe.comhttp://www.shayhowe.comhttp://www.shayhowe.comhttp://www.shayhowe.com

  • HYPERLINK DOWNLOADBoolean

    Company Logo

    With a value

    Company Logo

    @shayhoweHTML Semantics

  • HYPERLINK REL ATTRIBUTEPossible Values

    Privacy Policy/Terms of Use

    @shayhowe

    licensenextprevprevsection

    subsectionstartstylesheettag

    alternateappendixbookmarkchaptercontents

    contentscopyrightglossaryhelpindex

    HTML Semantics

  • CITATIONS CiteSteve Jobs by Walter Isaacson is truly inspirational.Specifically a reference to a title of work.

    @shayhoweHTML Semantics

  • QUOTATIONSQSteve Jobs once said, Stay hungry, stay foolish.Short, inline quotation.

    Blockquote

    Design is a funny word... Steve Jobs in Fortune Magazine

    Longer, extended quotation.

    @shayhoweHTML Semantics

    http://www.businessweek.com/magazine/content/06_06/b3970001.htmhttp://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.

    @shayhoweHTML Semantics

  • HIGHLIGHTING TEXTSearch results for 'chicago'

    Shay is from Chicago.

    @shayhoweHTML Semantics

    http://www.shayhowe.comhttp://www.shayhowe.com

  • GAUGING SCALE7 out of 10 stars

    7 stars

    The car is moving at a decent average mile per hour.

    @shayhoweHTML Semantics

  • INDICATING PROGRESSYou are 50% complete.

    Hold tight, your getting there.

    @shayhoweHTML Semantics

  • REPRESENTING TIME3pm

    August 24th, 2011

    August 24th, 2011 at 3pm

    August 24th, 2011

    2011-08-24

    @shayhoweHTML Semantics

  • HIDING CONTENT Good...Element, and contents, are not yet, or no longer relevant.

    Not as Good...No value, commonly read by assistive technology.

    @shayhoweHTML Semantics

  • USING PSEUDO SELECTORSHTMLHello & welcome...

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

    Hello & welcome...@shayhoweHTML Semantics

  • LIST

    @shayhoweHTML Semantics

  • SETTING A START

    30 31 32 33

    30 31 40 41

    @shayhoweHTML Semantics

  • REVERSING A LIST

    4 3 2 1

    4 3 30 29

    @shayhoweHTML Semantics

  • IMAGES

    @shayhoweHTML Semantics

  • FIGURE & FIGCAPTION

    Shay Howe, the Man

    Summer Months

    @shayhoweHTML Semantics

  • ALT VS. TITLE TEXTAlternate TextReplace an image, should it not be available Title TextProvide a description of an image

    @shayhoweHTML Semantics

  • VIDEO

    @shayhoweHTML Semantics

  • VIDEO

    @shayhoweHTML Semantics

  • VIDEO FALLBACKS

    Download Movie: WebM, MPEG-4, Ogg.

    @shayhoweHTML Semantics

  • VIDEO TRACKS

    @shayhoweHTML Semantics

  • AUDIO

    @shayhoweHTML Semantics

  • AUDIO

    @shayhoweHTML Semantics

  • AUDIO FALLBACKS

    Download Song:

    OggACC.

    @shayhoweHTML Semantics

  • IFRAMES

    @shayhoweHTML Semantics

  • FALLBACK

    View embedded webpage.

    @shayhoweHTML Semantics

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

    @shayhoweHTML Semantics

  • 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

    @shayhoweHTML Semantics

  • SANDBOX VALUESBoolean

    Single Value

    Multiple Values

    @shayhoweHTML Semantics

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

    View embedded webpage.

    @shayhoweHTML Semantics

  • FORMS

    @shayhoweHTML Semantics

  • COLOR

    @shayhoweHTML Semantics

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

    @shayhoweHTML Semantics

  • EMAIL

    @shayhoweHTML Semantics

  • NUMBER

    @shayhoweHTML Semantics

  • RANGE

    @shayhoweHTML Semantics

  • TEL

    @shayhoweHTML Semantics

  • SEARCH

    @shayhoweHTML Semantics

  • URL

    @shayhoweHTML Semantics

  • DATALIST

    @shayhoweHTML Semantics

  • AUTOMATION Autocomplete

    Autofocus

    @shayhoweHTML Semantics

  • ASSISTANCE Placeholder

    Title

    @shayhoweHTML Semantics

  • DISABLING INPUTS Inputs

    Groups of inputs

    @shayhoweHTML Semantics

  • INCREMENTAL STEPS Numbers

    Time

    @shayhoweHTML Semantics

  • VALIDATION Required

    Pattern

    Maxlength

    @shayhoweHTML Semantics

  • VALIDATIONHTML

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

    @shayhoweHTML Semantics

  • GET INVOLVED

    @shayhoweHTML Semantics

  • QUESTIONS?Thank you!

    @shayhoweHTML Semantics

Recommended

View more >