[Site map] You are here --- > Newbies Paradise > Tutorials > Official > Website > Reading a tutorial

xHTML Tags List

	Author : M@teo21 Creation : : on 01/23/2007 11:13:24 AM Last modification: : on 03/25/2007 01:31:18 PM Rate and comment this tutorial Print this tutorial

This page is a non-exhaustive list of xHTML tags that exist.

You'll find here a pretty big amount of xHTML tags, some of them we went through, some of them we didn't. Usually tags we didn't go through are tags that you won't use that often. Who knows, you might find useful new tags

You could use this page to help you during the conception of your website

Be careful, I want to make this clear, this page is not fully complete, and I did that on purpose. I'd rather put less tags and only keep those that I think will be the most useful to you.

Chapter Contents :

First-level tags
Header tags
Text structure tags
List tags
Table tags
Form tags
Generic tags

First-level tags

First level tags are the backbone of an xHTML page's structure. They represent a web page's "minimal code".

The xHTML minimal code

Hereunder you will find the minimal code of every web page:

Code: HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD xHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   <head>
       <title>Website title</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <body>
   </body>
</html>

Header tags

All these tags are inserted inside the page header, e.i. between <head> and </head>

Tag

Description

<title>

Web page title.

This is probably the most important tag in a Web page. Choose your title carefuly because it influences search engines a lot (they consider the words of the title as important).

Code: HTML

1	<title>The short chemical experiments of M. Clever</title>

<style>

Allows to add CSS code for the page.
It is given the type="text/css" attribute.

Example:
Code: HTML

1
2
3

<style type="text/css">
/* Your CSS code here */
</style>

Allows to add a script.
It is often used for adding Javascript:

Code: HTML

1
2
3

<script type="text/javascript">
/* Your script here */
</script>

This tag defines the properties of the Web page.
It has many different uses. Here are some useful examples:

Code: HTML

<!-- Web page author -->
<meta name="author" content="John Clever" />
<!-- Page description -->
<meta name="description" content="John Clever's personal web page" />
<!-- Page keywords -->
<meta name="keywords" content="experiments, research, science, chemistry" />
<!-- Contact address -->
<meta name="reply-to" content="myaddress@email.com" />
<!-- Prevents the web page from being put into the browser cache  -->
<meta http-equiv="pragma" content="no-cache" />
<!-- Characters table -->
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<!-- Automatical refreshing after 10 seconds -->
<meta http-equiv="refresh" content="10; URL=http://www.monsite.com" />

The meta is mostly used to set the characters table.

The description and the keywords of the page almost don't affect search engines.
So it is no use spending hours adding tons of keywords

This tag allows to set some information about the Web page.
It is mostly used to insert a CSS stylesheet, like this:

Code: HTML

1	<link rel="stylesheet" media="screen" type="text/css" title="Mon design" href="design.css" />

It can also be used for a few other things:

Code: HTML

<!-- Website homepage -->
<link rel="start" title="Home" href="index.html" />
<!-- Website help page -->
<link rel="help" title="Accessibility policy" href="accessibilite.html" />
<!-- Website RSS feed -->
<link rel="alternate" type="application/rss+xml" title="My website's news" href="news.xml" />
<!-- Website icon (favicon) -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

A favicon is an icon which is usually displayed
on the left of your website's address on your visitor's browser. It's a way to customize your website.
Concerning the RSS feed, it is a method allowing your visitors to be kept aware of your website's news through a special software (it is by the way featured in browsers such as Firefox). RSS feeds are usually generated with PHP (consequently, it doesn't concern you if you're only using xHTML / CSS).

Text structure tags

Tag

Type

Description

Block Paragraph Inline Line break Inline Hypertext link. Precise the matching URL with the href property: Get to the other page. Inline Inserts an image. Use the attributes src(to set the image adress) and alt (to set an alternative text). These two attributes are required. Example:

Block Level 1 title

Block Level 2 title

Block Level 3 title

Block Level 4 title

Block Level 5 title

Block Level 6 title Inline Emphasizing (soft) Text is usually set in italic characters. Inline Emphasizing (strong) Text is usually set in bold characters. Inline Subscript text writing Inline Superscript text writing Inline Quotation (short) Inline Quotation (medium)
Block Quotation (long) You have to put a paragraph tag within the blockquote tag. For instance: Text of the quotation Inline Allows to define acronyms, like C.I.A. The title attribute is usually used to display the acronym's definition when it is being pointed at: C.I.A.
Block Creates a horizontal break line
Block Allows to set an adress, or sometimes the author of a document. Text is usually set in italic characters. Inline Allows to indicate a text which has been removed. Text is usually crossed-out. Inline Allows to indicate a text which has been inserted. Text is usually underlined. Inline Allows to indicate a definition. Inline Allows to indicate a code the visitor has to type.
Block Text inside the
tag will be displayed exactly as it has been typed inside the code (with either spaces and line breaks). A constant-sized font is used.

