Tweet
Tweet

Slide 1

Slide 1 text

HTML SEMANTICS Shay Howe @shayhowe www.shayhowe.com

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

WHY SEMANTICS? @shayhowe HTML Semantics

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

STRUCTURAL @shayhowe HTML Semantics

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

STRUCTURAL ELEMENTS            ...                ...        ...    ... @shayhowe HTML Semantics

Slide 8

Slide 8 text

ARIA ROLES            ...                ...        ...    ... @shayhowe HTML Semantics

Slide 9

Slide 9 text

TEXT @shayhowe HTML Semantics

Slide 10

Slide 10 text

BOLDING TEXT B ... Stylistically offset without importance. Strong ... Strong emphasis. @shayhowe HTML Semantics

Slide 11

Slide 11 text

ITALICIZING TEXT I ... Alternative voice or tone. Em ... Stressed emphasis. @shayhowe HTML Semantics

Slide 12

Slide 12 text

UNDERLINING TEXT U ... An unarticulated annotation. Ins ... Text added to the document. @shayhowe HTML Semantics

Slide 13

Slide 13 text

STRIKING TEXT S ... No longer accurate or relevant. Del ... Text deleted from the document. @shayhowe HTML Semantics

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

HYPERLINKS Inline

Shay      Howe  is  a  front-­‐end  web  designer  and      developer.

Block

Shay  Howe

Front-­‐end  web  designer  and  developer.

 @shayhowe HTML Semantics

Slide 16

Slide 16 text

HYPERLINK DOWNLOAD Boolean    Company  Logo With a value    Company  Logo @shayhowe HTML Semantics

Slide 17

Slide 17 text

HYPERLINK REL ATTRIBUTE Possible Values    Privacy  Policy/Terms  of  Use @shayhowe license next prev prev section subsection start stylesheet tag alternate appendix bookmark chapter contents contents copyright glossary help index HTML Semantics

Slide 18

Slide 18 text

CITATIONS Cite

Steve  Jobs  by      Walter  Isaacson  is  truly  inspirational.

Specifically a reference to a title of work. @shayhowe HTML Semantics

Slide 19

Slide 19 text

QUOTATIONS Q

Steve  Jobs  once  said,  Stay  hungry,  stay  foolish.

Short, inline quotation. Blockquote
   

Design  is  a  funny  word...

   

Steve  Jobs  in  Fortune  Magazine

Longer, extended quotation. @shayhowe HTML Semantics

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

HIGHLIGHTING TEXT

Search  results  for  'chicago'

       
  1.        Shay  is              from  Chicago.    
@shayhowe HTML Semantics

Slide 22

Slide 22 text

GAUGING SCALE 7  out  of  10  stars 7  stars The  car  is  moving  at      a  decent  average  mile  per  hour. @shayhowe HTML Semantics

Slide 23

Slide 23 text

INDICATING PROGRESS You  are  50%  complete. Hold      tight,  your  getting  there. @shayhowe HTML Semantics

Slide 24

Slide 24 text

REPRESENTING TIME 3pm August  24th,  2011 time> August  24th,    2011  at  3pm August    24th,  2011 2011-­‐08-­‐24 @shayhowe HTML Semantics

Slide 25

Slide 25 text

HIDING CONTENT Good
...
Element, and contents, are not yet, or no longer relevant. Not as Good
...
No value, commonly read by assistive technology. @shayhowe HTML Semantics

Slide 26

Slide 26 text

USING PSEUDO SELECTORS HTML

Hello  &      welcome...

CSS p:first-­‐letter  {    font-­‐size:  40px; } abbr[title="and"]  {    font:  italic  18px  Baskerville,  serif;     } Hello & welcome... @shayhowe HTML Semantics

Slide 27

Slide 27 text

LIST @shayhowe HTML Semantics

Slide 28

Slide 28 text

SETTING A START
       
  1. 30
    2.    
  2. 31
    3.    
  3. 32
    4.    
  4. 33
       
  1. 30
    2.    
  2. 31
    3.    
  3. 40
    4.    
  4. 41
