First time visitor? The tutorials start here.

Basic xHTML Tags

Headings

Headings denote the hierarchy of a page and come in different sizes by default. Imagine an outline for a book, where there would be one big heading for each chapter (web page), a slightly smaller sub-heading for sub-chapters, and even smaller headings for parts within each sub-chapter.

<h1> is a level-one heading, and is closed with </h1>. This could be the name of your website or the title of each page.

<h2> is a level-two heading, and is closed with… you guessed it, </h2>. This should be used for the bigger divisions in your page. On this blog, I use one for each major sub-heading within posts, and <h3> to break some of those sections down even further.

I almost never use <h6>, but that is as deep as you can go with sub-headings.

Do you remember when I said that using the right tags can help your search engine rankings? Well, search engines give more “weight” to level-1 headings, then a little less weight to level-2 headings, etc., working down to paragraphs and such. This means that it can help to have a good keyword or two in your <h1>, but don’t overdo it. If you overdo it, search engines might actually penalize you for “keyword spam”.

I’ll get into more detail on this when discussing search engine optimization (SEO), but I thought I’d make a quick mention here.

Paragraphs

Every paragraph starts with <p> and ends with </p>.

A paragraph is basically a block of text that has blank space both above and below it.

Hidden comments

Yes, you can hide comments in your code that will not be displayed on the page itself. This can help immensely, especially when you start nesting a lot of <div>s, which I’ll get into later when I teach you how to arrange a layout with CSS.

The way to add a hidden comment in xHTML is like this:

<!--  HIDDEN COMMENT GOES HERE  -->

You don’t have to type it in ALL CAPS, but it can sometimes make it easier to find when you’re looking at the code. You always have to use the opening angle bracket, exclamation mark and two dashes without any space in between, then add at least one space after that 2nd dash, then whatever you want to put in for the comment, then at least one more space, and finally, two dashes and a closing angle bracket without any space in between.

To make it stand out even more, you could do something like this:

<!--  *****************************************
      ********    THIS IS MY COMMENT   ********
      *****************************************  -->

However you want to do it, everything after the <!–– will be commented out until it gets to the ––>.

Bolding

Aural screen readers for the hearing impaired will actually emphasize a word if you use the right command for it, and that would be the <strong> tag . Of course, after the last bolded word, you will need to use </strong> to close that tag.

Italics

There are two ways to italicize words with xHTML alone, and the way you do it will depend on why you are italicizing it. If you are using it for the name of a book, for example, you will use <cite> (with </cite> to close it, of course). If you are using it for emphasis, then you will use <em> (with </em> to close it, of course).

As with <strong>, an aural screen reader will read the words according to their intent, which is determined by which tag you use.

Line breaks

A line BReak looks like this: <br />

Inserting a line break into a web page will do pretty much the same as hitting the “Enter” key on your keyboard in a word processing document – or the carriage return on a typewriter, for those of us who are old enough to remember such things.

Too many people abuse the line break by inserting a bunch of them where they want an extra gap between one block of text and the next. This is a big no-no, and later I will show you the correct way to add extra space with CSS (Cascading Style Sheets) instead.

Horizontal rules

A horizontal rule looks like this: <hr />

It creates a line that runs horizontally across the page, and is often used to create a clear divider between sections. I personally prefer using CSS to create a border instead, but can still find reasons to use the <hr /> in certain cases.

While “p” for “Paragraph,” “br” for “line BReak,” and “hr” for “Horizontal Rule” make sense, a link doesn’t use “link” like you might expect. A link will “anchor” you to another page or another section of the same page, therefore the tag uses an “a” for “anchor.”

Of course, you can’t just use <a>click here</a> and leave it at that, because where are people going to go if they click on that link? In this case, you need to add an “attribute” that specifies where the link should lead to.

What is an attribute? An attribute comes in two parts: the attribute name and the attribute value. The relationship between the name and value are denoted by putting an equal sign in between them, and the value must be surrounded by quotes.

With an anchor link, the attribute name you need is the “href,” which is short for “Hypertext REFerence,” and the value would be the address of the page you want to send people to. The attribute name/reference pair is emphasized below:

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

The result: Google

The part between the opening <a> tag and the closing </a> tag is the text or image people will see and click on in order to follow your link. Before I can show you how to turn an image into a link, I’ll have to show you how to display an image…

Images

“img” means image. Again, it’s not enough to just put <img> and leave it at that, because what image are you trying to display? Here, another attribute is required, and the name for that is “src,” which is short for “source” (sound it out, src).

<img src="house.jpg" alt="My house" />

Alt??? What is this alt???

Alt stands for “ALTernate text” and is another attribute you need to put into every <img>
tag if you want to make your website accessible to the visually impaired. This is actually required for many commercial websites, just as laws also require brick-and-mortar businesses to have wheel chair ramps and parking spaces for people who have trouble getting around without help.

To decide what value to give your alt, just ask yourself, “What word(s) would I use here if I wasn’t going to display an image?” or, “What word(s) would I want the visually impaired to hear if they can’t see the image?”

To use an image instead of text as a link, just use an image instead of text.

Oh, ok. Here it is in practice…

A text link:

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

An image link:

<a href="http://www.runboard.com"><img src="rb.gif" alt="Runboard" /></a>

See? Just put the image there instead of text. I think some people find code so daunting because they expect it to be harder than it is, but the basics are really quite simple. As long as you take it one step at a time and consider the logic behind it, you should be able to start coding whole web pages in no time.

Note how I used http://google.com for Google’s address when talking about links, but only rb.gif for the address to the image when talking about images. This can only be done if the image is hosted on the same domain, as it should be. In the next section, you will learn the difference between absolute, relative, and root-relative URLs (Uniform Resource Locator, same as a web address).

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!



Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.