semantic html
DESCRIPTION
See the Web version for better experience: http://dpashkevich.github.io/pres-semantichtml A presentation on semantic markup that advocates for a more thoughtful approach to architecting Web content and explains the benefits of it.TRANSCRIPT
![Page 2: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/2.jpg)
GOALSThoughtful approach to composing HTMLTreat HTML pages as documentsBetter overall front end code
![Page 3: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/3.jpg)
REAL WORLD DOCUMENT:PUBLICATION
![Page 4: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/4.jpg)
Has structure!Front pageTable of contentsIntroductionChaptersConclusionReferences
![Page 5: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/5.jpg)
![Page 6: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/6.jpg)
![Page 7: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/7.jpg)
![Page 8: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/8.jpg)
![Page 9: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/9.jpg)
Other elementsHeader & footerFootnotesAsidesDefinitionsTablesFormulas...
![Page 10: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/10.jpg)
WORLD WIDE WEB
![Page 13: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/13.jpg)
Deep nesting
![Page 14: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/14.jpg)
High dynamicity
![Page 15: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/15.jpg)
Many representations
![Page 16: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/16.jpg)
Still documents
![Page 18: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/18.jpg)
Fundamental concept behind WWW
HYPERTEXT
![Page 19: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/19.jpg)
Plenty of texts with links between them
The Idea
![Page 20: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/20.jpg)
Extend, connect, share
![Page 21: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/21.jpg)
The language?HyperText Markup Language
![Page 22: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/22.jpg)
THE WEB TRIFORCE
![Page 23: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/23.jpg)
HTML DOCUMENTSComposed of elements
<html> <!-- ROOT ELEMENT --> <head> <!-- METADATA: title, author, description, etc. --> </head>
<body> <!-- PAYLOAD CONTENT --> </body></html>
![Page 24: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/24.jpg)
ELEMENT ORDERMATTERS!
Search enginesMobile browsingKeyboard navigationFind in page
![Page 26: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/26.jpg)
ELEMENT ORDER
![Page 27: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/27.jpg)
ELEMENT ORDER
![Page 28: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/28.jpg)
Are the essence of the World Wide Web
LINKS
![Page 29: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/29.jpg)
Hyperlinks
<a href="/cats.html">Please don't break my href!</a>
![Page 30: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/30.jpg)
Links to external resources
<link rel="shortcut icon" href="/favicon.ico"><link rel="apple-touch-icon" href="/touch-icon.png"><link rel="stylesheet" href="/styles/main.css">
… used to augment the current document,generally automatically processed by theuser agent.
![Page 31: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/31.jpg)
Other uses of link
![Page 32: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/32.jpg)
AUTHOR
![Page 33: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/33.jpg)
SITE SEARCH
![Page 34: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/34.jpg)
NEWS FEED
![Page 35: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/35.jpg)
ALSO...
Alternate languagePrevious/next pageLicensePDF version
for moreSee the spec
![Page 36: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/36.jpg)
HTML5Simplified syntaxNew elements and attributesNew APIPrecisely defined parsing rules,including error behavior
![Page 37: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/37.jpg)
New elementssection, article, aside, navheader, footerfigure, figcaptiontime, meter, progress, markaudio, video, canvas
Full list
![Page 38: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/38.jpg)
Not enough elements?
![Page 39: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/39.jpg)
Not enough elements?Are you sure?
![Page 40: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/40.jpg)
Not enough elements?Are you sure?
Use the class attribute
![Page 41: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/41.jpg)
Sections
Each section is like a mini-document
![Page 42: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/42.jpg)
New input typessearch, email, url, tel,number,
range, colordate, month, week,
time, datetime, datetime-localSee examples
![Page 43: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/43.jpg)
Input: not just text!
<input type="file" accept="image/*;capture=camera"> <!-- also: camcorder, microphone -->
Demo
![Page 44: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/44.jpg)
BENEFITS OF SEMANTICMARKUP
![Page 45: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/45.jpg)
Better read by programsScreen readersSearch enginesSharing toolsContent clippersNews grabbers...
![Page 46: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/46.jpg)
Easier to change presentation
![Page 47: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/47.jpg)
Reusability across projects<section class="carousel"> <h1>Featured Content</h1>
<article class="slide"> <h2>Slide Title</h2> <div class="slide-content"> ... </div> </article>
<article class="slide"> <h2>Slide Title</h2> <div class="slide-content"> ... </div> </article></section>
More great patterns from Anthony Ticknor
![Page 48: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/48.jpg)
Improves your JS too
![Page 50: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/50.jpg)
Mobile view
![Page 51: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/51.jpg)
Mobile view (with navigation)
![Page 52: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/52.jpg)
![Page 54: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/54.jpg)
Search result snippet (article)
![Page 55: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/55.jpg)
Search result snippet (home)
![Page 56: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/56.jpg)
Google Plus Share
![Page 57: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/57.jpg)
TAKEAWAYS
![Page 58: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/58.jpg)
Be responsible about IA*Your HTML = your IA
![Page 59: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/59.jpg)
Hyperlinks are important!Don't break their functionality!
![Page 60: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/60.jpg)
Experiment, make mistakes
![Page 61: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/61.jpg)
Follow the standards
![Page 62: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/62.jpg)
Stuff gets obsolete
![Page 64: Semantic HTML](https://reader034.vdocuments.mx/reader034/viewer/2022051611/54b6c2d84a795908318b45cf/html5/thumbnails/64.jpg)
ATTRIBUTIONSBoston Globe responsive website by Extend, connect share from image by WWW browser by HTML5 Logo by JS Logo by CSS3 Logo by ???HTML5 Elements image by Content is like water image
Antoine LefeuvreNoah Sussman
Tim Berners-LeeW3C
AJ ONeal
Tim Wrightby Stéphanie Walter