Download - Semantics & HTML

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


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://thehtml5quiz.com/



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


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


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:[email protected]">[email protected]</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

http://www.fedleague.org

http://www.fedleague.org



Questions?

Download - Semantics & HTML

Top Related