@shayhowe HTML Semantics

Slide 29

Slide 29 text

REVERSING A LIST
       
  1. 4
    2.    
  2. 3
    3.    
  3. 2
    4.    
  4. 1
       
  1. 4
    2.    
  2. 3
    3.    
  3. 30
    4.    
  4. 29
@shayhowe HTML Semantics

Slide 30

Slide 30 text

IMAGES @shayhowe HTML Semantics

Slide 31

Slide 31 text

FIGURE & FIGCAPTION        Shay  Howe,  the  Man            Summer  Months @shayhowe HTML Semantics

Slide 32

Slide 32 text

ALT VS. TITLE TEXT Alternate Text Replace an image, should it not be available Title Text Provide a description of an image @shayhowe HTML Semantics

Slide 33

Slide 33 text

VIDEO @shayhowe HTML Semantics

Slide 34

Slide 34 text

VIDEO @shayhowe HTML Semantics

Slide 35

Slide 35 text

VIDEO FALLBACKS                

Download  Movie:    WebM,    MPEG-­‐4,    Ogg.

@shayhowe HTML Semantics

Slide 36

Slide 36 text

VIDEO TRACKS                         @shayhowe HTML Semantics

Slide 37

Slide 37 text

AUDIO @shayhowe HTML Semantics

Slide 38

Slide 38 text

AUDIO @shayhowe HTML Semantics

Slide 39

Slide 39 text

AUDIO FALLBACKS            

Download  Song: Ogg ACC.

@shayhowe HTML Semantics

Slide 40

Slide 40 text

IFRAMES @shayhowe HTML Semantics

Slide 41

Slide 41 text

FALLBACK    View  embedded  webpage. @shayhowe HTML Semantics

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

SANDBOX VALUES Boolean Single Value Multiple Values @shayhowe HTML Semantics

Slide 45

Slide 45 text

SEAMLESS ATTRIBUTE Links open in parent window CSS and JS are inherited Screen readers read content inline    View  embedded  webpage. @shayhowe HTML Semantics

Slide 46

Slide 46 text

FORMS @shayhowe HTML Semantics

Slide 47

Slide 47 text

COLOR @shayhowe HTML Semantics

Slide 48

Slide 48 text

DATE & TIME date:  2012-­‐05-­‐21 datetime:  2012-­‐05-­‐24T12:00:00+01 month:  2012-­‐05 time:  12:00:00 week:  2012-­‐W21 @shayhowe HTML Semantics

Slide 49

Slide 49 text

EMAIL @shayhowe HTML Semantics

Slide 50

Slide 50 text

NUMBER @shayhowe HTML Semantics

Slide 51

Slide 51 text

RANGE @shayhowe HTML Semantics

Slide 52

Slide 52 text

TEL @shayhowe HTML Semantics

Slide 53

Slide 53 text

SEARCH @shayhowe HTML Semantics

Slide 54

Slide 54 text

URL @shayhowe HTML Semantics

Slide 55

Slide 55 text

DATALIST             @shayhowe HTML Semantics

Slide 56

Slide 56 text

AUTOMATION Autocomplete Autofocus @shayhowe HTML Semantics

Slide 57

Slide 57 text

ASSISTANCE Placeholder Title @shayhowe HTML Semantics

Slide 58

Slide 58 text

DISABLING INPUTS Inputs Groups of inputs         @shayhowe HTML Semantics

Slide 59

Slide 59 text

INCREMENTAL STEPS Numbers Time @shayhowe HTML Semantics

Slide 60

Slide 60 text

VALIDATION Required Pattern Maxlength @shayhowe HTML Semantics

Slide 61

Slide 61 text

VALIDATION HTML CSS input:required:after  {    color:  red;    content:  "\002A"; } input:required:valid:after  {    color:  green;    content:  "\2713"; } @shayhowe HTML Semantics

Slide 62

Slide 62 text

GET INVOLVED @shayhowe HTML Semantics

Slide 63

Slide 63 text

QUESTIONS? Thank you! @shayhowe HTML Semantics