semantics & html
Post on 07-Jul-2015
3.172 Views
Preview:
DESCRIPTION
TRANSCRIPT
Semantics & HTML
This presentation is best viewed in Netscape Navigator 4.0 on an 800 x 600 monitor
How did we get here?
A Brief History
1989 - Tim Berners-Lee writes proposal to join hypertext with the internet ... it’s called vague, but exciting
1991 - the world’s first website is put online at CERN
1994 - the W3C is founded at MIT
2001 - The Semantic Web published by Scientific American
The Semantic Web is
Expressing Meaning
Knowledge Representation
Ontologies
Agents
http://www.scientificamerican.com/article.cfm?id=the-semantic-web
Why semantic HTML?
Provide structure to your document
Construct more meaningful markup
Make your website accessible to a wider audience
Search Engine Optimization
How to ComposeSemantic HTML
POSH!(plain old semantic HTML)
The POSH Process
http://microformats.org/wiki/posh
Publish POSH content
Use valid (X)HTML
Use semantic (X)HTML
Spread and Share the idea of POSH
Improve POSH ideas & patterns
The POSH Checklist
http://microformats.org/wiki/posh
Stop using tables for presentational purposes
Stop using spacer gifs
Fix your Bed & Breakfast markup
Eliminate Anorexic Anchors
Re-use existing POSH patterns
Use good semantic class names
Choose the“Best” Element
Element Selection
Practice, Practice, Practice
Print the designs and write on them
Know the available elements
Know common patterns
http://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf
The Document Outline
The Document Outline
Gives the document structure
Built through headings in a linear fashion
New HTML5 sectioning elements and algorithm
Enhances accessibility for assistive devices
The Old Way
<h1>My Website</h1><h2>About Me</h2><p>Lorem ipsum dolor sit amet ... </p><h2>Recent News</h2><h3>News Item 1</h3><p>Lorem ipsum dolor sit amet ... </p><h3>News Item 2</h3><p>Lorem ipsum dolor sit amet ... </p><p>Lorem ipsum dolor sit amet ... </p><h2>Contact Me</h2><p>Lorem ipsum dolor sit amet ... </p>
The Old Way
I. My Website i. About Me ii. Recent News a. News Item 1 b. News Item 2 iii. Contact Me
The New Way
<h1>My Website</h1><section> <h1>About Me</h1> <p> ... </p></section><section> <h1>Recent News</h1> <article> <h1>News Item 1</h1> <p> ... </p> </article> <article> <h1>News Item 2</h1> <p> ... </p> </article></section>
The New Way
I. My Website i. About Me ii. Recent News a. News Item 1 b. News Item 2 iii. Contact Me
The Problem
I. My WebsiteII. About Me III. Recent NewsIV. News Item 1V. News Item 2VI. Contact Me
The Hybrid Solution
<h1>My Website</h1><section> <h2>About Me</h2> <p> ... </p></section><section> <h2>Recent News</h2> <article> <h3>News Item 1</h3> <p> ... </p> </article> <article> <h3>News Item 2</h3> <p> ... </p> </article></section>
The Hybrid Solution
I. My Website i. About Me ii. Recent News a. News Item 1 b. News Item 2 iii. Contact Me
Common Patterns
Generic Elements
<div class="generic-‐block"> ...</div>
<span class="generic-‐inline"> ...</span>
Grid System
<div class="grid-‐group"> <div class="grid single"> ... </div> <div class="grid triple"> ... </div></div>
Site Structure
<body> <header> ... </header> <section> <article> ... </article> </section> <aside> ... </aside> <footer> ... </footer></body>
Navigation
<nav class="nav-‐primary"> <ul class="list-‐nav"> <li><a href="link.html">Nav Item 1</a> <ul class="list-‐subnav"> <li><a href="link.html">Subnav 1</a></li> <li><a href="link.html">Subnav 2</a></li> </ul> </li> <li><a href="link.html">Nav Item 2</a></li> <li><a href="link.html">Nav Item 3</a></li> <li><a href="link.html">Nav Item 4</a></li> </ul></nav>
Breadcrumbs
<ol class="list-‐breadcrumbs"> <li><a href="link.html">Home</a></li> <li><a href="link.html">First Level</a></li> <li><a href="link.html">Second Level</a></li> <li><a href="link.html">Third Level</a></li></ol>
Pagination
<ol class="list-‐pagination"> <li><a href="link.html">First</a></li> <li><a href="link.html">Previous</a></li> <li><a href="link.html">4</a></li> <li><a href="link.html">5</a></li> <li><a href="link.html">6</a></li> <li><a href="link.html">7</a></li> <li><a href="link.html">Next</a></li> <li><a href="link.html">Last</a></li></ol>
Search Form
<form action="link.html" class="form-‐search"> <fieldset> <legend>Search Our Site</legend> <label for="input-‐site-‐search">Search</label> <input type="search" placeholder="Search Our Site" id="input-‐site-‐search" /> <input type="submit" value="Submit" /> </fieldset></form>
List of Articles
<section class="list-‐articles"><article> ... </article><article> ... </article><article> ... </article>
</section>
An Article
<article> <header> <h1>Article Headline</h1> <p>Published on <time datetime="2011-‐11-‐05">November 5th, 2011</time>.</p> </header> <div class="user-‐content"> ... </div> <footer> ... </footer></article>
Comments
<section class="comments"> <h1>Comments</h1> <article class="comment"> <header> <h3>Comment Title</h3> <p>Posted <time datetime="2011-‐11-‐05T19:10-‐08:00">1 hour ago</time> by Author Name</p> </header> <div class="user-‐content"> ... </div> </article> <article class="comment"> ... </article></section>
Carousel
<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>
Glossary
<aside class="glossary"> <h1>Glossary</h1> <dl> <dt><dfn>Asshole</dfn></dt> <dd>A variant of arsehole, which is still prevalent in British and Australian English, is a term used pejoratively to describe the anus.</dd> </dl></aside>
Audio
<audio controls preload="none"> <source src="ace-‐of-‐spades.ogg" type="audio/ogg"> <source src="ace-‐of-‐spades.mp3" type="audio/mpeg"> <object type="application/x-‐shockwave-‐flash" data="player.swf?soundFile=ace-‐of-‐spades.mp3"> <param name="movie" value="player.swf?soundFile=ace-‐of-‐spades.mp3"> <a href="ace-‐of-‐spades.mp3">Download Ace of Spades</a> </object></audio>
Video
<video controls width="320" height="240" poster="poster.jpg"> <source src="ace-‐of-‐spades.ogv" type="video/ogg"> <source src="ace-‐of-‐spades.mp4" type="video/mp4"> <object type="application/x-‐shockwave-‐flash" width="320" height="240" data="player.swf?file=ace-‐of-‐spades.mp4"> <param name="movie" value="player.swf?file=ace-‐of-‐spades.mp4"> <a href="ace-‐of-‐spades.mp4">Download Ace of Spades</a> </object></video>
Legal Information
<small>© 2012 MyCompany INC</small>
Media Object
<div class="media"> <div class="img"> <img src="image.jpg" alt="image" /> </div> <div class="bd"> ... </div></div>
Common Anti-Patterns
P is for Paragraph
<p class="footer"> © 2012 MyCompany. All Rights Reserved<br/> 123 Test Ave, City, ST, Zip Code</p>
-‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐
<p class="quote">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
P is for Paragraph
<div class="footer"> <div>© 2012 MyCompany. All Rights Reserved</div> <div>123 Test Ave, City, ST, Zip Code</div></div>
-‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐
<blockquote class="quote">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</blockquote>
FTFY
Empty Hyperlinks
<div class="tab-‐navigation"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a></div><div class="tabs"> <div class="tab"> ... </div> <div class="tab"> ... </div> <div class="tab"> ... </div></div>
Empty Hyperlinks
<div class="tab-‐navigation"> <a href="#tab-‐one">Link 1</a> <a href="#tab-‐two">Link 2</a> <a href="#tab-‐three">Link 3</a></div><div class="tabs"> <div class="tab" id="tab-‐one"> ... </div> <div class="tab" id="tab-‐two" > ... </div> <div class="tab" id="tab-‐three" > ... </div></div>
FTFY
Spacer Gifs!
<div> <img src="spacer.gif" width="100" heigh="100" alt="" /> <p> ... </p></div>
Spacer Gifs!
<div> <p> ... </p></div>
FTFY
Non Breaking Space
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Non Breaking Space
<p class="indent">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
FTFY
Inline Pipe Delimiters
<footer> <div> <a href="link.html">Link 1</a> | <a href="link.html">Link 2</a> | <a href="link.html">Link 3</a> | <a href="link.html">Link 4</a> | </div></footer>
Inline Pipe Delimiters
<footer> <ul> <li><a href="link.html">Link 1</a></li> <li><a href="link.html">Link 2</a></li> <li><a href="link.html">Link 3</a></li> <li><a href="link.html">Link 4</a></li> </ul></footer>
FTFY
Tables for Layout
<table cellpadding="0" cellspacing="0"> <tr> <td align="left" valign="top"> Left Column </td> <td align="left" valign="top"> Center Column </td> <td align="left" valign="top"> Right Column </td> </tr></table>
Tables for Layout
<div class="grid-‐group"> <div class="grid single"> Left Column </div> <div class="grid double"> Center Column </div> <div class="grid single"> Right Column </div></div>
FTFY
DIVs for Tabular Data
<div class="row"> <div class="row-‐heading"> Name </div> <div class="row-‐heading"> Age </div> <div class="row-‐heading"> Birthday </div></div><div class="row"> <div class="row-‐data"> Anthony </div> <div class="row-‐data"> 32 </div> <div class="row-‐data"> 11/5/79 </div></div>
DIVs for Tabular Data
<table cellpadding="0" cellspacing="0"> <tr> <th> Name </th> <th> Age </th> <th> Birthday </th> </tr> <tr> <td> Anthony </td> <td> 32 </td> <td> 11/5/79 </td> </tr></table>
FTFY
<b> <i> <em> <strong>
<p>There’s a <b>bold</b> word in my sentence. No no no that can’t be right. It should be <strong>bold</strong>.</p><p>On second thought, perhaps using <i>italics</i> is more my style. But isn’t this usage of <em>italics</em> considered better?</p>
<b> <i> <em> <strong>
<p><i>Philosoraptor</i> is an image macro series featuring a clip art of Velociraptor deeply immersed in <b>metaphysical</b> or unraveling quirky paradoxes.</p>
<p>Should I get a nurse? Call a <em>doctor</em> <strong>right now!</strong></p>
FTFY
Microformats
Microformats
Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards. Instead of throwing away what works today, microformats intend to solve simpler problems first by adapting to current
behaviors and usage patterns
hCard<div id="hcard-‐John-‐Patrick-‐Doe" class="vcard"> <span class="fn n"> <span class="given-‐name">John</span> <span class="additional-‐name">Patrick</span> <span class="family-‐name">Doe</span> </span> <div class="org">The Nerdery</div> <a class="email" href="mailto:ab@de.com">ab@de.com</a> <div class="adr"> <div class="street-‐address">9555 James Ave S</div> <span class="locality">Bloomington</span>, <span class="region">Minnesota</span>, <span class="postal-‐code">55431</span> <span class="country-‐name">USA</span> </div> <div class="tel">888-‐555-‐1234</div></div>
http://microformats.org/wiki/hcard
hCalendar
<div class="vevent" id="hcalendar-‐HTML-‐&-‐Semantics"> <a class="url" href="http://www.fedleague.org"><abbr class="dtstart" title="2012-‐03-‐13T18:00-‐06:0000">March 13, 2012 6</abbr> – <abbr class="dtend" title="2012-‐03-‐13T20:00-‐06:00">8pm</abbr> : <span class="summary">HTML & Semantics</span> at <span class="location">Bloomington, MN</span></a> <div class="description"> Come see a talk about semantics by Anthony Ticknor. </div></div>
http://microformats.org/wiki/hcalendar
Questions?
top related