XHTML elements are containers that contain pieces of your web page content and used to compose the whole web page. Taken together, these elements define the structure of the web page and they are also the starting point for formatting the web page. The XHTML language defines a small set of elements that you can use. XHTML also defines the syntax for using these elements. A typical element consists of three pieces: a start tag, some content, and an end tag. Here’s an example:

 

<p>This is a paragraph.</p>

 

This example uses the paragraph element. The element starts with the <p> start tag, ends with the </p> end tag, and contains some text inside. Tags are easy to recognize, because they’re always enclosed in angled brackets.

 

The next table lists some of the most commonly used XHTML elements. The Type column distinguishes between two types of XHTML—those that typically hold content or other nested elements (containers) and those that can be used on their own with the empty tag syntax you just considered (stand-alone).

 

 

Tag Name Type Description
<b>, <i>, <u> Bold, Italic,Underline Container These elements are used to apply basic formatting and make text bold, italic, or underlined. Some web designers prefer to use <strong> instead of <b> and <emphasis> instead of <i>. Although these elements have the same standard rendering (bold and italic, respectively), they make more sense if you plan to use

styles to change the formatting sometime in the future.
<p> Paragraph Container The paragraph groups a block of free-flowing text together. The browser automatically adds a bit of space between paragraphs and other elements (such as headings) or between subsequent paragraphs.
<h1>, <h2>,

<h3>, <h4>,

<h5>, <h6>

 Heading Container These elements are headings, which give text bold formatting and a large font size. The lower the number, the larger the text, so <h1> is for the largest heading. The <h5> heading is normal text size, and <h6> is actually a bit smaller than ordinary text.
<img> Image Stand-alone The image element shows an external image file (specified by the src attribute) in a web page.
<br> Line break Stand-alone This element adds a single line break, with no extra space.
<hr> Horizontal line Stand-alone This element adds a horizontal line (which gets the full width of the containing element). You can use the horizontal line to separate different content regions.
<a> Anchor Container The anchor element wraps a piece of text and turns it into a link. You set the link target using the href attribute.
<ul>, <li> Unordered

List, List Item

 Container These elements allow you to build bulleted lists. The <ul> element defines the list, while the <li> element defines an item in the list (you nest the actual content for that item inside).
<ol>, <li> Ordered List,

List Item

 Container These elements allow you to build numbered lists. The <ol> element defines the list, while the <li> element defines an item in the list (you nest the actual content for that item inside).
<table>, <tr>,

<td>, <th>

 Table Container The <table> element allows you to create a multicolumn, multirow table. Each row is represented by a <tr> element inside the <table>. Each cell in a row is represented by a <td> element inside a <tr>. You place the actual content for the cell in the individual <td> elements (or, in the case of the header cells that sit at the top of the table, you can use <th> elements instead).
<div> Division Container This element is an all-purpose container for other elements. It’s used to separate different regions on the page, so you can format them or position them separately. For example, you can use a <div> to create a shaded box around a group of elements.
<span> Span Container This element is an all-purpose container for bits of text content inside other elements (such as headings or paragraphs). It’s most commonly used to format those bits of text. For example, you can use a <span> to change the color of a few words in a sentence.
<form> Form Container This element is used to hold all the controls on a web page. Controls are HTML elements that can send information back to the web server when the page is submitted. For example, text boxes submit their text, list boxes submit the currently selected item in the list, and so on.

Related Tutorials