Semantics

  • Who is this for?
  • What is Semantics?
  • How does it relate to the Web?

What is Semantics?

A Bank without

  • User (Saver)
  • Money
  • Security

has no meaning

A School Bus without

  • User (Children)
  • Driver
  • Destination
  • Wheels
  • Engine
  • Energy

has no meaning

Life without

  • Hope
  • Love
  • Desire
  • Happiness
  • Passion
  • Energy

has no meaning

An Ocean Wave without

  • Water
  • Air
  • Energy
  • Destination

has no meaning

A Bank without

  • User (Saver)
  • Money
  • Security

has no meaning

A Bank without

  • User (Saver)
  • Money
  • Security

has no meaning

Semantic HTML

HTML

Hair in the Paint

The hair in the paint

Some basic examples

This is important but not as meaningful as the stuff in <h1></h1>.

This is very important

I want to emphasise this

A plain old paragraph of text

I am a paragraph but I have more structural meaning as I'm inside a <div></div>

Some basic examples


<h2>This is important but not as meaningful as the stuff in &lt;h1&gt;&lt;/h1&gt;.</h2>

<h1>This is very important</h1>

<em>I want to emphasise this</em>

<p>A plain old paragraph of text</p>

<div class="container">
	<p>I am a paragraph but I have more structural meaning as I'm inside a &lt;div&gt;&lt;/div&gt;</p>
</div>

Some more advanced examples...

The HTML


<h1><a href="http://www.webegg.co.uk">I know this will be meaningful but I want to see an image</a></h1>

The CSS


h1 a{
	background: url("../images/prettyimage.png") no-repeat left bottom;
	display: block;
	height: 100px;
	margin: 15px 0 0 0;
	text-indent: -9000em;
	width: 360px;
}

Some more advanced examples...

  • I am a first level list item
  • I am a first level list item
    • You clever thing, you just nested me. I am a second level list item
    • I am a second level list item
      • You're on fire, you just nested me again. I am a third level list item
      • I am a third level list item
  • I am a first level list item
  • I am a first level list item

Some more advanced examples


<ul>
	<li>I am a first level list item</li>
	<li>I am a first level list item
	<ul>
		<li>You clever thing, you just nested me. I am a second level list item</li>
		<li>I am a second level list item
		<ul>
			<li>You're on fire, you just nested me again. I am a third level list item</li>
			<li>I am a third level list item</li>
		</ul>
		</li>
	</ul>
	</li>
	<li>I am a first level list item</li>
	<li>I am a first level list item</li>
</ul>

ul li{ border:0; padding:0 0 0 20px; margin:5px; background: url("../images/first-level.gif")no-repeat left 15px; }
ul li ul li{ background: url("../images/second-level.gif")no-repeat left 15px; }
ul li ul li ul li{ background: none; }

Semantic HTML test

.  Now

using a mixture of W3C's Semantic Extractor, jQuery and Yahoo's YQL api.