Meaningful (X)HTML
Jason Garber
E-site Marketing
But first, a bit of history
- What is HTML?
- HyperText Markup Language
- A means of tagging and describing information
- That's great, so what's (X)HTML?
- A more rigid form of HTML
- All attributes, events, and tags must be written in lower case
- All elements must be closed
- <img src="pic.jpg" /> and <br />
- The value assigned to an attribute must be enclosed in quotes
- All elements must be properly nested
The Olde Way
- Tables for layout
- Spacer gif's
- Tag soup
- Example:
- Pointe South Mountain
Example: Pointe South Mountain
- Tables a-plenty
- 150+ lines of code before page content
- Page content accounts for 8% of page weight
- Inline, software-generated Javascript
- Client side image maps
The New Way
- (X)HTML for structure
- Use headings – you have six of them
- Lists for navigation
- Tables are okay – for data
- CSS for presentaion
- Javascript for behavior
Example: Pointe South Mountain
<h1>Pointe South Mountain</h1>
<ul>
<li><a href="#">Resort Overview</a></li>
<li><a href="#">Meetings & Events</a></li>
<li><a href="#">The Oasis Water Park</a></li>
<li>...</li>
</ul>
<h2>A True Arizona Experience</h2>
<p>Welcome to the Four-Diamond Pointe South Mountain Resort...</p>
<div>
<h2>Join our e-Exclusives Club</h2>
</div>
Advantages
- Semantic goodness
- Pages are human and machine readable
- Separation of structure, presentation, and behavior
- Can decrease page sizes and load times
- Stylesheets and scripts downloaded once, then cached
- Accessibility
- Semantically rich pages = less and more valuable code for screen readers
- On-the-page SEO
- Google hearts <h1>'s
- <address> tag and local search
- Again, less code = increased chances that your content will be indexed
In conclusion...
- Resources
- "Designing with Web Standards" by Jeffrey Zeldman
- A List Apart (http://www.alistapart.com/)
- Digital Web Magazine (http://www.digital-web.com/)
- Where can I get this incredible presentation?
- http://sixtwothree.org/presentations/meaningful-xhtml/