Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

Web Design Reference Guide

Hosted by

Introduction to HTML and XHTML (Part II)

Last updated Oct 17, 2003.

Tags, The Invisible, Linking, and Text

In HTML and XHTML Introduction Part I, we covered HTML files, elements and tags, and document structure. The article explains how to set up a basic HTML page, open and view the page, and add structure to the page.

In Part II, we take a closer look at tags along with their attributes and values. The "invisible" covers line breaks, linking, comments, and spacing. Spacing has its quirks in a Web page. Simply pressing the space bar repeatedly doesn't add more than one space unless you're using a word processor.

Tag Attributes and Values

We can make tags do more than just what they've been assigned by adding attributes, or traits. We can add an attribute to the <body> tag, for example, to give the page a different background color instead of using the default white color. Here's an example:

<body bgcolor="#000000"> 

The attribute is bgcolor (background color) and it has a value of "#000000," which is black's RGB (red, green, blue) hexadecimal color value. See Wikipedia's RGB color model for more information on RGB colors. Another way to do it is to use "black" as the value:

<body bgcolor="black"> 

We only use the # in front of numbers, so that's why "black" doesn't have it. Another important thing to note is the quotes around the value. You may see it with single quotes like 'black,' and these are okay. Most designers use double quotes, however. You can view an index of attributes from W3C.

If you have the example.html from Part I, add the bgcolor attribute to <body> and view the page in a browser. The page is dark as night. Obviously, you can't see any text since the font uses the same color as the background, black.

Newer designs don't use the attribute and values like these examples. Instead, they rely on cascading style sheets (CSS) to do the styling. If you change the background color using CSS, instead of <body bgcolor="black">, a CSS styled page has <body id="main">. You can read more about CSS in the Layouts section.

Line Breaks

Line breaks are comparable to pressing Enter once while paragraphs take two presses of the Enter key (adding a space between paragraphs). A line break indicates the end of a line. To create a line break, use the <br /> tag.

What's up with the slash coming at the end of the tag instead of the beginning? Unlike the headers, paragraphs, and body tags, a line break doesn't have </br> because it's an empty tag. Empty tags don't have an ending tag because they don't have elements or text that appear after the start tag or anywhere.

In other words, you will never see <br>line break here</br>. While the line break occurs prior to "line break here," it doesn't do anything to the text. <h1>, on the other hand, impacts the text. Another empty tag is <img>. While <br> is okay in HTML, XHTML requires the end of tag slash.

Let's see the line break in action. The following nursery rhyme doesn't look right:

Jack and Jill went up the hill to fetch a pail of water. Jack fell down and broke his crown. Jill came tumbling after.

We usually see nursery rhymes in a format similar to poems. But using a paragraph doesn't do the trick because we don't need an extra space between lines. Line break comes to the rescue.

Jack and Jill went up the hill<br />To fetch a pail of water;<br />Jack fell down, and broke his crown,<br /> Jill came tumbling after.

Copy the above line into your basic HTML page and preview it in the browser. The result should look like Figure 1. Isn't that better?

When you need a blank line, using <br /><br /> is the better choice rather than an empty <p></p> or <p>&nbsp;</p> (more on that funky character shortly). When creating lists, <br /> isn't the way to go as there are tags specifically for creating lists.

Links

Tempting... but, put those golf clubs away. We're not hitting those links.

Links make the Web go 'round. Without links, you'd be stuck on the same Web page until you typed a URL into the browser's address field. But links do more than take you to another Web site. They also swoosh you to a specific part of a page you want to read, send you to another part of your site, and allow you to start an email with a click.

Links To Pages Outside a Web Site

Links use the <a> and </a> start and end tags. To link to Google.com, enter the following:

<a href="http://www.google.com/">Google</a> 

href is the attribute and the URL, http://www.google.com, is the value. Google is the text that appears on the Web page so the visitor knows what to click. You can add more text. In fact, why don't you put it in your starter HTML template and see how it works?

Do a <a href="http://www.google.com/">search on Google</a>. 

Open the file in the browser and it should resemble Figure 2.

If the link (underlined section) appears in blue, don't fret! The reason it's purple is because the visitor has previously visited Google. This is called a visited link. A link that hasn't been visited is blue.

Links to Pages Within a Web Site

Web sites often have menus that include links to pages within the same site. Business sites that have "About" in the menu, for example, serve a page with information about the company. These types of links are either absolute or relative.

An absolute link is a complete link with http included, such as http://www.google.com/intl/en/about.html and http://www.meryl.net/contact/. Any site can use these links and the visitor will arrive on Google's About page and my contact page.

Relative links, however, link to a file based on the location of the current document. A relative link from the http://www.meryl.net page to the About page looks like the following:

<a href="about/index.html">About</a>

The About file is in the home page's subdirectory called /about. What if you're on the About page and you want to go to the Contact page?

<a href="../contact/index.html">About</a>

Maybe it would help to show the layout of the directories:

HOME (public_html)

  • About
  • Contact

The Contact directory is at the same level as About, but to get there requires going up to the home directory and switching over to the /contact directory. In these examples, index.html isn't needed since it's the default file that browsers retrieve when there is no file name. My Web site's home page is http://www.meryl.net/, but the file you see is located at http://www.meryl.net/index.php.

