HyperText Markup Language

XML Elements

2008-12-21T20:31:00.000-08:00

Sometimes when thinking about HTML, all we focus on are the tags. But the attributes of the tags are often just as important as the tags themselves. In fact, there are several tags with attributes that many people don't know anything about. The following are some of the tag attributes that are not as common but can add value to your pages.

<a>

With the anchor tag, you can create links and bookmarks, as most people already know, but there is an attribute that isn't as well known.

title

the title attribute creates a title for the link. Browsers handle it in different ways, but a popular way is to create a small popup window with the text in it. It allows you to provide more information about the link without cluttering your Web page.

<a href="http://webdesign.about.com/" title="Click here to go to the Web Design front page">About Web Design</a>

<hr />

When people think of attributes for the hr tag, it's often to determine the width and size of the line. But there are a few other attributes that can make your line more unique.

noshade

this is my favorite attribute of the hr tag. It turns off the 3d effect to give you a solid line:

<hr noshade="noshade" width="50" align="left" />

This attribute can also be achieved using the style attribute, by setting the color of the element:

<hr style="color: #000; width: 50px; float: left;" />
color

giving your line a color will make it blend in with your page more effectively.

<hr color="#ff0000" width="50" align="left" />

This can also be done with the style attribute:

<hr style="color:#f00; width: 50px; float: left;" />

<body>

The body tag has many attributes, but there are several that allow you to manipulate how your page displays in the browser.

leftmargin

define where the left margin should be in the browser. It's written in pixels, 0 puts it flush left. This attribute works only in Internet Explorer.

<body leftmargin="5">

Using the style attribute, you can set this for all modern browsers:

<body style="margin-left:5px;">
topmargin

this tag works the same as leftmargin, only it defines where the top of the page should be in the browser. Again, 0 pixels is flush with the top of the window. This is an attribute for Internet Explorer.

<body topmargin="5">

Using the style attribute, you can set this for all modern browsers:

<body style="margin-top:5px;">
marginwidth

the marginwidth attribute is Netscape's answer to leftmargin. Written in pixels it defines how close to the left margin the page will load.

<body marginwidth="5">

Using the style attribute, you can set this for all modern browsers:

<body style="margin-left:5px;">

marginheight

also a Netscape attribute, the marginheight attribute defines how close to the top of the window the page should load.

<body marginheight="5">

Using the style attribute, you can set this for all modern browsers:

<body style="margin-top:5px;">

Check out the tags you're going to use to see if there are attributes that might give you more power over your page.

FAQ About XHTML vs HTML

2008-12-10T01:53:00.000-08:00

What is XHTML?

XHTML 1.0 is a 'reformulation of HTML 4 as an XML 1.0 application', according to the XHTML 1.0 specification.

In other words, it is an XML-based markup language that has the same set of element types and attributes as HTML 4.

How is XHTML different from HTML?

XHTML is fundamentally different from HTML, despite looking very similar.

XHTML is XML, which means that the syntax rules are slightly different.

There are things you can do in XHTML which you cannot do in HTML.

There are things you can do in HTML which you cannot do in XHTML.

There are differences concerning CSS.

There are differences concerning client-side scripting (e.g., JavaScript).

Differences in Syntax Rules

XHTML is case-sensitive, HTML is not. All tags and attributes must be lowercase in XHTML.

XHTML, being XML, must be well-formed. Every element must have an end tag, or use the self-closing tag syntax. HTML allows some end tags and even some start tags to be omitted.

If an XML parser encounters a well-formedness error, it must abort. An SGML or HTML parser is expected to try to salvage what it can and keep going.

All attributes must have a value in XHTML. HTML allows some attributes (e.g., selected) to be minimised.

All attribute values must be surrounded by double or single quotes. HTML allows quotes to be omitted if the value contains only alphanumeric characters (and some others).

The comment syntax is more limited in XHTML, but that's rarely an issue for most designers/developers.

Things You Can Do in XHTML But Not In HTML

Use CDATA sections (<![CDATA[ … ]]>). That's useful if you have content with lots of literal characters that otherwise need to be escaped.

Use PIs (processing instructions), e.g., to link to a style sheet:

<?xml-stylesheet type="text/css" href="style.css" media="screen"?>

Include elements from other XML namespaces (see below).

Use the ' character entity.

Things You Can Do in HTML But Cannot Do in XHTML

'Hide' the contents of style or script elements with SGML comments ().

Create parts of the page dynamically with JavaScript while the document is still loading (e.g., using document.write()).

Use named character entities (e.g.,  ) other than the four predefined ones: <, >, & and ".

Use the .innerHTML property with JavaScript (technically this is non-standard even in HTML).

Differences Concerning CSS

Element type selectors in CSS are case sensitive for XHTML, but not for HTML.

In HTML, the properties background-color, background-image and overflow on the BODY element will be applied to the root element (HTML) unless specified for that element also. That is not the case for XHTML.

In HTML some start tags are optional, but the element node exists in the document object model even if the tags don't occur in the markup. If we want to style header cells in the table body, we might use a CSS rule like this one:

Code:

tbody th {text-align:left}

In HTML, this will work even if we omit the <tbody> and </tbody> tags in our markup, because the TBODY element will be created anyway. That will not work in XHTML; unless we have explicit <tbody> and </tbody> tags, the selector will not match.

Differences Concerning JavaScript

