Common elements

The elements of the XHTML language can be divided into two classes: block elements and inline elements.

  • Block elements always start on a new line. They include headings, lists, and paragraphs, etc. 
  • Inline elements are always placed inside a block element. They include various emphases and links. References to images should also be placed inside block elements. 

Some block elements can be inside each other. A list, for example, can contain separate list items as well as further lists – even paragraphs, but block elements can never be placed inside inline elements.

Block elements

Headings

There are six different heading levels: h1 is the first, h2 the second, h3 the third, etc. The h1-h3 headings are used the most. The following examples illustrate what headings at level h1, h2 and h3 look like:

Mark-up
View in browser
<h1>Main heading</h1>

Main heading

<h2>Second-level heading</h2>

Second-level heading

<h3>Third-level heading</h3>

Third-level heading

Please note that the layout of headings is specified by the CSS used for the page, so use heading elements to structure the text and then edit their layout when you have finished the text.

Paragraphs

Most of the text in a document is written inside paragraph elements. The paragraph tag is p. Paragraphs should always be ended with an end tag.

<p> ... </p>

Lists

There are three kinds of lists in XHTML; unordered lists (ul), ordered lists (ol) and definition lists (dl). In the two former ones, each list item is marked with a li element. In definition lists, the items are marked with dt (definition term) and their descriptions with dd (definition description). See below for an example of each list type:

Mark-up View in browser
 <ul>
 <li>cat</li>
 <li>dog</li>
 <li>camel</li>
</ul>
  • cat
  • dog
  • camel
 <ol>
 <li>Add fresh ginger to the fish.</li>
 <li>Add peppers, chilli and coconut milk.</li>
 <li>Bake in oven for long enough.</li>
<li>Serve with vegetables.</li>
</ol>
  1. Add fresh ginger to the fish.
  2. Add peppers, chilli and coconut milk.
  3. Bake in oven for long enough.
  4. Serve with vegetables.
 <dl>
 <dt>Cat</dt>
   <dd>Pet that says meow</dd>
 <dt>Dog</dt>
   <dd>Pet that barks</dd>
 <dt>Camel</dt>
   <dd>Relative of the llama</dd>
</dl>
Cat
Pet that says meow
Dog
Pet that barks
Camel
Relative of the llama
 

An unordered list (ul) and an ordered list (ol) are easy to interchange by changing the list element.

The generic block element div

There is a generic block element in XHTML, the div element. With this element, you can divide text and other elements into structural entities. When you have structured the page in logical blacks (in the example below, a simple information box has been defined with the div element), it is very easy to format e.g. the layout quickly with the CSS stylesheet.

<div class="infoboksi" id="bernerslee">
<h3>Did you know?</h3>
<p>Tim Berners Lee invented and developed HTML and the WWW
in Cern in the mid-1990s.</p>
</div>
 

Please note that div elements are usually given the attributes class and/or id. These two attributes can be used with any other element. as well, and you can give them any value. Using these attributes is useful for the following reasons:

  • class: when you give an element the class attribute, you can .g. give the element a different layout with a separate CSS file. Since the div element has no default layout, using it will not affect the web page layout in any way. If you use a CSS stylesheet and the class attribute to define an element, you can easily give the element a layout from a CSS stylesheet (read more about this topic on the page about  Using stylesheets – CSS).
  • id: when you give an element the attribute id, you can use the id to refer to the element easily from other web pages.

All this means that the class attribute describes the element type, while the id attribute identifies the element. Two elements on the same page may not have the same id value.

Other block elements

Other block elements include blockquote, table and pre (preformatted) that describes spaces, line breaks and indentations. you can read more about these and other elements on e.g. the web site of HTML Dog.

 

Inline elements

Emphases

There are two ways to emphasize text in XHTML. The element em (emphasis) can be used for light emphasis; browsers usually show this as italics. The more pronounced strong is usually shown as bold text.

<p>
With XHTML, you can use a <em>light</em> emphasis, or
<strong>strong</strong> emphasis.
</p>
 

The older HTML also contains bold text (b) and italics (i), but these elements to describe layout  have been removed from newer versions of XHTML.

Hyperlinks

We have discussed hyperlinks or references to other web pages, files or URLs in earlier sections. The text that will act as a hyperlink is marked with the element a and the target of the link is marked with the attribute href. The value of the attribute can be a file name or an URL:

<p>
This paragraph contains a link leading to
<a href="http://www.helsinki.fi">the address Helsinki.fi</a>.
</p>
 

Please note that you can use just the file name if you are referring to a file in the same directory as the XHTML page – in other cases you have to give the file path with the href attribute. The examples below illustrate this: the first link refers to a page called dogs.htm in the same folder, while the second link refers to the page campphotos.htm in the sub-directory photos:

<a href="dogs.htm">The dogs in my life</a>
<a href="photos/campphotos.htm">Photos from the camp 2006</a>

Forced page break

You can use the page-break element br to break a heading or a paragraph so that it continues on the next line. This element is useful e.g. for giving contact details:

<p>
Raymond Keskivarsen <br />
Leskirouva Freytagin kuja 59 B 66 <br />
00790 HELSINKI
</p>

Please note that you should not use forced line breaks very often; do not use them for paragraph structures!

A page break is an empty element, i.e. it has no text contents to enclose with a start and end tag. An empty element does not need a separate end tag, so you can write the slash of the end tag into the start tag:

<br />

Images

Use the img element to place photos and other images on the web page. This is an inline element, so it always has to be placed inside a block element:

<p>
<img src="dromedary.jpg" alt="A camel with one hump" />
</p>
 

The file name or web address of the image is given as the src attribute. The image also has to have an alt attribute for alternative descriptions. The alternative description is displayed if a browser cannot show images or the image cannot be loaded with the page.

The image or img element is an empty element, like the line break, because it does not contain any text, so the / demarcating the end tag can be included in the start tag.

The generic inline element span

The equivalent to the block element div is the inline element span. With this element, you can mark e.g. persons or concepts that do not have their own element. The span element also usually takes a class or id attribute:

<p>
It is fun <span class="action">to make</span> web pages!
</p>

It makes sense to encase some words or sentences in span elements, e.g. if you want to give semantic meanings to phrases in the web page code. The following example illustrates this:

<p>
Squirrels, those cute little animals, are often seen visiting gardens.
The common Finnish squirrel <span class="scientificname">Sciurus
vulgaris</span> is not completely harmless, though. Look out so
it doesn't move in with you!
</p>

After reading up on the intricacies of the semantic web, Raymond starts participating in the updating of a Wiki site on Finnish indigenous animals. As his first task, Raymond adds the element <span class=scientificname> around the scientific names of animals on the site. Then he adds a search feature on one of the wiki pages, giving it the name ‘Find animals in the wiki on the basis of Latin names.’ After this, the users can search for information in the wiki very quickly and easily.

 

Other inline elements

Other useful inline elements include ins and del (inserted and deleted text), cite (citation), code, as well as acronym and abbr (abbreviation). Read more about inline elements on the site HTML Dog mentioned above.

Comments

You can also write comments inside the XHTML code. They will not be displayed on the web page. They can be used to clarify the code, for example. An example:

<!-- Place an image of size 300x200 here -->