Embed Size (px)
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.
Citation preview
GOALSThoughtful approach to composing HTMLTreat HTML pages as documentsBetter overall front end code
REAL WORLD DOCUMENT:PUBLICATION
Has structure!Front pageTable of contentsIntroductionChaptersConclusionReferences
Other elementsHeader & footerFootnotesAsidesDefinitionsTablesFormulas...
WORLD WIDE WEB
Deep nesting
High dynamicity
Many representations
Still documents
Fundamental concept behind WWW
HYPERTEXT
Plenty of texts with links between them
The Idea
Extend, connect, share
The language?HyperText Markup Language
THE WEB TRIFORCE
HTML DOCUMENTSComposed of elements
<html> <!-- ROOT ELEMENT --> <head> <!-- METADATA: title, author, description, etc. --> </head>
<body> <!-- PAYLOAD CONTENT --> </body></html>
ELEMENT ORDERMATTERS!
Search enginesMobile browsingKeyboard navigationFind in page
ELEMENT ORDER
ELEMENT ORDER
Are the essence of the World Wide Web
LINKS
Hyperlinks
<a href="/cats.html">Please don't break my href!</a>
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.
Other uses of link
AUTHOR
SITE SEARCH
NEWS FEED
ALSO...
Alternate languagePrevious/next pageLicensePDF version
for moreSee the spec
HTML5Simplified syntaxNew elements and attributesNew APIPrecisely defined parsing rules,including error behavior
New elementssection, article, aside, navheader, footerfigure, figcaptiontime, meter, progress, markaudio, video, canvas
Full list
Not enough elements?
Not enough elements?Are you sure?
Not enough elements?Are you sure?
Use the class attribute
Sections
Each section is like a mini-document
New input typessearch, email, url, tel,number,
range, colordate, month, week,
time, datetime, datetime-localSee examples
Input: not just text!
<input type="file" accept="image/*;capture=camera"> <!-- also: camcorder, microphone -->
Demo
BENEFITS OF SEMANTICMARKUP
Better read by programsScreen readersSearch enginesSharing toolsContent clippersNews grabbers...
Easier to change presentation
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
Improves your JS too
Mobile view
Mobile view (with navigation)
Search result snippet (article)
Search result snippet (home)
Google Plus Share
TAKEAWAYS
Be responsible about IA*Your HTML = your IA
Hyperlinks are important!Don't break their functionality!
Experiment, make mistakes
Follow the standards
Stuff gets obsolete
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
