Markup And Semantics
Kevin Lawver
This is a presentation. If you'd like to view all the slides like a normal web page, you can.
Introduction
- Markup = HTML or XHTML
- Semantics = Meaning your markup applies to your data.
What's In A DOCTYPE?
- DOCTYPE's tells parser what DTD to apply to a document:
- tells which tags are "allowed"
- tells what can be nested (ul, li, etc)
DOCTYPE Switching
- In modern browsers, the browser has at least two rendering modes: Quirks or Standards
- Mozilla has another called "almost standards"
- Depending on the DOCTYPE, the browser will use one of the two (or three).
Standards Mode vs. Quirks Mode
- Standards mode:
- Provides ~3x faster rendering.
- Allows for fewer CSS differences across major browsers.
- Allows you to build for standards, tweak where required,
- Quirks mode:
- Slower - browser has to do several passes over document before rendering.
- Produces vast differences between browsers
- Requires extra markup and CSS to gain required design.
Why XHTML?
- Provides consistency.
- Allows for easier-to-read code.
- Clean departure from the "quirks" of HTML.
- XML compliance (mostly), so you could conceivably use an XML parser to transform the document into something else.
The Basics of XHTML
- Each document must:
- Have a doctype
- Have an opening and closing html tag.
- Have an opening and closing head tag, with an opening and closing title tag within it.
- Have an opening and closing body tag.
Rules for XHTML
- All tags must be closed.
- All tags must be lower case.
- All attributes must be quoted.
Why Not XHTML 1.0 Strict?
- No support for width or height on images.
- No support for borders on images.
- No support for iframes.
- No added benefit to rendering speed.
Why Not application/xml+html?
- No room for error at all.
- We can't control all the data we use.
- We have to be reasonable fault tolerant.
Example: Bare XHTML Document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Bare</title>
</head>
<body>
</body>
</html>Block Elements
- Examples: p, div, table, ul, blockquote, pre, code, dl, dt, dd, form
- Cause a line before and after them.
- Can have border, width, height, padding and margin.
- Although it's not invalid, it is good practice not to use self-closing tags for block elements except for br and hr.
Inline Elements
- Examples: a, b, i, q, u, strong, em
- Don't cause a line break.
- Are the width and height of the content they contain.
Semantics
- Mark it up like you mean it.
- If it's a list of items, make it a list.
- If order matters, make it an ordered list.
- If it's a heading, make it a header.
Things That Have No Meaning
- div
- span
- b
- i
- u
What's A Div?
- A "division" of a page.
- The element should be used to mark off major sections of a document, not just so you can get another block element to style.
What's a Span?
- An arbitrary collection of inline text.
- Can't contain block elements.
- Should be replaced with something that implies some meaning.
Lists
- Come in three flavors: unordered, ordered and definition.
- Look for things in designs that may not look like lists, but really are:
- Navigation
- Menus
- Lists of form elements (radio buttons and check boxes, for example).
Example: Unordered List
- Apples
- Oranges
- Lemons
- Grapes
The Source: Unordered List
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Lemons</li>
<li>Grapes</li>
</ul>Example: Definition List
- Semantics
- The study or science of meaning in language.
- The study of relationships between signs and symbols and what they represent.
Also called semasiology. - The meaning or the interpretation of a word, sentence, or other
language form: We're basically agreed; let's not quibble over semantics.
The Source: Definition List
<dl>
<dt>Semantics<dt>
<dd>The study or science of meaning in language.</dd>
<dd>The study of relationships between signs and symbols and what they represent.
Also called semasiology.</dd>
<dd>The meaning or the interpretation of a word, sentence, or other
language form: We're basically agreed; let's not quibble over semantics.</dd>
</dl>Tables
- Should never (ever, ever) be used for layout.
- Should be used only for tabular data.
- Should always have a caption, and table headers (th).
- Use the summary attribute to describe the data interaction of the table.
Example: Tables
| Product | Price |
|---|---|
| Apples | $.50 |
| Orange | $.30 |
| Lemon | $.25 |
| Grape | $.01 |
The Source: Table
<table summary="first column is product name, second column is product price.">
<caption>Table of products and prices.</caption>
<tr>
<th>Product</th><th>Price</th>
</tr>
<tr>
<td>Apples</td><td>$.50</td>
</tr>
<tr>
<td>Orange</td><td>$.30</td>
</tr>
<tr>
<td>Lemon</td><td>$.25</td>
</tr>
<tr>
<td>Grape</td><td>$.01</td>
</tr>
</table>Forms
- For accessibility reasons, every visible form field should have either a label or title attribute.
- Use fieldsets and legends to group form elements.
Example: Form
The Source: Form
<form action="/search" method="GET">
<fieldset>
<legend>Personal Information</legend>
<label for="name_field">Name:</label> <input type="text" name="name" id="name_field"/>
<label for="address_field">Address:</label> <input type="text" name="address" id="address_field"/>
<fieldset>
<legend>Eye Color:</legend>
<input type="radio" name="eye_color" value="blue" id="blue_field"/> <label for="blue_field">blue</label>
<input type="radio" name="eye_color" value="brown" id="brown_field"/> <label for="brown_field">brown</label>
<input type="radio" name="eye_color" value="green" id="green_field"/> <label for="green_field">green</label>
</fieldset>
</fieldset>
<input type="submit" value="Submit" title="Click to submit your information"/>
</form>Page Divisions
- Use the div tag to mark off logical sections of your page.
- Think about what the content is. If another tag would better define that element, use it.
- Avoid abusing them just to get a specific style.
Example: Div
i am the head.
i am the menu.
i am the content.
i am the foot
The Source: Div
<div id="head">i am the head.</div>
<div id="menu">i am the menu.</div>
<div id="content">i am the content.</div>
<div id="foot">i am the foot</div>Validation
- Validation provides a sanity check.
- Allows you to find problems with your document before they drive you crazy.
- The W3C Validator provides good feedback for all your markup "issues".
Best Practices
- Give yourself hooks to style by.
- Avoid div and class "itis"
- Avoid meaningless markup, use sparingly when needed.
What's This Hooks Nonsense?
- Give yourself a fertile field to style:
- Heterogeneous markup makes CSS a WHOLE lot easier.
- That means use the whole spectrum of available elements, not just div and span.
- The semantic value of a certain tag can be stretched a bit.
Hacks
- As a last resort, use non-semantic small markup in order to style problematic elements (like form elements).
- b, i and u work well.
- allows for valid documents, and gives you the hooks you need without adding a lot of bloat to the document.
Semantic Examples
Exercise: The Header
- We're going to create this:
What Is It?
- What is the logo?
- What is the search box?
- What about the menu?
Your Pieces
- Logo:
- Gradient:
- Dark Blue: #3D84BC
- Light Blue: #B7DEFD
- Ignore the search button styling.
My Source
<div id="head">
<h1>AOL</h1>
<form action="/search" method="GET">
<fieldset>
<input type="text" name="query" class="searchbox" title="enter search terms and hit Enter"/>
<input type="submit" value="search" class="button"/>
</fieldset>
</form>
<ul id="nav">
<li><a href="#">Main</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Entertainment</a></li>
<li><a href="#">Personal Finance</a></li>
<li><a href="#">Local</a></li>
<li><a href="#">Games</a></li>
</ul>
</div>The Method To The Madness
- The Logo:
- It's the heading of the product, so I made it an H1 with the text that would have been in the image.
- The Search Form:
- Yeah, what else would you expect?
- The Navigation
- Even though it's horizontal, it's still a list of links.
How Do I?
- I know what's coming... making it pretty is CSS's job, which comes later.
Q&A
- Questions?
category: Presentations, Markup