Lesser Spotted HTML

Elements you may not have seen in the wild. For examples check out http://rumyra.com/playground/html

Transcript

1. Lesser  spo(ed   HTML  
2. Hi  I’m  Ruth   •  @rumyra   •  The  Lab  @  o2   •  Front  End  Dev,  Design,  UX  
6. Educate   Here  to  help  J  
7. FormaEng   <mark>  highlighted   <dfn title=“definition”>term</dfn> <abbr title=“United Kingdom”>UK</ abbr> <kbd> keyboard   <samp> sample  output  from  program   <var> equaKon  variable   <bdi> <bdo> <ruby> <rt> <rp>
8. Forms   <keygen name=”name" challenge=”challengestring” keytype=“type” keyparams=“pqg- params”> <output name=”result”></output> <form oninput=“result.value=parseInt(a.value) +parseInt(b.value)”> 0<input type=”range” name=“b” value=“50” />100 +<input type=”range” name=“a” value=“50” />= <output name=”result”></output> </form>
9. Forms   <input type=”text” list=“browsers” /> <datalist id=“browsers”> <option value=“Chrome”> <option value=“Firefox”> <option value=“Internet Explorer”> <option value=“Opera”> <option value=“Safari”> </datalist>
10. Other   <details> <summary>This is a summary</summary> <p>This is where the details would go…</p> </details> Heat the oven to <meter min="200" max="500" value="350">350 degrees</ meter> <progress value="70" max="100">70 %</ progress>
11. Not  all  the  things   More  to  think  about…  find  out  more  
12. See  how  they  look   h(p://rumyra.com/playground/html/    
13. Further  reading   Mozilla  Docs   h(ps://developer.mozilla.org/en-­‐US/docs/HTML/ Element   W3C  HTML5  DocumentaKon   h(p://dev.w3.org/html5/html-­‐author/   HTML5  Rocks!   h(p://www.html5rocks.com/en/   HTML5  Doctor   h(p://html5doctor.com