index.php isn't needed as index is the default. However, if you have two files in the same directory called index.html and index.php, index.html will appear when a file name isn't in the URL. Index.html has precedence over index.php. If there is only one index file, then that one loads no matter what extension it has.

Links Within a Specific Area on a Web Page

In the case of a page with a lot of text, you might insert anchors to make it easier for the visitor to jump around the page. Figure 3 shows the top of my About page.

If you click on any of the blue links, you get whisked away right to that part of the page. If you want to know what the heck "unvitals" means and don't want to read the bio or anything else, click on it and the Web page jumps down to near the bottom where "unvitals" begins.

Instead of getting carpal tunnel from scrolling, we make life easier on our visitors' hands with anchors. Here's the source code behind Figure 3.

<a href="#bio">bio</a> - <a href="#media">media</a><br />
<a href="#notes">meryl.net notes</a> - <a href="#unvitals">unvitals</a>

The <a> tag plays a role here. Instead of seeing a directory or file name, you see a name accompanied with #. So where's #unvitals? Right next to "not so vital info:"

<a name="unvital">not so vital info</a>

<a> appears again as the named anchor. Instead of using the href attribute, we use name. The value matches the value from <a href="#unvitals"> without #. # tells the browser to find the name within the page. You can use whatever names you want—the key is to ensure the named anchor and the <a> tag referencing it use the same name.

What if you're on the home page and you want to jump to the bio on the About page? No problem. Enter the following.

<a href="about/index.html#bio">bio</a>

This is a relative link. An absolute link would show "http://www.meryl.net/about/index.php#bio" instead. First, point to the file with the named anchor and then tack on the name at the end of the file.

Email Links

When a visitor clicks on an email link, an email message opens with the email address filled in. While that's a great and easy solution, it has a monster of a drawback—spam. Unscrupulous people have an application that crawls Web pages looking for email links and grabs them. Then they send spam to these collected email addresses. Because of this, few Web sites employ this method. Instead, they use workarounds with code, use added words within the email address, such as jane dot doe at informit dot com (a non-spammer would notice it and fix it as directed to jane.doe@informit.com), or omit a link altogether. But despite the nasty side effect of using the mailto link, it's good to know how it works.

<a href="mailto:jane.doe@informit.com">Email Jane Doe</a>

It's like creating a regular link except in place of the URL, it has "mailto:email address."

To learn how to work around the spam problem with email links, do a search for "hide email."

Comments

As in programming, comments play a valuable role in helping you understand why you added certain elements or markup. You might not look at a Web page's code for months, which makes it easy to forget how the page was organized or why you did certain things. Comments help identify parts of the page and make it easier to find things such as the header, footer, and navigation sections. Comments aren't visible in a browser, only to those who view the source code.

HTML comments begin with

<!--

and end with

-->

Avoid having -- or > in the comment otherwise it'll prematurely end your comment. Here are two sample comments:

<!-- Footer begins here -->
<!-- Footer ends here -->

If you use these comments prior to the start of a footer and after the end of one, you'll be able to quickly find the footer anytime you view the source code. The exclamation point only needs to appear in the starting point of the comment.

Spaces

Press the spacebar as many times as you wish, but the browser will insert only one space. Open your starter template and copy Rudyard Kipling's famous poem, If, which is shown below complete with its spaces and line breaks (otherwise it appears in two long, unbroken lines). View the result in your browser. Note that the indented lines use four spaces.

If you can keep your head when all about you<br />
  Are losing theirs and blaming it on you,<br />
If you can trust yourself when all men doubt you,<br />
  But make allowance for their doubting too;<br />
If you can wait and not be tired by waiting,<br />
  Or being lied about, don't deal in lies,<br />
Or being hated don't give way to hating,<br />
  And yet don't look too good, nor talk too wise:

The result looks like Figure 4. Not one space appears before any of the lines, only between words.

Delete the spaces and replace them with non-breaking spaces (also known as hard or fixed spaces) to see the poem in all of its spacing glory. Just like hard returns are entered by pressing the Enter key, non-breaking spaces are added by entering the &nbsp; entity.

Did you create a practice file or two after Part I? If so, try adding more of what you learned in this article, including tags with attributes, different types of links, comments, line breaks, and non-breaking spaces.

Books

Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS by Dan Cederholm (New Riders, 2005, ISBN: 0321346939). Learn the 10 strategies for creating standards-based designs that also come with flexibility, readability, and user control. Toss the bloated and inaccessible Web pages for lean, mean pages.

Sams Teach Yourself Web Publishing with HTML and XHTML in 21 Days, 4th Edition by Laura Lemay and Rafe Colburn (Sams, 2003, ISBN: 0672325195). The book is a tutorial with the nuts and bolts for writing HTML and XHTML without help from a Web page editor.

HTML for the World Wide Web with XHTML and CSS: Visual QuickStart Guide, Student Edition, 5th Edition by Elizabeth Castro (Peachpit Press, 2003, ISBN: 0321150686). This book continues the Visual Quickstart tradition and gives readers what they need without fluff.

InformIT Articles and Sample Chapters

XHTML by Example: A Hybrid Layout (Part I)

This excerpt from Designing with Web Standards walks through an example with explanations of why Jeffrey Zeldman took the approaches that he did.