document.write() cannot be used with XHTML (see Why document.write() doesn't work in XML)

DOM methods like createElement() must be replaced by their namespace-aware counterparts (createElementNS() etc.).

The non-standard .innerHTML property should not be used for XHTML documents.

The same issues with implicit elements that occur for CSS also apply for JavaScript.

How is XHTML 1.1 different from XHTML 1.0?

XHTML 1.1 is a reformulation of XHTML 1.0 Strict using Modularization of XHTML, which simply means that the definitions of the various element types have been separated into a number of modules.

XHTML 1.1 deprecates the lang attribute (in favour of xml:lang) and also the name attribute for <a> and <map> tags. It also adds a number of elements for Ruby annotations.

What about XHTML 2.0?

What about it? It shows no signs of becoming even a candidate recommendation any time soon. We don't know what it will contain, but it seems as if it is not going to be backwards compatible with XHTML 1.0.

Should I use XHTML or HTML?

That depends on who you ask. There are a number of technical issues with this question, which preclude a simple and short answer. In reality, the latest W3C recommendation with widespread support is HTML 4.01. Unless you actually need any of the features that XHTML offers over HTML, there is no technical reason to use XHTML.

In order to actually benefit from using XHTML, you really need to understand the fundamental differences between XHTML and HTML. Such a site will only be available to a small minority of the surfing population, however.

Some web designers and developers prefer XHTML's syntax rules over HTML's. By following certain guidelines, you can use this syntax without technically using XHTML at all (see below). There are a number of potential pitfalls with this approach, but it is a possible way forward for those who absolutely want to type <br /> instead of <br>.

For 'future-proofing' your documents, using a Strict doctype is more important than whether you use XHTML or HTML.

Should I use XHTML 1.0 or XHTML 1.1?

Unless you need to use Ruby annotations, and your target audience can be expected to have the required plug-ins for that, you should not use XHTML 1.1.

In particular, if you are serving your XHTML markup as text/html (see below), you must not use XHTML 1.1. Since it deprecates the lang attribute, it is not backwards compatible with HTML and must not be served as such.

Why do so many books and sites recommend XHTML over HTML?

When the XHTML 1.0 specification was released, many designers and developers were quite excited about it. It was XML, which was all the rage back then, yet could be used as if it were HTML, and it 'worked in all browsers'. People saw countless possibilities with the extensibility mechanism, and when W3C stated that there would be no more versions of HTML, XHTML was seen as the future-proof alternative.

Eventually some less palatable aspects of using XHTML were uncovered and the extensibility myth was debunked, but this didn't receive quite the same amount of publicity. Many authors thus still advocate XHTML over HTML out of ignorance or because of personal preference.

Is XHTML supported by all browsers?

No. Only a few mainstream browsers support XHTML, like Opera, Firefox and Safari.

Most importantly, Internet Explorer does not support XHTML at all.

If you follow certain guidelines you can serve XHTML documents as text/html (see below). That means the document will be seen as HTML, which all browsers can handle. Virtually all browsers have a parser bug that ignores the slash in self-closing tags.

Is XHTML more strict than HTML?

No. The syntax rules of XML (and thus XHTML) are simpler and more consistent, but both XHTML and HTML can be parsed unambiguously as long as the markup is valid.

Is XHTML more semantic than HTML?

No. XHTML 1.0 is just a reformulation of HTML 4.01. It contains the same elements and attributes and comes in the same three flavours (DTDs). There is no difference in semantics.

Can you use CSS with both XHTML and HTML?

Yes. You sometimes see preposterous claims that CSS can only be used with XHTML, but that is just disinformation. The first CSS specification came out in 1996, four years before XHTML.

What does the XML declaration do? Should I use it?

The XML declaration (sometimes incorrectly called the XML prologue) looks something like this:

Code:

<?xml version="1.0" encoding="utf-8"?>

It tells an XML parser that the document is an application of XML 1.0 and which character encoding it uses. If the encoding is anything other than UTF-8 or UTF-16 you must use the XML declaration, unless the web server sends encoding information in its HTTP headers. Even if it does, you should use the XML declaration, so that the right encoding is specified even if the document is saved to disk and opened locally.

This applies when XHTML documents are served as such. When served as text/html, the XML declaration should be ignored, but some old HTML-only browsers can choke on it. In particular, Internet Explorer 6 will render the document in quirks mode if there is an XML declaration before the DOCTYPE declaration. In these cases, you should omit the XML declaration, since the document is not treated as XML anyway.

How is the DOCTYPE declaration used?

One may be led to believe that the DOCTYPE declaration at the top of the document is what tells the user agent that it is an XHTML document. However, this is not the case. The original purpose of the DOCTYPE declaration only had to do with markup validation. A validator needs to know against which document type definition (DTD) to check for compliance. Browsers don't use validating parsers, because there is no need, so they used to ignore the DOCTYPE.

When IE5/Mac was launched, it had a novelty feature: doctype switching. Its support for web standards was a major improvement compared to older version, and compared to its contemporary cousin on the Windows platform. In order to provide good standards support and still avoid breaking the millions of web sites that were written to accommodate IE's incorrect CSS rendering, the DOCTYPE declaration was used to make an educated guess as to whether the document was 'modern' or 'old-school'. This feature was then included in IE6/Win, and can now be found in most modern browsers.

So the DOCTYPE declaration serves two purposes: it tells a validator aginst which DTD the document claims conformance, and it is used by browsers to determine the rendering mode to use. It has absolutely nothing to do with the XHTML vs HTML issue, however. Browsers that support XHTML use the 'strict standards' rendering mode for XHTML documents, provided that they are served as such.

Do I need the xmlns attribute in my <html> tag?

Yes. That is what tells user agents that the document is, in fact, XHTML, rather than any other application of XML. If the xmlns attribute is missing, or doesn't contain the right value, the markup will not be recognised as XHTML. The attribute is invalid in HTML, and will thus be ignored if the document is served as text/html. The correct value to use is

Code:

xmlns="http://www.w3.org/1999/xhtml"

Namespaces in XML allow us to use the same element type name for different elements. For instance, a fictive WidgetML markup language can use an element type called label. By declaring a separate namespace for WidgetML, we can use those label elements in an XHTML page, even if that contains a form with label elements, and the browser will have no problem keeping them apart.

An XML namespace is bound to a URI. The XHTML namespace mentioned above is one example. If we want to include WidgetML elements throughout our XHTML document, we can use a prefix and bind the WidgetML namespace to that:

HTML Code:

<html xmlns="http://www.w3.org/1999/xhml"      
xmlns:w="http://example.com/ns/widgetml"       
xml:lang="en">

This binds the prefix 'w' to the WidgetML namespace. To separate XHTML's label elements from WidgetML's, we use the prefix in our tags: <w:label>Blue Widget</w:label>.

How does this MIME type thingy work?

When a resource is requested via the HTTP protocol, the web server sends an HTTP response consisting of one or more headers, a blank line (CR+LF) and the document body. For a web page, the body is the HTML or XHTML document, i.e., the markup we write.

The HTTP headers provide meta-information about the document. One of the most important headers is Content-Type, which informs the user agent what type of content the response body contains. It may also convey information about which character encoding it uses. For HTML, such a header can look like this:

Code:

Content-Type: text/html; charset=iso-8859-1

The text/html part consists of a MIME media type name (text) and subtype name (html). The charset part is an optional attribute.

According to RFC 2854 this MIME type identifies the content as HTML, which means that user agents must parse and interpret the contents as HTML. Even if it's actually a Microsoft Word document, a GIF image … or an XHTML document. In other words, if the MIME type is text/html, the document is HTML (not XHTML).

This means that no XML-only features can be used. It also means that HTML-only features can be used, but doing so defies the purpose of using XHTML markup in the first place.

There are three MIME types that we can use for XHTML documents, which will make compliant user agents recognise the document as XML:

application/xhtml+xml (recommended)

application/xml

text/xml (not recommended)

The recommended MIME type for XHTML is application/xhtml+xml, which is defined in RFC 3236. Note, however, that this is not supported by any version of Internet Explorer at this time (June 2006).

Although it is possible to use text/xml (defined in RFC 3023), it is not recommended due to the odd way the default character encoding is specified. With this MIME type, the encoding must be sent in the HTTP header; it cannot be overridden by an XML declaration. It also defaults to the not-very-useful encoding US-ASCII.

Can I set the MIME type with a <meta/> tag?

No. A user agent needs to know the content type before it starts parsing the response body. When it encounters an element like this, it's already too late:

HTML Code:

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>

The MIME type must be sent as a Content-Type HTTP header. The character encoding should be specified in the XML declaration (see above).

How do I serve XHTML with the proper MIME type?

You need to instruct your web server to send the proper HTTP header. The exact technique depends on which HTTP server you use, but for Apache, you can use the AddType directive:

Code:

AddType application/xhtml+xml .xhtml .xht

This makes Apache send an application/xhtml+xml MIME type for files ending with .xhtml or .xht. The directive can be put in the global configuration file (/etc/httpd.conf on most *nix systems) or in a local .htaccess file in a directory.

Sometimes we don't have access to the configuration files, but we need not lose hope quite yet. If we can use a server-side scripting language, we can send the HTTP header ourselves. For instance, using PHP:

PHP Code:

  header('Content-Type: application/xhtml+xml; charset=utf-8');

(Note that this header must be sent before a single byte of document content is written to the response stream.)

Is serving XHTML as text/html harmful?

In 2002 Ian Hickson published an article labelled Sending XHTML as text/html Considered Harmful. It has been criticised by many XHTML proponents, but it should be required reading for anyone who is going to use XHTML markup.

Serving XHTML documents as text/html is not necessarily harmful, if you know what you are doing and are aware of the fundamental differences between XHTML and HTML. Relying on HTML-only techniques, however, is 'harmful', because that means that a purported XHTML document will not work as XHTML.

Thus, if you are going to serve XHTML documents as text/html, you must make sure that they also work as intended when served as application/xhtml+xml.

You must also make sure to follow all the guidelines in Appendix C of the XHTML 1.0 specification. Although this appendix isn't normative, it offers guidelines for maintaining the compatibility that is required for serving XHTML markup to user agents that only support HTML. Including a blank character before the /> in a self-closing tag, for instance, is necessary to avoid confusing some old browsers. For XHTML served as XML, no such space is necessary since all XML parsers understand self-closing tags.

What's the benefit of serving XHTML as application/xhtml+xml?

That the document is recognised as XHTML by user agents.

Presumably, you are using XHTML for a reason. Unless the document is recognised as XHTML, you cannot use any of the features XHTML offers over HTML.

Should I use content negotiation when serving XHTML?

Content negotiation means examining the Accept HTTP header sent by user agents and serving different content types to different user agents. For instance, Opera, Firefox and Safari state that they support application/xtml+xml, so they would receive XHTML markup with that MIME type. Meanwhile, browsers like Internet Explorer, would receive HTML markup served as text/html.

There is currently no point in doing this, other than to impress other computer geeks with your knowledge. If the content can be transformed into HTML it doesn't require any XML features. You might as well use HTML 4.01 or serve XHTML as text/html to all user agents.

It is especially useless to do content type negotiation, i.e., sending the same content to everyone, but sending different Content-Type headers to different browsers.

Which character encoding should I use for XHTML?

XML parsers are only required to support UTF-8 and UTF-16. If you use anything other than that, there is no guarantee that the parser can interpret the document correctly. In reality, browsers generally seem to support the same range of encodings as for HTML, but if you want to be on the safe side, stick to UTF-8 or UTF-16.

Can I use XHTML files on my hard drive?

When a web page is opened from the local hard drive, there is no HTTP server involved to send the proper HTTP headers. The file extension is then often used to make an educated guess about the content type. Opera and Firefox will assume an XML content type for files ending with .xhtml, .xht or .xml.

This will not work for Internet Explorer, of course, since it doesn't support XHTML.

Can I use XHTML with Internet Explorer?

No. Not really.

IE does not support the application/xhtml+xml MIME type, and will prompt the user to download the page if it's served as such. You can make IE recognise this MIME type through a registry hack, but it will still treat it as HTML.

If you need the XML features of XHTML, you can serve the document as application/xml. That is supported by IE, but XHTML's namespace is not, which means IE will see the document as generic XML. There will be no default style sheet, so you have to specify explicit rules for every element type (including display:block for all block-level elements).

You can, of course, serve XHTML markup as text/html, but as has been mentioned above that means the document will be seen as HTML with syntax errors.

How to Choose ID and Class Names

2008-11-26T21:57:00.001-08:00

CSS does not allow class and id names to start with a number or other non-alphabetical character. The only exception to this is if you use an escape character - which many browsers don't support.

You should always start your class and id names with a alphabetic character (not a number or a non-alpha character).

Also, keep in mind that while XHTML is case-sensitive, you cannot have two ids in the same document that are different only in case. For example:

#TextColor { color : #000; }
#textcolor { color : #f00; }

Would not be valid in the same document.

Effective Web Navigation

2008-11-26T21:55:00.001-08:00

If people cannot navigate through your site, they will quickly leave. Thus, designing effective navigation on your Web site is crucial. But there are some basic things you need to do before you can start worrying about rollovers or links, images or flash.

Information Architecture

Before you can even start to plan your navigation, you need to define your site's information architecture. Information architecture is the taxonomy or structure of your Web site.

Some common taxonomy elements on a corporate or business Web page are:

Products - the products or services the company sells
About - information about the company
Investor Relations - information specific to investors
Support - help for customers

Some common taxonomy elements on a personal Web page are:

About Me - information about the page author
Favorite Links - links that the author likes
Friends and Family - information about the author's friends and family

Organization

Once you've determined your site architecture, you need to decide how to organize it. You might have it all live in one directory, and just link to the major pages from your front page. Or you might have all the sub-pages separated into directories.

When thinking about your organization, you should think about how your customers might wander through it. Flow charts and storyboards can help you map out exactly how you would like to encourage your readers to use the site. You might want to map out several paths for your readers to use.

Navigation Design

Once you have an idea of the architecture and organization, you're ready to think about the design of the navigation. There are several things you should consider in deciding on your navigation design:

Accessible
The navigation of your site is possibly the most important part of any given page. So it should be as accessible as you can make it. This means avoiding special effects like Flash, Java, or JavaScript as your only navigation method.
Meaningful
Keep your navigation meaningful. Make the links clear - don't try to get cute or use terms that are internal to your organization. Someone who has never been to your site before should know immediately where the link will take them.
Understandable
If you want to use images for your navigation, make sure that there is some text associated with them. " Mystery Meat Navigation" is the use of non-descriptive images as navigation, and it's much more common than you might think.
Prevalent
Your navigation should appear on every page of your site. While you don't need to have identical navigation, the basic structure should be the same throughout the site, with changes used only to indicate location within the hierarchy.

Once you've designed your navigation, then you can begin to use it. Keep in mind that it is really tempting to change your navigation structure while you're in the middle of implementing it. But if you decide to do this, be sure that you're making the change globally and that it fits with the original goals of your taxonomy and information architecture. My recommendation is to implement the original design and wait a week or two. If at that point you still want to change it, and the change will work, then go for it. You might just find that your planning and preparation were ultimately correct and not change it at all.

Navigating Web Pages

2008-11-26T21:54:00.000-08:00

According to Jennifer Flemming, author of a book on Web navigation, if people can't navigate your site, they will leave it. At the Web 98 convention, I attended a seminar by Jennifer on how to design Web navigation.

According to the GVU's WWW User Survey, the most important issues facing the Internet are:

Privacy (30.49%)
Censorship (24.18%)
Navigation (16.65%)

For privacy, you can post your privacy policy on your Web site (as TrustE recommends), but it's up to your readers to believe you. Censorship is also something your readers must perceive is or is not happening, but navigation is primarily you, and how you design your pages.

So, as the most important aspect of the World Wide Web that you, as a Web Developer can affect, how do you know what works and what doesn't? Well, to be brutally honest, you don't. By the time you are ready to have your site go live you have looked at it and worked with it and manipulated it so that you couldn't get lost if you tried to. You are not a good judge of the navigability of your site.

Get someone else to look at it.
Try to find an impartial observer who is not familiar with your site to look it over. What is easy to find? What is hard? Do the buttons work? Is the sequence logical? Ask this reviewer what s/he likes and doesn't like about your navigation so that you can see what is good and bad. And, if you can, get several people to look at it.

Remember, most people who find a Web site hard to use won't spend the time to tell you about it. They will simply leave, and never come back (most likely). You want your navigation to help your users get around your site.

Navigation is for user goals.
Keep in mind, that while you may be designing the site for yourself, if you want someone else to read it, you need to design the navigation with their needs in mind. Here is an example of the site or client goals and the (sometimes) conflicting user goals: Web Site GoalsUser GoalsMake moneyGet a free giftGet information about customersMaintain privacySell specific merchandise (especially items with a lot in stock)Buy specific merchandise (possibly not what is being sold)

If you set up your site to align to only your goals, your customers will get frustrated and leave. Of course, if you do nothing to meet your client's goals you will be out of a job. So, how do you design navigation that will satisfy your readers and keep people at the site so your clients will be happy?

According to Jennifer, you use navigation that "works". The navigation should:

be easily learned so that your readers don't get lost
remain consistent throughout the site
appear in context with the entire site
offer alternatives so that if the navigation path the user tried isn't right, there are other choices
provide clear visual messages
be appropriate for the purpose of the site
support users' goals and behaviors

Dynamic Fonts

2008-11-26T21:51:00.000-08:00

One of the most common uses of graphics on Web pages are to create titles with the specific fonts you want displayed on your Web site. The problem is, when you use a font tag or the font-family CSS property, you have to hope that your readers have the fonts that you specify on their computer.

For example, a company might have a font developed for them for use as their official typeface, say "Company Font A". In order to get the most return on the investment of creating a new font, the company wants the Web site to be displayed using that font. The Web developers could use the CSS property:

font-family : Company Font A;

But this would only work on those computers that had that font installed. In other words, only corporate computers would see the font.

Enter Dynamic Fonts

Using dynamic fonts or embedded fonts, a Web developer can use any font they wish to (Note: not all fonts can be embedded or used as dynamic fonts) on their Web pages and have them embedded so their readers can view them as well. What this basically means is that the font definition is downloaded when the page downloads.

But There are Drawbacks to Dynamic Fonts

increases page size

fonts can be large, and will increase the download time

doesn't work on both browsers

there are two methods to embed fonts, but one only works in Internet Explorer and the other doesn't work on Netscape 6 or IE for the Mac.

OpenType

This is the method developed by Microsoft and Adobe.

Works as an extension to CSS to download the font.

Not supported by Netscape.

OpenType Code

Use CSS tags in the <head></head> of your HTML document:

<style type="text/css">

@font-face {

font-family: Font Name;

font-style: normal;

font-weight: normal;

src: url("Font File.eot");

}

.classname {

font-family: "Font Name";

}

</style>

And then you can call out that style in your HTML as you would any other style class:

<p class="classname">...</p>

TrueDoc

This is the method developed by Bitstream and Netscape.

Uses either CSS or a <link/> tag in the <head/>.

Not supported by Netscape 6 or Internet Explorer on the Mac.

TrueDoc Code

Use either the @font-face attribute (as used in the OpenType code above), or link to the URL of your font with the <link/> tag:

<link rel="fontdef" src="fontname.prf" />

Call out the font using

<font face="fontname"/>tags or CSS properties.

Syntax of the Font Property

2008-11-26T21:48:00.002-08:00

The font property is a shorthand property used to set the following styles of fonts:

font-style

font-variant

font-weight

font-size

line-height

font-family

First you should remember that the font-family and font-size are the minimum styles required for this style property. If you only need to style one of the font properties, then you should use the specific font property required, rather than the font shorthand property.

The Basic Font Styles: Font Family and Font Size

The font property needs to have the order correct to work in most browsers. The family is last with the font size just before it.

font: 1em "Times New Roman", Times, serif;

See it in Action

Change the Line Height

Add the line height to your font style by placing it after the font size preceded by a slash. If you leave it off, the line height will be reflected by the font size and determined by the browser.

font: 1em/1.5em "Times New Roman", Times, serif;

See it in Action

Make the Font Bold, Change to Small Caps, or Add Italics

Right before the font size is the font weight. If you leave it off, it will be assigned to "normal."

font: bold 1em/1.5em "Times New Roman", Times, serif;

See it in Action

If you want the font to be displayed as small-caps, then add that in front of the weight. If you're not changing the font weight, simply leave it off the property.

font: small-caps bold 1em/1.5em "Times New Roman", Times, serif;

See it in Action

The font style goes at the very front of the property.

font: italic small-caps bold 1em/1.5em "Times New Roman", Times, serif;

See it in Action

System Fonts

One of the best things about CSS 2 is that you can now style your Web applications to integrate into the operating system that they are running on. If you build a Web application, you can add styles to affect the colors so that your page is colored like other offline applications. But many people don't realize that you can also affect the fonts so that the page has the same fonts as the system.

To change the font to the system fonts use one of the following font keywords:

caption

Changes the font to the one used for captioned controls like buttons and drop-downs.

icon

Changes the font to the one used for icons.

menu

Changes the font to the one used for menu lists and dropdown menus.

message-box

Changes the font to the one used in dialog boxes.

small-caption

Changes the font to the one used for lableling small controls.

status-bar

Changes the font to the one used for window status bars.

See System Fonts in Action

There are a few things to keep in mind when using system fonts:

You cannot set separate elements of system fonts, they are set as a whole and all at once.

Once you've set a system font, you can affect things like the boldness of the font separately.

If the system does not have a specific font defined, the browser will either intelligently substitute (for example, use a smaller version of the caption font for small-caption) or use a default font.

Small Caps - A Font Variant

2008-11-26T21:48:00.001-08:00

One of the lesser used variations in fonts is the small caps variant. With small caps, the lower case letters look like smaller versions of the upper case letters, while the upper case letters are full size.

Uses of Small Caps

One of the best uses of small caps is for acronyms that might attract too much attention if normal-sized capital letters are used. For instance, with the time e.g. 9PM. With small caps you can call out the acronym or the time within the text without impacting the flow. See the examples.

Assign the Small Caps Style

There are only two options on the font-variant style property: small-caps and normal.

font-variant: small-caps;

Font Weight

2008-11-26T21:46:00.000-08:00

The weight of a font is how dark or light it appears. This also refers to the boldness of a font face.

Font Weights

The default weight for a font is "normal". If you are styling a document, and you're not sure what weight your current face is, you can set the font weight to normal:

font-weight: normal;

The most common font weight to use is "bold". This is a standard font weight determined by the user agent. It is the weight that is generally assigned when you use the <b> or the <strong> tags.

It's recommended that you use CSS and the font-weight property rather than the <b> tag:

font-weight: bold;

Advanced Font Weight

CSS provides more than just two font weights normal and bold. You can also specify:

100, 200, 300, 400, 500, 600, 700, 800, 900

These numbers correspond to different relative weights. 400 is considered normal weight, 700 is "bold".

font-weight: 200;
lighter

The user agent moves down the numerical weights by 1 step from the parent element. So if the parent element is "normal" the child should be font-weight: 300.

font-weight:lighter;
bolder

The user agent moves up the numerical weights by 1 step from the parent element. So if the parent element is "bold" the child should be font-weight: 800.

font-weight: bolder;

The Advantages of Font Weights

Using font weights rather than the visual style "bold" makes your Web pages more accessible. For example, how would a screen reader render text that is styled as "bold"? But since there is a numerical scale on the weight of the text, screen readers can make gradual changes in the way the text is spoken.

Most visual user agents don't currently make a distinction between the different numerical weights. If you define an element as font-weight: 600, some browsers will display it as "bold" and others as "normal". So for visual designs it's better to stick with the named terms ("bold" and "normal"). But some type faces may have differences for the different weights, and the numerical scale can accomodate that.

How do you define the size of a font?

2008-11-26T21:43:00.000-08:00

Defines the size of the font. There are four types of sizes:

absolute - based on the browser default (medium): xx-small, x-small, small, medium, large, x-large, and xx-large
relative - relative to the current size: smaller or larger
length - a number with a unit of measure: points (pt), pixels (px), centimeters (cm), milimeters (mm), inches (in), ems (em), or exes (ex)
percentage - a number relative to the current size %

The font-size Property

Font sizes are an important part of Web design because they are the first hurdle to overcome in creating a page that is readable by your customers. Fonts that are too large take up too much space on the page and are as unreadable as ant-sized tiny fonts.

Define Font Sizes in Four Ways

Absolute sizes define the size of the font according to the sizes defined in the user-agent. Absolute font sizes include: xx-small, x-small, small, medium (the default), large, x-large, and xx-large.
Relative sizes define the size of the font relative to the parent element. Relative fonts are either the same size as the parent, larger, or smaller.
Lengths specify a font size that has an absolute measurement of some kind. Lengths include relative lengths (em, ex, px) and absolute lengths (in, cm, mm, pt, pc).
Percentages specify an absolute font size relative to the parent element's font size.

Font Sizes and Accessibility

When choosing font sizes remember to keep accessibility in mind. As a 22-year-old Web designer, you might have better eyesight than your site's 52-year-old demographic. Making fonts tiny may seem to make the page more visually interesting, but often your readers will just ignore what they can't read and move on.

The best way to make your font sizes accessible is to design in ems. Ems allow your fonts to scale up or down as your readers change their font sizes in the browser. And while you might not want them to change their font size, the fact is that they will, so you might as well design for it.

What is a Font?

2008-11-26T21:39:00.000-08:00

The font family defines the face of the font, such as Geneva, Times New Roman, or fantasy. You list the font families you'd like your property to use in order of preference separated by a comma, with multiple word font names indicated in quotes:

font-family : "Times New Roman", Courier, serif;

The most common way that Cascading Style Sheets are used is to change the font of a Web page or site. But in order to get the most out of the style sheets as well as the fonts, you should know a little about typography and how CSS works with fonts.

The Font Families

Cascading Style Sheets (CSS) recognizes five font families:

Serif

Sans-serif

Script

Monospace

Fantasy

These categories or master families are considered generic families because they do not refer to any specific typeface. If you use these cateogory names in your CSS, the browser will choose the typeface that is the default for that category on that computer.

Each category has many different typefaces that are a part of the family. I've put up a graphic to show examples of the different typefaces for each category.

Using the Categories

When you're going to build a CSS call to define the typeface of your elements, you should keep the above categories in mind. They are each suited to different uses, and it's better not to mix them in a style call.

Sans-serif fonts should be the basis of your Web content. They are easy to read online and there are many that are common to most computer operating systems.

Serif fonts are best used in print style sheets because serif fonts can be difficult to read on computer monitors, but they make printouts much easier to read.

Monospace fonts should be used when the spacing of the content is important - such as with pre-formatted text. Another common use of monospace fonts is to display code or other technical details.

Script fonts are best used as signatures or other locations where the look of cursive handwriting is desired. Keep in mind that not all computers have the same script fonts defined, so it's a good idea to define an alternate sans-serif font as a backup.

Fantasy fonts are best used for headings and artistic text. However, they are the least common of all the categories, so unless you know that all your readers will have the font on their system, it is best to have a sans-serif alternate in your font list.

Building Your CSS

Because it's impossible to know the exact setup of every person who visits your Web page, it is very important to write CSS that is flexible, but still presents the basis of the design you want. This means, that when defining the typeface to display, always use a list of fonts, with your preference first, and the most generic last.

Define the typeface using the font-family style property. Some possible style listings:

sans-serif body copy

body { font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; }

serif body copy for print

body { font-family : "Times New Roman", Times, serif; }

monospace for code segments

code { font-family : "Courier New", Courier, monospace; }

script for address or signatures sections

address { Corsiva, "Lucida Handwriting", script;

fantasy for initial paragraph lettering (defaulting to sans-serif if my fantasy font isn't available)

p:first-letter { "Comic Sans", sans-serif }

Some Things to Note:

Always define your preferred font first in the list.

If a font has a multiple word name, put it in quotes.

Always define the families you'll be using before deciding on specifics like size, actual typeface, or other type options.

Web Design Path

Professional Web Designers Advanced HTML and Web Design

The elements of a great 404 page include...

2008-11-26T21:34:00.000-08:00

How would you finish this sentence? I would include:

links to help
contact information
search
suggestions for possible corrections
something fun, so the customer isn't annoyed that the link is broken

Project Type:

Single page project

Web design project

Programming project

Purpose of this Project:

The default messages on 404 or "not found" pages are very unhelpful. They are also very plain. The goal of this portfolio project is to redesign a 404 page to make it more fun and more useful.

Project Description:

Create a 404 page for a website (any website) and make it fun and useful. Include information such as:

Where to find help

What to do about the broken link

Interesting or useful content on the site

Anything else you think would help improve a 404 page

If you're interested in programming Web pages, add some programmatic aspect to the 404 page. Such as:

Detect the referring URL

Create a contact form with the broken link pre-populated

Add dynamic content to the page depending upon where the customer was trying to go

Something else

Technical Requirements for the Project:

None. This project can be done however you would like to do it.

Original Page:

As you can see from the screen shot, the original page has a small amount of information (the URL that wasn't found), but doesn't help the customer at all.

Special Notes for the Project::

None

Project Resources:

None

Did you find this useful?

You can get more articles and information like this by subscribing to the site newsletter or RSS feed.

RSS feed

Readers Respond: The elements of a great 404 page include...

Finish the sentence

Error 404

I place this 404 Error page on all sites I design: http://www.billwilliams.org/error.html
—B.Williams

Check out Google's 404 Widget

This is straight from Google's website: The 404 widget is a quick and easy way to embed a search box on your custom 404 page and provide users with useful information designed to help them find the information they need. Where we can, we'll also suggest other ways for the user to find the information they need, thus increasing the likelihood that they'll continue to explore your site. Get it here: http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=93644

Password Protect Your Web Pages

2008-11-26T21:28:00.000-08:00

Password Protect Your Web Pages
There are lots of options for password protection of your Web pages. You can use a PHP script or JavaScript. But the most secure method is to use htaccess on your Web server. You can even use htaccess to protect just one page in a directory.

What is Password Protection

There are many websites that cause a box to pop up asking you for a username and password. If you don't know the password, you can't enter the site. This provides some security to your Web pages and gives you the chance to choose who you want to allow to see and read your Web pages. There are many ways to password protect your Web pages, from PHP, to JavaScript, to HTAccess (on the Web server).

When Should You Password Protect Pages?

With HTAccess, you can password protect any page or directory on your Web server. You can even protect the entire website if you want to. HTAccess is the most secure method of password protection, as it relies on the Web server, so the valid usernames and passwords are never shared with the Web browser or stored in the HTML like they can be with other scripts. People use password protection:

Hiding new versions of your website from the public until they are ready to launch.

Protecting private sections of your website so that only people you know and trust can read them.

Providing paid content to your customers and only allowing access via a password.

Creating a private forum for select readers.

It's Easy to Password Protect Your Web Pages

You need to do two things:

Create a password file to store the usernames and passwords that will have access to the directory.

Create an htaccess file in the directory to be password protected.

Create the Password File

Open a new text file called

.htpasswd
Note the period at the beginning of the filename.

Use a password encryption program to create your passwords. Paste the lines into your .htpasswd file and save the file. You will have one line for every username that requires access.

Upload the .htpasswd file to a directory on your Web server that is not live on the Web. In other words, you should not be able to go to http://YOUR_URL/.htpasswd - it should be in a home directory or other location that is secure.

Create the htaccess File

Open a text file called

.htaccess

Note the period at the beginning of the filename.

Add the following to the file:

AuthUserFile /path/to/htpasswd/file/.htpasswd

AuthGroupFile /dev/null

AuthName "Name of Area"

AuthType Basic

require valid-user
Change

/path/to/htpasswd/file/.htpasswd

to the full path to the .htpasswd file you uploaded in above.

Change

"Name of Area"

to the name of the site section being protected. This is used primarily when you have multiple areas with different protection levels.

Save the file and upload it to the directory you want protected.

Test that the password works by accessing the URL. If your password doesn't work, go back to the encryption programs and encrypt it again. Remember that the username and password will be case-sensitive. If you are not prompted for a password, contact your system administrator to make sure that HTAccess is turned on for your site.

Readers Respond: Best Methods of Password Protection

Share Your Secrets

Using PHP & mySQL

Hi all I am using PHP and mySQL to protect my websites. Whenever I find my content worth being protected and want just a special group of people to have access, I set up a database with username and (md5) passwords, and then set up a form on my website. Easy, simple, yet powerful. On the other hand: if I want to secure a directory of files, I use .htaccess. A fun thing is also to just put an index.ph in the directory, and make it look for a variable $_GET['shomeall'] if(isset($_GET['showmeall']) && $_GET['showmeall'] == "yourselectedpass") { // show the content (recursive php irectory reader } That was one of the first things I did in PHP... fun, and easy to use. Much safer than anything in Javascript, where people can see the source with the password. In PHP source, nobody will ever see the password. Anyhow, that's all from me. Jennifer, back to you :oP

Styles for One Document

2008-11-23T20:54:00.000-08:00

If you want to set up a stylesheet to affect one Web page, you can do that with a stylesheet in the head of your document. For this you use the <style></style> tag in the <head> of your Web document.

Rules for Style Sheets

Style tags should be held in the <head>

While you can include style tags elsewhere in a document, browsers might not suport this.

All style information should be stored within the <style> and </style> tags.

This is how the browsers know that the information is for styles.
Always include a type attribute in your style tag.

This attribute indicates what types of style rules you will be using. The most common type of style rule is CSS, but there are other types (XSL, JSS, and others).

Tips for Working with Style Sheets

Here are some tips for working with these stylesheets:

Start them out right

Use attributes of the <style> tag to define what the browser should expect

<style type="text/css">

Use comments

Comment tags insure that older browsers don't display your stylesheets.

<style type="text/css">



</style>

think about your styles

In many cases, you don't need to set a lot of different styles, just simple ones that cover how your text and other elements should be displayed on your page. If you don't plan to have any red, blinking, 36 point headlines on your page, then defining a style for that is a waste of bandwidth.

Sample <head>

<head>

<title>sample head of an HTML document</title>

<style type="text/css">



</style>

</head>

Next Page: External Style Sheets > 1, 2, 3, 4

External Style Sheets

2008-11-23T20:50:00.000-08:00

Externally linked stylesheets allow you to use one stylesheet across your entire site. There are two ways to do this:

linking

<link rel="stylesheet" type="text/css" href="styles.css">

importing (Internet Explorer only)

<style type="text/css">

@import URL (http://www.yoursite.com/styles.css);

</style>

Advantages and Disadvantages of External Style Sheets

One of the best things about Cascading Style Sheets is that you can use them to keep your site consistent. The easiest way to do this is to link or import an external style sheet. If you use the same external style sheet for every page of your site, you can be sure that all the pages will have the same style.

Some of the advantages to using external style sheets are:

You can control the look and feel of several documents at once.

This is especially useful if you work with a team of people to create your Web site. Many style rules can be difficult to remember, and while you might have a printed style guide, it is inefficient and tedious to be continuously flipping through it to determine if example text is to be written in 12 point Arial font, or 14 point courier.

You can create classes of styles that can then be used on many different HTML elements.

If you often use a special Wingdings font to give emphasis to various things on your page, you can use the Wingdings class you set up in your style sheet to create them, rather than defining a specific style for each instance of the emphasis.

You can easily group your styles to be more efficient.

All the grouping methods that are available to CSS can be used in external style sheets, and this provides you with more control and flexibility on your pages.

However, there are some good reasons for not using external style sheets:

External style sheets can increase the download time, if they are extremely large.

If you only have a small number of styles, they can increase the complexity of your page.
Like with table rendering, you have to wait until the entire style sheet is loaded before the page can display.

How to Create an External Style Sheet

External style sheets are created with a similar syntax to document level (in the <head>) style sheets. However, all you need to include are the selector and the declaration Just like in a document level style sheet, the syntax for a rule is:

selector {property : value;}

These rules are written to a text file with the extension .css. This isn't required, but it is a good habit to get into, so you can immediately recognize your style sheets in a directory listing.

Once you have a style sheet document, you need to link it to your Web pages. This can be done in two ways:

Linking

In order to link a style sheet, you use the HTML tag <link>. This has the attributes rel, type, and href. The rel attribute tells what you are linking (in this case a stylesheet), the type defines the MIME-Type for the browser, and the href is the path to the .css file. For example:

<link rel="stylesheet" type="text/css" href="styles.css">

Importing

You would use an imported style sheet within a document level style sheet, so that you can import the attributes of an external style sheet while not losing any document specific ones. This is currently only supported in Internet Explorer. You call it in a similar way to calling a linked style sheet, only it must be called within a document level style declaration. For example:

<style>

@import URL (http://www.yoursite.com/styles.css);

... continue styles

</style>

The fact that importing is only supported by Internet Explorer allows you to create multiple stylesheets that are browser independent, but without relying on DHTML and JavaScript to detect the browser.

Create three stylesheets:

a generic one that will cover most basic styles

generic.css

one for Internet Explorer

ie-styles.css

one for Netscape

ns-styles.css

In the head of your document load them in this order:

The generic stylesheet

<link rel="stylesheet" type="text/css" href="generic.css">

The Netscape stylesheet

<link rel="stylesheet" type="text/css" href="ns-styles.css">

The IE stylesheet (using the import command)

<style type="text/css">

@import URL (http://www.yoursite.com/ie-styles.css);

</style>

Because of cascading, the IE stylesheet will "overwrite" style rules found in the Netscape stylesheet, when viewed in Internet Explorer. And Netscape won't load the imported stylesheet at all.

First Page: Inline Styles > 1, 2, 3, 4

CSS Class Resources

Part 1: Inline Styles Part 2: Span and Div Tags Part 3: Header Styles

CSS Class Resources

Part 4: External Style Sheets CSS Class Index

span tags

2008-11-23T20:30:00.000-08:00

The <span> tag has very similar properties to the <div> tag, in that it affects the style of the text it encloses. Items in the <span> can be aligned or given specific style attributes.

The primary difference between the <span> and <div> tags is that <span> doesn't do any formatting of it's own. The <div> tag acts as a paragraph break, because it is defining a logical division in the document. The <span> tag simply tells the browser to apply the style and align rules to whatever is within the <span>.

The primary attributes of the <span> tag are:

align (left|center|right|justify)

style

Use <span> when you want to change the style of elements without naming them in a separate division within the document. For example, if you had a Level 3 Heading (<h3>) that you wanted the second word to be red, you could surround that word with <<span> style="color : #ff0000;">2ndWord</<span>> and it would still be a part of the <h3> tag as well, just red.

More About the <span> Tag

Next Page: Styles for One Document > 1, 2, 3, 4

CSS Class Resources

Part 1: Inline Styles Part 2: Span and Div Tags Part 3: Header Styles

CSS Class Resources

Part 4: External Style Sheets CSS Class Index

Help with CSS Class

Post Your Question Online How to Post

<span> Description:

The <span></span> tag allows you to provide localized formatting within documents.

<span> Web Browser Support:

Netscape 4, 6, 7

Mozilla 1

Firefox 1

Internet Explorer 4, 5, 6

Opera 6, 7, 8

Safari 1

HTML 4.0

XHTML 1.0: XHTML Text Module

<span> Attributes:

class (optional)

dir (optional)

id (optional)

lang (optional)

onclick (optional)

ondblclick (optional)

onkeydown (optional)

onkeypress (optional)

onkeyup (optional)

onmousedown (optional)

onmouseout (optional)

onmouseover (optional)

onmouseup (optional)

style (optional)

title (optional)

<span> End Tag:

</span> REQUIRED

<span> Contents:

Usually any HTML text that you want to specify a style for. The following tags are valid within the <span> tag:

a, acronym, applet, b, basefont, bdo, big, br, button, cite, code, dfn, em, font, i, iframe, img, input, kbd, label, map, object, q, s, samp, script, select, small, span, strike, strong, sub, sup, textarea, tt, u, var

<span> Valid Context:

The <span> tag is valid within the following tags:

a, acronym, address, applet, b, bdo, big, blockquote, body, button, caption, center, cite, code, dd, del, dfn, div, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, i, iframe, ins, kbd, label, legend, li, noframes, noscript, object, p, pre, q, s, samp, small, span, strike, strong, sub, sup, td, th, tt, u, var

<span> Usage:

change style of text within a paragraph

<p>This is a paragraph with <span style="color : purple; text-decoration : line-through;">one short phrase</span> in purple, and crossed out.</p>

<span> Special Notes:

Unlike the div tag, you can use span within paragraph tags, but you can't use it to group block elements, like you can with the div tag.

More <span> Information:

<div></div>

The <span> and <div> Tags

Learn to use two useful style related tags.

XHTML CSS Layout Templates

If you don't have time to write your own XHTML CSS layouts, these templates will get you started.

Return to XHTML Element (HTML Tags) Library

More about the <span> Tag

The SPAN and DIV Tags Using Style Classes and IDs

Related HTML Tags

<div>HTML Tag Library

XHTML 1.0 Elements Library - HTML 4.01 Tag Library

What is XHTML? - Differences Between XHTML, HTML, and XML

XML Lesson 10: What is XHTML &# [ ]

The abbr Element - abbreviations - XHTML 1.0 HTML 4.0

Why Should You Convert to HTML+CSS or XHTML?

DIV Tags

2008-11-23T20:17:00.000-08:00

The <span> and <div> tags were introduced later in the HTML game that are very useful when dealing with Cascading Style Sheets. People tend to use them in similar fashion, but they serve different purposes.

<div>

The <div> tag defines logical divisions in your Web page. In terms of layout, the <div> tag does only one thing, it determines the alignment of that section of your page.

<div> also gives you the chance to define the style of whole sections of HTML. You could define a section of your page as a call out and give that section a different style from the surrounding text.

But that's not all it does! The <div> tag gives you the ability to name certain sections of your documents so that you can affect them with style sheets or Dynamic HTML.

One thing to keep in mind when using the <div> tag is that it breaks paragraphs. It acts as a paragraph end/beginning, and while you can have paragraphs within a <div> you can't have a <div> inside a paragraph.

The primary attributes of the <div> tag are:

align (left|center|right|justify)

style

name

Even if you don't use style sheets or DHTML, you should get into the habit of using the <div> tag. This will give you more flexibility when more XML parsers become available. Also, you can use the NAME attribute to name your sections so that your Web pages are well formed.

Because the <center> tag has been deprecated in HTML 4.0, it is a good idea to start using <div> align="center" to center your text and images. You can also use the text-align: center style tag.

More About the <div> Tag

<div> Description:

The <div> element defines logical divisions within the document. This means that when you use a <div> element, you are indicating that the enclosed content is a specific section of the page. The <div> element is typically used in XHTML+CSS documents to position portions of the page.

The <div> tag is a block-level element.

<div> Web Browser Support:

Netscape 2, 3, 4, 6, 7

Mozilla 1

Firefox 1

Internet Explorer 3, 4, 5, 6

Opera 3, 4, 5, 6, 7, 8

Safari 1

WebTV/MSN TV

AvantGo Palm OS

AvantGo Windows CE

HTML 4.0

XHTML 1.0: XHTML Text Module

<div> Attributes:

align (optional)

class (optional)

dir (optional)

id (optional)

lang (optional)

onclick (optional)

ondblclick (optional)

onkeydown (optional)

onkeypress (optional)

onkeyup (optional)

onmousedown (optional)

onmousemove (optional)

onmouseout (optional)

onmouseover (optional)

onmouseup (optional)

style (optional)

title (optional)

<div> End Tag:

</div> REQUIRED

The following tags are valid within the <div> tag:

a, acronym, address, applet, b, basefont, bdo, big, blockquote, br, button, center, cite, code, dfn, dir, div, dl, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, hr, i, iframe,img, input isindex, kbd, label, map, menu, noframes, noscript, object, ol, p, pre, q, s, samp, script, select, small, span, strike, strong, sub, sup, table, textarea, tt, u, ul, var

<div> Valid Context:

The <div> tag is valid within the following tags:

blockquote, body, button, center, dd, div, fieldset, form, iframe, li, noframes, noscript, object, td, th

<div> Usage:

Style division

<div style="color : #ff0000">red text</div>

Justified text

<div align="justify">The following text will be justified across the width of the browser. This may not work reliably across all browsers, and can also be defined with style tags. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet.</div>

<div> Special Notes:

As this is a block-level tag, most browsers will add extra spaces before and after the element, similar to the paragraph element.

This element is commonly used to layout Web pages with style sheets.

More <div> Information:

The <span> and <div> Tags

XHTML CSS Layout Templates

Box Elements

The <span></span> Element

Return to XHTML Element (HTML Tags) Library

More about the <div> Tag

The DIV Tag How to Center Text Using CSS and the DIV Tag Using the DIV Tag

An Explanation of "Cascading"

2008-11-21T21:24:00.001-08:00

Cascading is something that makes CSS even more powerful. Style sheets cascade when The Web Writer or user (or both) have created an order of precedence for the browser to apply the style rules in multiple sheets. The style rule or sheet that has the highest precedence is the one that is used. The following list is a simplification of how your browser decides precedence for a style:

1. Look for the style element that is created, if it is not in the document, use the default rules in the browser
2. Determine if any of the style rules are marked as important and apply those to the appropriate elements
3. Any style rules in the document will have precedence over the default browser settings
4. The more specific the style rule, the higher the precedence it will have
5. Finally, if two rules apply to the same element, the one that was loaded last will have the highest precedence

Why Learn XML?

2008-11-21T21:18:00.000-08:00

What's the point of learning XML when you already know HTML? Well, the reality is that there are many applications that, while they can be done with HTML, DHTML, Java, ASP, or CGI, work much more easily as an XML application. For example:

connecting databases and the Web
displaying the same data in multiple formats
information tailored to fit the needs of the reader
moving the processing load from the Web server to the client

One thing to keep in mind is that XML is not as hard as you might think. If you know HTML, XML is not difficult to learn. And there are, as I said above, many things that XML can do much better than HTML.

Connecting Databases
The way most people connect databases to the Web is with some external program such as a CGI script, PHP, or ASP. But the data itself is not defined as a database entry until it is actually in the database. If you use XML to connect your databases to the Web, once the data is entered into XML it is in a format compatible with the database.

The reason you can enter data that is compatible with the database and with your XML document is because of the second benefit of XML over HTML:

Multiple Data Formats
Often XML documents can be thought of as a structure for data. Each data element is labeled in such a way that a computer can recognize what it is. For example, if you enter an address book into XML, you would perhaps define the following data groups:

name - first, middle, and last
address - street, number, and apartment or suite
city
state or province
postal code
country

If you have an XML application that accepts data into each of those data groups, you can then create a form to print the data on an envelope, create another form to write all the entries in an address book, and place a final form to keep all the information in a database. With one entry of the data, it can be used for three different applications.

Tailored Information
Documents written in XML can be more easily tailored to be viewable in various formats. To go back to HTML, if you create a document with headings h1, h2, and h3 you have a generally good idea of how they will look on a Web page. But if you were to try to view those headers on a WAP phone you might be surprised how they looked (if they displayed at all).

If we go back to our XML enabled address book, we can use that XML data to display it on the WAP phone and the Web page. We can use a scripting language to determine what is viewing the data, and if it's the WAP phone - display the address book using WML and style sheets, and if it's the Web page - display it using XHTML. But we don't have to create two separate documents. We simply create rules for how the data will be displayed in WML and XHTML and have the pages dynamically built from our XML enabled database.

Load Distribution
One really good feature of XML is that it can be used along with Java and other tools to move most of the processing from the server to the client itself. For example, if you take your address book XML document, you can pass it to a Java applet that will search through the address book fields. But all the processing of both the data and the searching is done by the Java application on the client side rather than the server side. This means that an XML and Java enabled server can process more documents than one that must do the searching itself.

Learning XML or HTML?
Choosing to learn XML is a choice you need to make for yourself, but there are many things that XML can do much more effectively than HTML. If you learn XML, you will have the advantage of a powerful tool in your repertoire to create and manage data.

XML Terms

2008-11-21T21:16:00.001-08:00

XML often sounds more confusing than it really is because there are a lot of jargon terms. Once you understand the following terms, you'll be able to read most basic XML tutorials and have a much better chance of understanding what they mean.

What You Need To Know
In order to best understand these terms, you should have a clear understanding of HTML. If you want to learn HTML, or just brush up, try the HTML Tutorial.

attribute: A part of an element that provides additional information about that element.
Attributes and XML
attribute glossary entry
child: An XML element that is contained within another element.
child glossary entry
DTD: Document Type Definition. A DTD provides a list of the elements, attributes, comments, notes, and entities contained in the document, as well as their relationships to one another.
DTDs and Markup Languages
DTD glossary entry
element: An XML element is the central building block of any XML document.
Elements in XML
element glossary entry
markup: The characters and codes that change a text document into an XML or other Markup Language document. This includes the <> characters as well as the elements and attributes of a document.
What is a Markup Language
markup glossary entry
nesting: Placing one element inside another. When two tags are opened, they must be closed in the reverse order.
nesting glossary entry
parent: An XML element that contains another element.
parent glossary entry
tag: The markup characters that indicate the start or end of an element - but not the element content itself.
HTML Tags
tag glossary entry
valid: An XML document that is verified correct against a DTD or schema.
Create a Valid XML Document
valid glossary entry
well-formed: An XML document that follows the rules set forth by the XML specification, including having an XML declaration, correct comments, all tags are closed, all attributes are quoted, every document has one "container" element.
Create a Well-Formed Document
well-formed glossary entry

What is XML?

2008-11-21T21:09:00.000-08:00

A technical definition of XML or Extensible Markup Language is "a document markup language for defining structured information".

	Look More Closely
	XML is a documented language, and the specification is maintained by the W3C. Once you understand the specification, you'll be better able to work with XML.

Before we go on, you should be aware of what XML is NOT:

XML is not a programming language
XML is not a database
XML is not for Web design

Appendix F. Property index

2008-11-19T20:57:00.000-08:00

Name	Values	Initial value	Applies to (Default: all)	Inherited?	Percentages (Default: N/A)	Media groups
'azimuth'	\| [[ left-side \| far-left \| left \| center-left \| center \| center-right \| right \| far-right \| right-side ] \|\| behind ] \| leftwards \| rightwards \| inherit	center		yes		aural
'background'	['background-color' \|\| 'background-image' \|\| 'background-repeat' \|\| 'background-attachment' \|\| 'background-position'] \| inherit	XX		no	allowed on 'background-position'	visual
'background-attachment'	scroll \| fixed \| inherit	scroll		no		visual
'background-color'	\| transparent \| inherit	transparent		no		visual
'background-image'	\| none \| inherit	none		no		visual
'background-position'	[ [ \| ]{1,2} \| [ [top \| center \| bottom] \|\| [left \| center \| right] ] ] \| inherit	0% 0%	block-level and replaced elements	no	refer to the size of the box itself	visual
'background-repeat'	repeat \| repeat-x \| repeat-y \| no-repeat \| inherit	repeat		no		visual
'border'	[ 'border-width' \|\| 'border-style' \|\| ] \| inherit	see individual properties		no		visual
'border-collapse'	collapse \| separate \| inherit	collapse	'table' and 'inline-table' elements	yes		visual
'border-color'	{1,4} \| transparent \| inherit	see individual properties		no		visual
'border-spacing'	? \| inherit	0	'table' and 'inline-table' elements	yes		visual
'border-style'	{1,4} \| inherit	see individual properties		no		visual
'border-top' 'border-right' 'border-bottom' 'border-left'	[ 'border-top-width' \|\| 'border-style' \|\| ] \| inherit	see individual properties		no		visual
'border-top-color' 'border-right-color' 'border-bottom-color' 'border-left-color'	\| inherit	the value of the 'color' property		no		visual
'border-top-style' 'border-right-style' 'border-bottom-style' 'border-left-style'	\| inherit	none		no		visual
'border-top-width' 'border-right-width' 'border-bottom-width' 'border-left-width'	\| inherit	medium		no		visual
'border-width'	{1,4} \| inherit	see individual properties		no		visual
'bottom'	\| \| auto \| inherit	auto	positioned elements	no	refer to height of containing block	visual
'caption-side'	top \| bottom \| left \| right \| inherit	top	'table-caption' elements	yes		visual
'clear'	none \| left \| right \| both \| inherit	none	block-level elements	no		visual
'clip'	\| auto \| inherit	auto	block-level and replaced elements	no		visual
'color'	\| inherit	depends on user agent		yes		visual
'content'	[ \| \| \| attr(X) \| open-quote \| close-quote \| no-open-quote \| no-close-quote ]+ \| inherit	empty string	:before and :after pseudo-elements	no		all
'counter-increment'	[ ? ]+ \| none \| inherit	none		no		all
'counter-reset'	[ ? ]+ \| none \| inherit	none		no		all
'cue'	[ 'cue-before' \|\| 'cue-after' ] \| inherit	XX		no		aural
'cue-after'	\| none \| inherit	none		no		aural
'cue-before'	\| none \| inherit	none		no		aural
'cursor'	[ [ ,]* [ auto \| crosshair \| default \| pointer \| move \| e-resize \| ne-resize \| nw-resize \| n-resize \| se-resize \| sw-resize \| s-resize \| w-resize\| text \| wait \| help ] ] \| inherit	auto		yes		visual, interactive
'direction'	ltr \| rtl \| inherit	ltr	all elements, but see prose	yes		visual
'display'	inline \| block \| list-item \| run-in \| compact \| marker \| table \| inline-table \| table-row-group \| table-header-group \| table-footer-group \| table-row \| table-column-group \| table-column \| table-cell \| table-caption \| none \| inherit	inline		no		all
'elevation'	\| below \| level \| above \| higher \| lower \| inherit	level		yes		aural
'empty-cells'	show \| hide \| inherit	show	'table-cell' elements	yes		visual
'float'	left \| right \| none \| inherit	none	all but positioned elements and generated content	no		visual
'font'	[ [ 'font-style' \|\| 'font-variant' \|\| 'font-weight' ]? 'font-size' [ / 'line-height' ]? 'font-family' ] \| caption \| icon \| menu \| message-box \| small-caption \| status-bar \| inherit	see individual properties		yes	allowed on 'font-size' and 'line-height'	visual
'font-family'	[[ \| ],]* [ \| ] \| inherit	depends on user agent		yes		visual
'font-size'	\| \| \| \| inherit	medium		yes, the computed value is inherited	refer to parent element's font size	visual
'font-size-adjust'	\| none \| inherit	none		yes		visual
'font-stretch'	normal \| wider \| narrower \| ultra-condensed \| extra-condensed \| condensed \| semi-condensed \| semi-expanded \| expanded \| extra-expanded \| ultra-expanded \| inherit	normal		yes		visual
'font-style'	normal \| italic \| oblique \| inherit	normal		yes		visual
'font-variant'	normal \| small-caps \| inherit	normal		yes		visual
'font-weight'	normal \| bold \| bolder \| lighter \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| inherit	normal		yes		visual
'height'	\| \| auto \| inherit	auto	all elements but non-replaced inline elements, table columns, and column groups	no	see prose	visual
'left'	\| \| auto \| inherit	auto	positioned elements	no	refer to width of containing block	visual
'letter-spacing'	normal \| \| inherit	normal		yes		visual
'line-height'	normal \| \| \| \| inherit	normal		yes	refer to the font size of the element itself	visual
'list-style'	[ 'list-style-type' \|\| 'list-style-position' \|\| 'list-style-image' ] \| inherit	XX	elements with 'display: list-item'	yes		visual
'list-style-image'	\| none \| inherit	none	elements with 'display: list-item'	yes		visual
'list-style-position'	inside \| outside \| inherit	outside	elements with 'display: list-item'	yes		visual
'list-style-type'	disc \| circle \| square \| decimal \| decimal-leading-zero \| lower-roman \| upper-roman \| lower-greek \| lower-alpha \| lower-latin \| upper-alpha \| upper-latin \| hebrew \| armenian \| georgian \| cjk-ideographic \| hiragana \| katakana \| hiragana-iroha \| katakana-iroha \| none \| inherit	disc	elements with 'display: list-item'	yes		visual
'margin'	{1,4} \| inherit	XX		no	refer to width of containing block	visual
'margin-top' 'margin-right' 'margin-bottom' 'margin-left'	\| inherit	0		no	refer to width of containing block	visual
'marker-offset'	\| auto \| inherit	auto	elements with 'display: marker'	no		visual
'marks'	[ crop \|\| cross ] \| none \| inherit	none	page context	N/A		visual, paged
'max-height'	\| \| none \| inherit	none	all elements except non-replaced inline elements and table elements	no	refer to height of containing block	visual
'max-width'	\| \| none \| inherit	none	all elements except non-replaced inline elements and table elements	no	refer to width of containing block	visual
'min-height'	\| \| inherit	0	all elements except non-replaced inline elements and table elements	no	refer to height of containing block	visual
'min-width'	\| \| inherit	UA dependent	all elements except non-replaced inline elements and table elements	no	refer to width of containing block	visual
'orphans'	\| inherit	2	block-level elements	yes		visual, paged
'outline'	[ 'outline-color' \|\| 'outline-style' \|\| 'outline-width' ] \| inherit	see individual properties		no		visual, interactive
'outline-color'	\| invert \| inherit	invert		no		visual, interactive
'outline-style'	\| inherit	none		no		visual, interactive
'outline-width'	\| inherit	medium		no		visual, interactive
'overflow'	visible \| hidden \| scroll \| auto \| inherit	visible	block-level and replaced elements	no		visual
'padding'	{1,4} \| inherit	XX		no	refer to width of containing block	visual
'padding-top' 'padding-right' 'padding-bottom' 'padding-left'	\| inherit	0		no	refer to width of containing block	visual
'page'	\| auto	auto	block-level elements	yes		visual, paged
'page-break-after'	auto \| always \| avoid \| left \| right \| inherit	auto	block-level elements	no		visual, paged
'page-break-before'	auto \| always \| avoid \| left \| right \| inherit	auto	block-level elements	no		visual, paged
'page-break-inside'	avoid \| auto \| inherit	auto	block-level elements	yes		visual, paged
'pause'	[ [ \| ]{1,2} ] \| inherit	depends on user agent		no	see descriptions of 'pause-before' and 'pause-after'	aural
'pause-after'	\| \| inherit	depends on user agent		no	see prose	aural
'pause-before'	\| \| inherit	depends on user agent		no	see prose	aural
'pitch'	\| x-low \| low \| medium \| high \| x-high \| inherit	medium		yes		aural
'pitch-range'	\| inherit	50		yes		aural
'play-during'	mix? repeat? \| auto \| none \| inherit	auto		no		aural
'position'	static \| relative \| absolute \| fixed \| inherit	static	all elements, but not to generated content	no		visual
'quotes'	[ ]+ \| none \| inherit	depends on user agent		yes		visual
'richness'	\| inherit	50		yes		aural
'right'	\| \| auto \| inherit	auto	positioned elements	no	refer to width of containing block	visual
'size'	{1,2} \| auto \| portrait \| landscape \| inherit	auto	the page context	N/A		visual, paged
'speak'	normal \| none \| spell-out \| inherit	normal		yes		aural
'speak-header'	once \| always \| inherit	once	elements that have table header information	yes		aural
'speak-numeral'	digits \| continuous \| inherit	continuous		yes		aural
'speak-punctuation'	code \| none \| inherit	none		yes		aural
'speech-rate'	\| x-slow \| slow \| medium \| fast \| x-fast \| faster \| slower \| inherit	medium		yes		aural
'stress'	\| inherit	50		yes		aural
'table-layout'	auto \| fixed \| inherit	auto	'table' and 'inline-table' elements	no		visual
'text-align'	left \| right \| center \| justify \| \| inherit	depends on user agent and writing direction	block-level elements	yes		visual
'text-decoration'	none \| [ underline \|\| overline \|\| line-through \|\| blink ] \| inherit	none		no (see prose)		visual
'text-indent'	\| \| inherit	0	block-level elements	yes	refer to width of containing block	visual
'text-shadow'	none \| [ \|\| ? ,]* [ \|\| ?] \| inherit	none		no (see prose)		visual
'text-transform'	capitalize \| uppercase \| lowercase \| none \| inherit	none		yes		visual
'top'	\| \| auto \| inherit	auto	positioned elements	no	refer to height of containing block	visual
'unicode-bidi'	normal \| embed \| bidi-override \| inherit	normal	all elements, but see prose	no		visual
'vertical-align'	baseline \| sub \| super \| top \| text-top \| middle \| bottom \| text-bottom \| \| \| inherit	baseline	inline-level and 'table-cell' elements	no	refer to the 'line-height' of the element itself	visual
'visibility'	visible \| hidden \| collapse \| inherit	inherit		no		visual
'voice-family'	[[ \| ],]* [ \| ] \| inherit	depends on user agent		yes		aural
'volume'	\| \| silent \| x-soft \| soft \| medium \| loud \| x-loud \| inherit	medium		yes	refer to inherited value	aural
'white-space'	normal \| pre \| nowrap \| inherit	normal	block-level elements	yes		visual
'widows'	\| inherit	2	block-level elements	yes		visual, paged
'width'	\| \| auto \| inherit	auto	all elements but non-replaced inline elements, table rows, and row groups	no	refer to width of containing block	visual
'word-spacing'	normal \| \| inherit	normal		yes		visual
'z-index'	auto \| \| inherit	auto	positioned elements	no		visual

Classification of HTML

2008-11-18T01:16:00.001-08:00

HTML can be classified into two categories namely SGML based HTML (traditional) pitted against XML based HTML (also called XHTML) and the second one being a strict versus transitional versus frameset. In this article, the former has been described in detail.

One notable difference between the traditional version and XHTML is the technical distinction between the two of them. However, Inspite of all the modifications being done, the root element name “HTML” has been kept the same. The area which requires loads of effort is the one where the limitations of XML start showing in comparison to the more complex SGML inspite of the W3C intended HTML 4.01 being identical to XHTML 1.0. Due to the similarity quotient between HTML and XHTML, they are documented in parallel at many times.

The difference between an XHTML 1.0 document and an HTML 4.01 document is mostly syntactic in each of the corresponding DTDs except for the different opening declarations applicable for the document. There are many shortcuts which XHTML does not allow but HTML allows because of the underlying syntax. Be it elements with optional opening or closing tags, empty elements not having an end tag, all these are examples of the shortcuts that a user can take advantage of in HTML. HTML requires all elements to have an opening tag or a closing tag.

After contemplating on the whole process, the developers of XHTML have also come out with a shortcut. The opening and closing of an HTML tag has to be done within the same tag but a slash (/) can be added before the closing of the tag. For demonstration of the concept, let us take this example: , where “<” is the opening tag and “>” the closing tag, “avi” is a fictitious HTML tag and as mentioned above, the slash (/) comes before the tag is closed.

To properly understand the minute differences between HTML and XHTML, the tips listed below need to be kept in mind:

. XHTML makes use of XML’s built in language defining functionality attribute. The language for an element should be specified with a lang attribute rather than the XHTML attribute.
. The XML namespace has to be removed as HTML does not have a provision for namespaces.
. The document type declaration has to be changed from XHTML 1.0 to HTML 4.01.
. The empty-element syntax of an XML has to be developed into a style empty element of an HTML.

A technically well constructed XHTML document will always follow all the syntax requirements of XML. The structure of a document is thoroughly described by the content of XHTML and legitimate documents will religiously follow its specified data.

To migrate easily between HTML and XHTML, several conventions have been recommended by the W3C and by meticulously following these guidelines, a user will be able to easily interpret the document as HTML or XHTML. The XHTML 1.0 documents that have been made compatible in this way are permitted by the W3C to be served either as HTML or as XHTML.

What is meant by web standards?

2008-11-18T01:12:00.000-08:00

The term 'web standards' is the collection of W3C guidelines for the publication of web documents. With regard to web standards, this manual restricts itself to HTML, XHTML, CSS, ECMAScript, DOM and XML.
What is W3C?

The W3C (World Wide Web Consortium) is an international consortium devoted to the favourable development of the Web. W3C was founded in 1994 and headed by the founder of the Web, Tim Berners-Lee. By now, more than 450 organisations are affiliated to W3C: MicroSoft, Apple, Adobe, Macromedia, Sun Microsystems and many others in the area of software and hardware, information technology, academic research and telecommunications.

W3C develops open specifications (de facto standards) that increase the compatibility of web-related products. These open specifications (or guidelines) are drawn up by work groups consisting of members of W3C, in cooperation with external experts. W3C working parties achieve consensus among companies and other organisations involved in the development of and for the Web.

It takes a considerable time before a proposal (working draft) achieves the status of a recommendation. During this period, a great many amendments will generally be made to the original proposal. For this reason, it is not advisable to see a W3C working draft as a (de facto) standard, even if browsers already support some of the proposals on an experimental basis.

Why are web standards important?

2008-11-18T01:08:00.000-08:00

The use of web standards in the production of websites has a number of benefits in terms of accessibility, stability and sustainability.
Accessibility
For visitors
Sites that are built in accordance with web standards are easier to use for people with 'non-standard' browsers, such as screen readers, Braille displays, speech synthesisers, text browsers and palmtop browsers with limited screen dimensions.
It is not feasible to build and maintain an alternative website for every conceivable particular user situation.
Web standards offer the technology to take account of most user situations within one version of a website. The application of web standards is the best guarantee that a website is accessible to both new and old web browsers, ‘non-standard’ browsers, search spiders and new media, such as mobile internet.
For software
Visibility of the site in search engines.
A site built according to web standards is easier to understand and can be more accurately indexed for search spiders. This makes it easier to, add your own search engine to the website, while the results from this search engine will be more accurate.
Web standards were developed with backward compatibility in mind.
Older browsers will still understand the basic structure of the site and display the content, even if they do not support the newer technologies (see also Progressive enhancement). The same applies to search spiders.
Building according to web standards offers the web developer an opportunity to validate produced code.
Validation services give a summary of errors in the code, making the web developer’s task easier and thus saving time.
Web pages built according to standards can simply be converted to other formats, such as a database, Word or PDF files.
Variety in the supply of information lies within reach. Furthermore, it makes migration to other applications easier.
Stability
Most web standards have been developed with backward compatibility in mind.
This means that sites built with older versions of the standard will work in new browsers and that sites made with newer versions of the standard will still be accessible in older browsers, albeit trimmed down. A principle known as ‘Graceful Degradation’. See also Progressive enhancement.
Throughout its lifecycle, a website will be changed and updated by several web developers and content managers.
Web standards are a collection of rules that every web developer or content manager can learn and follow, which makes modifications to and maintenance of sites easier.

HyperText Markup Language

XML Elements

FAQ About XHTML vs HTML

How to Choose ID and Class Names

Effective Web Navigation

Information Architecture

Organization

Navigation Design

Navigating Web Pages

Dynamic Fonts

Enter Dynamic Fonts

But There are Drawbacks to Dynamic Fonts

OpenType

OpenType Code

TrueDoc

TrueDoc Code

Syntax of the Font Property

The Basic Font Styles: Font Family and Font Size

Change the Line Height

Make the Font Bold, Change to Small Caps, or Add Italics

System Fonts

Small Caps - A Font Variant

Uses of Small Caps

Assign the Small Caps Style

Font Weight

Font Weights

Advanced Font Weight

The Advantages of Font Weights

How do you define the size of a font?

Define Font Sizes in Four Ways

Font Sizes and Accessibility

What is a Font?

The Font Families

Using the Categories

Building Your CSS

Some Things to Note:

Web Design Path

The elements of a great 404 page include...

Project Type:

Purpose of this Project:

Project Description:

Technical Requirements for the Project:

Original Page:

Special Notes for the Project::

Project Resources:

Did you find this useful?

Readers Respond: The elements of a great 404 page include...

Error 404

Check out Google's 404 Widget

Password Protect Your Web Pages

When Should You Password Protect Pages?

It's Easy to Password Protect Your Web Pages

Create the Password File

Create the htaccess File

Readers Respond: Best Methods of Password Protection

Using PHP & mySQL

Styles for One Document

Rules for Style Sheets

Tips for Working with Style Sheets

Sample <head>

CSS Class Resources

CSS Class Resources

Help with CSS Class

Related Articles

External Style Sheets

Advantages and Disadvantages of External Style Sheets

How to Create an External Style Sheet

CSS Class Resources

CSS Class Resources

Help with CSS Class

Related Articles

span tags

CSS Class Resources

CSS Class Resources

Help with CSS Class

Related Articles

<span> Description:

<span> Web Browser Support:

<span> Attributes:

<span> End Tag: