July 1st, 2008 PLEASE FORWARD
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tips, Tricks, News and Reviews for Web Coders
by Kevin Yank (techtimes@sitepoint.com)
Read the HTML version of this newsletter, with graphics, at:
http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=196
Note: This newsletter is supported solely by advertisers like the
one below. We stand 100% behind every ad that we run. If you ever
have a problem with a company that advertises here please contact
us and we will try to get it resolved. -- Kevin Yank
IN THIS ISSUE - - - - - - - - - - - - - - - - - - - - - - - - - -
- Introduction
- 4 Easy Ways To Spruce Up Your HTML Markup
- New Technical Articles
- Techy Forum Threads
- More Techy Blog Entries
SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -
ektron
What do you want your website to do?
Ektron CMS400.NET gives you all the tools you need to create,
deploy, and manage your Web site - all rolled into one application.
* Corporate Web Site: Put authoring in the hands of your subject matter experts
* Intranet: support inter-departmental communication
* Social Networking Platform: Make your site an online destination
* Web 2.0 Toolbox: Make your site more interactive & engaging
* Ektron Starter Sites: Build your site faster and smarter.
Version 7.5 now available! Watch an INSTANT DEMO now:
http://www.ektron.com/instant_demo.cfm?cpcid=4323&cpid=NLC-2689&campaignid=2689
INTRODUCTION - - - - - - - - - - - - - - - - - - - - - - - - - -
When was the last time you refreshed your HTML knowledge? it's
very easy to take HTML for granted because it's quite easy to
learn. However, best-practice HTML techniques are being
developed as often as CSS techniques. In this edition Kevin
looks at 4 ways to freshen up your HTML that you may not have
given any thought to.
Not too long ago the only consideration given to HTML was it's
visual appearance. Everyone remembers using table elements for
layout (some people still do!), but who remembers the awful
technique of using nested blockquote elements for text
indentation? Thankfully, sanity is returning. Thanks to the
adoption of CSS and the recognition given to accessibility,
modern HTML usage techniques favor HTML's role as structural,
not presentational, markup for content.
In the push for greater accessibility and better quality
structural markup, there are many features of HTML that are
being discovered, rediscovered, discarded, or returned to their
proper role. If you'd like to learn more, here are some articles
about modern trends in HTML:
- Checkout Cameron Adams' article on forms [1] for numerous
examples of best-practice form markup.
- The POSH (Plain Old Semantic HTML) page on the Microformats
wiki [2] has a nice overview of the best-practice use of HTML.
- On the Digital Web Magazine site you'll find Garrett Dimon's
article about the art of HTML: Markup as a Craft [3].
- You should also read John Alsop's trilogy of articles:
Semantics in HTML [4].
If you'd like to get reacquainted with HTML, then the SitePoint
HTML Reference [5] is also a great resource. Otherwise, get
started by taking a look at your own site's HTML and seeing what
needs freshening up. Kevin has a few tips below to get you
started.
[1] <http://www.sitepoint.com/article/fancy-form-design-css>
[2] <http://microformats.org/wiki/posh>
[3] <http://www.digital-web.com/articles/markup_as_craft/>
[4] <http://microformatique.com/?page_id=109>
[5] <http://reference.sitepoint.com/html>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
In the last issue of the Tech Times [1], I mentioned I was hard
at work with the team here on a new front page design for
sitepoint.com. While most of our time has been split between
tweaking the CSS styles and crafting the PHP code that will
generate the page, any major redesign brings with it the
opportunity to improve the HTML code at the heart of your site.
Of course, any newly-written HTML code these days should
validate [2]. But there's more to good HTML code than
validation. Validation is the bare minimum you should be doing
to assure the quality of your code.
This issue, I'd like to take a look at four simple things
you can do to make sure your HTML has that nice, new markup
smell.
TAKE CARE OF YOUR HEADING STRUCTURE
This is something I've banged on about in the Tech Times
before [3]. The headings in your document (<h1>, <h2>, etc.)
should form a consistent hierarchy: one or more <h1> sections
each containing <h2> sections, which in turn may contain <h3>s.
Resist the urge to skip heading levels (e.g. placing a <h5>
after a <h1>) to indicate levels of "importance" in
your content.
The easiest way to check your heading structure nowadays is to
use the Web Developer extension [4] in Firefox. Simply click
Information > View Document Outline to see the outline of
your page in a new tab.
SitePoint's current home page doesn't hold up too
well to this test. Heading tags are chosen very much by the
perceived importance of the text they contain. Heading levels
are skipped, and important sub-headings are routinely given
lower heading levels than the titles of the sections that
contain them. In some places, non-heading text is even marked up
using heading tags.
http://sitepointstatic.com/blogs/wp-content/uploads/2008/06/sitepoint-outline.png
This type of heading structure is virtually impossible for users
of assistive technologies like screen readers to navigate.
It's valid HTML, but it doesn't do much to describe
the structure of the content it is intended to describe.
The new HTML front page solves all of these issues. Since the
front page represents the site as a whole, the page contains a
single <h1>. All of the sections of the page are then marked
with <h2> tags within that top-level section.
http://sitepointstatic.com/blogs/wp-content/uploads/2008/06/sitepoint-new-outline.png
Although the titles of articles may be styled with larger fonts
than structural headings like "Latest News", the
actual tags that are used to mark them up are chosen to describe
the structure of the page, providing a useful map for screen
reader users to navigate.
Read on for three more techniques to freshen your HTML markup...
[1] <http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=195>
[2] <http://validator.w3.org/>
[3] <http://www.sitepoint.com/blogs/2007/01/26/the-hard-facts-about-heading-structure/>
[4] <http://chrispederick.com/work/web-developer/>
SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -
Maintaining a website can be both fun and sometimes frustrating
especially if the web host does not catch up to your needs. The
owners behind WebHostingBuzz have experienced it all.
We have been there and done it. We know what YOU want when it comes
to running a script oriented website. We know what YOU want when it
comes to value for your web hosting dollars. We host over 150,000
domains across the globe. Surely we can host yours!
Host unlimited websites under one account. Get a free domain name
for life, tons of web space and transfer for only $40 per year.
http://www.webhostingbuzz.com/website-hosting.shtml?host_sitepoint-special
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
REPLACE NAMED ANCHORS WITH IDS
This one's dead simple, but it's something I still
see developers who have been writing HTML for a long time get
wrong. If you want to provide links to particular spots within a
page (e.g. http://www.sitepoint.com/#news), you don't need
to fill your HTML code with <a name=""> tags -- just use the
id attribute on the elements you already do have!
In the past, if you wanted to provide a link to the
"News" section of your page, you'd have to do
something like this:
<h2><a name="news"></a>News</h2>
These days, all browsers support in-page links based on the id
attribute as well as the old-fashioned <a name=""> tag. So
instead of the above, you can just do this:
<h2 id="news">News</h2>
A link to "#news" in this page will find either of the above
example headings, but the second one is a lot neater, and also
gives you the ability to apply styles to to heading based on its
unique identifier if you need to.
DECLARE YOUR LANGUAGE
It may be obvious to you what language the content of your
document is written in, but to search engines and assistive
technologies, this is an important piece of information that can
be difficult to guess correctly.
Make sure the <html> tag in all your documents contain a lang
attribute [1] that identifies the primary language in use in
your document. For English, set it to "en":
<html lang="en">
If your document is XHTML, you should also set the xml:lang
attribute [2], which will be recognized by systems that
understand XML:
<html xmlns="http://www.w3.org/1999/xhtml"
lang="en" xml:lang="en">
DECLARE YOUR CHARACTER ENCODING
This is another axe I have to grind with many developers who
should know better. The Tech Times #134 [3] focused entirely on
character encodings, and what every web developer should know
about them. SitePoint later published Tommy Olsson's
article, The Definitive Guide to Web Character Encoding [4].
In short, an encoding describes how the binary bytes that your
web server sends to the browser may be translated into the
characters of text that make up your HTML code. If you
don't specify an encoding, the browser has to guess.
Depending on how your code editor is configured, chances are
that you are encoding your HTML in plain Latin 1 (ISO-8859-1),
in the extended version of Latin 1 called Windows-1252, or in
the Unicode encoding UTF-8. UTF-8 lets you include the widest
range of characters in your code, but current browsers will
assume your code is Windows-1252 unless you tell them otherwise.
To encode your HTML pages in UTF-8, first make sure your text
editor (along with the text editors of everyone working on your
site) is set to default to UTF-8 encoding. If you're using
a simple editor like Notepad, you may have to tell it to save
with UTF-8 encoding every time you create a new file -- one
more reason to avoid Notepad.
Once you've done that, make sure to include a <meta> tag
in the <head> of all your HTML documents that declares the page
as being encoded using UTF-8:
<meta http-equiv="content-type"
content="text/html; charset=UTF-8"/>
The earlier this tag appears in the document, the less time the
browser will have to waste guessing the document's
encoding, so it should really be the first thing to follow your
opening <head> tag.
Finally, test one of these pages on your site to make sure that
browsers recognize it as being encoded with UTF-8. In Firefox,
you can right-click on the background of the page and choose
Page Info. The Encoding should be shown on the first tab of the
Page Info window. If it isn't UTF-8, talk to your server
admin to see about either getting the correct encoding declared
in your site's HTTP Response headers, or simply removing
the encoding from these headers so that the <meta> tag can do
its thing.
ANY SUGGESTIONS?
Those are just four ways to freshen up your markup with the
latest HTML techniques. If you can think of any others, be sure
to leave a comment! I'd love to hear how you go the extra
mile to make your HTML markup look sexy and new.
Read the blog entry:
4 Easy Ways To Spruce Up Your HTML Markup [5]
by Kevin Yank
Web Tech Blog: Technically Speaking
[1] <http://reference.sitepoint.com/html/core-attributes/lang>
[2] <http://reference.sitepoint.com/html/core-attributes/xml-lang>
[3] <http://www.sitepoint.com/blogs/2006/03/15/do-you-know-your-character-encodings/>
[4] <http://www.sitepoint.com/article/guide-web-character-encoding>
[5] <http://www.sitepoint.com/blogs/?p=2589>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
That's all for this issue -- thanks for reading! I'll see you
next week.
Andrew Tetlaw
techtimes@sitepoint.com
SitePoint Technical Editor
SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -
Morae: Usability Testing for Software & Web Sites. An all-digital tool
that enables you to:
-Quickly identify website and software design problems
-Affordably conduct user testing. Quickly calculate metrics & graph results.
-Deliver professional results in a fraction of the time.
http://www.techsmith.com/morae.asp?cmp=StPtUX3
NEW TECHNICAL ARTICLES - - - - - - - - - - - - - - - - - - - - -
CSS Positioning Properties At-A-Glance Guide
by Nigel Peck
Need a quick online guide for CSS positioning properties? Look
no further than Nigel's essential at-a-glance guide, which
contains all the common properties.
http://www.sitepoint.com/article/1231
Fancy Form Design Using CSS
by Cameron Adams
Form design is the necessary evil of web development. Don't you
wish you had a wizard's wand to create accessible yet attractive
forms? We have found such a wizard! Here, Cameron Adams shows you
how to use CSS to create forms that are both great-looking and
usable, and gives you the code you need to make the job easy.
http://www.sitepoint.com/article/1569
Warning: This Secret CSS Technique Will Surprise You!
by Alex Walker
Alex has been in the lab experimenting, and his latest
concoction is stunning! If you're ready to try your hand with a
cool new CSS technique, don't miss this hands-on tute.
http://www.sitepoint.com/article/1652
Breaking Out of the Box With CSS Layouts
by Jina Bolton
The caged bird may sing, but the jazziest tunes are sung by
birds that have broken out of the box! In this step-by-step
guide, Jina shows you how to take that cramped old grid-based
page layout, and use CSS -- and a little imagination -- to break
the bonds and set your design free!
http://www.sitepoint.com/article/1568
Nifty Navigation Tricks Using CSS
by Rachel Andrew
Navigation is the key to surfing the Web, and in this collection
of ready-made solutions Rachel steps us through horizontal and
vertical menus, drop-down, fly-out, and tabbed navigation
systems. Learn the basics of styling lists as menus, and soon
you'll be creating drop-down menus from pure CSS -- and making
sure they're as accessible as possible!
http://www.sitepoint.com/article/1574
TECHY FORUM THREADS - - - - - - - - - - - - - - - - - - - - - - -
Opera Dragonfly Alpha 2 RC with CSS editing support
<http://www.sitepoint.com/forums/showthread.php?threadid=556278>
Google Release API for Google Webmaster Tools
<http://www.sitepoint.com/forums/showthread.php?threadid=555728>
MORE TECHY BLOG ENTRIES - - - - - - - - - - - - - - - - - - - - -
JavaScript & CSS Blog: STYLISH SCRIPTING
CSS Theme Week... And That's All Folks!)
http://www.sitepoint.com/blogs/2008/06/27/css-theme-week-and-thats-all-folks/
CSS Animation: The Ultimate Web Design Easter Egg (2 comments)
http://www.sitepoint.com/blogs/2008/06/25/css-animation-the-ultimate-web-design-easter-egg/
ColdFusion Blog: INFUSED
The Week in ColdFusion: 18-24 June: CFML, Fast and Furious (3
comments)
http://www.sitepoint.com/blogs/2008/06/27/the-week-in-coldfusion-18-24-june-cfml-fast-and-furious/
Web Tech Blog: TECHNICALLY SPEAKING
BBC Rejects hCalendar Microformat Because Of Accessibility
Concerns (7 comments)
http://www.sitepoint.com/blogs/2008/06/25/bbc-rejects-hcalendar-microformat-because-of-accessibility-concerns/
ADVERTISING INFORMATION - - - - - - - - - - - - - - - - - - - - -
Find out what thousands of savvy Internet marketers already know:
email newsletter advertising works! (You're reading an email ad
now, aren't you?)
Find out how to get YOUR sponsorship ad in this newsletter and
reach 95,000+ opt-in subscribers! Check out
http://www.sitepoint.com/mediakit/ for details, or email us at
mailto:adinfo@sitepoint.com
HELP YOUR FRIENDS OUT - - - - - - - - - - - - - - - - - - - - - -
People you care about can take charge of their Website by
effectively using the information and resources available on the
Internet. Help them learn how - forward them a copy
of this week's SitePoint Tech Times.
ADDRESSES - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Send suggestions and comments to:
techtimes@sitepoint.com
To subscribe, send a blank email to:
subscribe@sitepoint.com
The Archives are located at:
http://www.sitepoint.com/newsletter/archives.php
The SitePoint Tech Times is hosted by SparkList:
http://www.sitepoint.com/newsletters/sparklist/
The SitePoint Tech Times is (c) 1998-2008 SitePoint Pty. Ltd. All
Rights Reserved. No part of this Newsletter may be reproduced in
whole or in part without written permission. All guest articles
are copyright their respective owners and are reproduced with
permission.
SitePoint Pty. Ltd.
48 Cambridge Street
Collingwood, VIC 3066
AUSTRALIA
You are currently subscribed to The SitePoint Tech Times as:
ignoble.experiment@arconati.us
To change the email address that you currently subscribe with:
http://sitepoint.com/newsletter/manage.php
To switch to the HTML version of this newsletter:
<http://sitepoint.com/newsletter/htmlplease.php?email=ignoble.experiment@arconati.us>
To leave this list:
<http://sitepoint.sparklist.com/u?id=2266608.e57363ef99c8b59c8667cca2fd106cbe&n=T&l=techtimes&o=2192466>
Do Not Reply to this email to unsubscribe.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
No comments:
Post a Comment
Keep a civil tongue.