List tags

This section lists tags used to build lists (bulleted, ordered, definition...)

Tag Type Description
<ul> Block Unordered bulleted list. A <li></li> has to be set for each element. Example:

Code: HTML
1 2 3 4
<ul> <li>An element</li> <li>Another element</li> </ul>

<ol> Block Bulleted ordered list. A <li></li> has to be set for each element. Example:

Code: HTML
1 2 3 4
<ol> <li>Element #1</li> <li>Element #2</li> </ol>

<li> list-item Creates a list element.
This tag has a perticular type since it is neither inline nor block. Its type is list-item.
<dl> Block Definitions list. Every <dt> word must be followed by its definition <dd>. Example:

Code: HTML
1 2 3 4 5 6
<dl> <dt>Door</dt> <dd>A movable structure used to close off an entrance</dd> <dt>Theater</dt> <dd>A building for the presentation of dramatic performances.</dd> </dl>

<dt> Block Defined word
<dd> Block Word definition

Table tags

Tag

Type

Description

BlockDelineates a table. Here is an example of a simple one:

Flight 377 Passengers
Name Age Country

Carmen 33 Spain

Michelle 26 United States

François 43 France

- Sets the name of a table - Table line - Header cell of the table (usually set in bold) - Table cell - Optional tag allowing to add a table header. If you wish to use , and , you have to add them in the following order in your source code: - Optional tag allowing to insert the body of the table - Optional tag allowing to insert the table footer

Form tags

Tag Type Description
<form> Block Delineates a form.
The <form> tag is usually to be given two attributes:

method: sets the form sending process (get or post). If you don't know what to use, choose post.

action: the page to which the visitor shall be redirected after sending the form.

<fieldset> Block Allows to gather several elements of a form within groups.
It is rather fit for big forms.

To give your group a title, use the <legend> tag
<legend> Inline TItle of a group within a form.
Is to be used inside a <fieldset>
<label> Inline Title of a form element.
You should usually set the for attribute on this tag to precise the ID of the element to which the label refers.
<input /> Block Form field.
There are many different kinds of fields. You can choose the one you like with the type attribute:

Code: HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
 <input type="text" />  <input type="password" />  <input type="file" />  <input type="checkbox" />  <input type="radio" />  <input type="submit" />  <input type="reset" />  <input type="hidden" />

Mind giving a name to your fields by means of the name attribute
<textarea> Block Multi-line text typing area.
Its size can be defined with the rows and cols attributes (number of rows and columns) or with CSS, thanks to the width and height properties.
<select> Block Scrolling list.
Use the <option> tag to create each list element:

Code: HTML
1 2 3 4 5
<select name="country"> <option value="france">France</option> <option value="spain">Spain</option> <option value="italy">Italy</option> </select>

<option> Block Element of a scrolling list
<optgroup> Block Elements group of a scrolling list.
Should be used in the case of a long scrolling list.
The label attribute must be used to give a name to the group.

Generic tags

Generic tags are tags that have no semantic meaning.

Indeed, all other xHTML tags have a meaning: <p> means "Paragraph", <h2> means "Secondary title", etc.
Sometimes, generic tags (also known as universal tags) need to be used just because none of the others seems to be appropriate. Most of the time, these generic tags are used to build a template.

There are two generic tags: one is inline, the other is block.

Tag Type Description
<span> Inline Inline generic tag
<div> Block Block generic tag

These tags are useful only if you give them a class, id or style attribute:

class : indicates the name of the CSS class which has to be used.

id : gives a name to the tag. This name must be unique on the whole page because it identifies the tag. The ID may be used several different ways, like for instance a link to an anchor, for an ID-type CSS style, for Javascript actions, etc.

style : this tag allows you to type directly the CSS code you want to use. Therefore, you don't have to use a CSS stylesheet separately, you can just directly set the CSS attributes. Note that it is advised not to use this attribute but rather an external stylesheet because it will make your website updates easier in the sequel.

These 3 attributes are not specific to generic tags: they can also be used with most of the other tags with no problem

As I said at the beginning of this chapter, there are several tags that I didn't talk about.

As you saw it, with xHTML it is all about good sense. All that matters is to use correctly a tag that fits in the most.
Theoretically, a website may almost be done only with <div>'s and <span>'s (using CSS), but it wouldn't have any logical sense! Respecting the logic of a source code is something that webmasters consider as essential. A web page with a good semantic is more likely to be indexed in Google than a website that uses incongruous tags.

Keep that in mind

Author : M@teo21
Rate and comment this tutorial
Print this tutorial

How-to

Community

User Menu

Search

Guestbook

Advertising

xHTML Tags List

First-level tags

The xHTML minimal code

Header tags

Text structure tags

List tags

Table tags

Form tags

Generic tags