XHTML - Syntax

  »   XHTML  »   XHTML Tutorial - Syntax

Syntax rules in XHTML:

  • all tags and attributes are lowercase
  • all attributes values must be inside commas
  • name attribute is replaced by id for some tags
  • short hand HTML is not allowed
  • all XHTML documents must have a DOCTYPE declaration have all HTML specific tags (html, head, title, body).

So let's see how all these rules apply

1. In XHTML all tags and attributes are lowercase.

Accepted HTML code

HTML<table BORDER="0">

Valid XHTML code

XHTML<table border="0">

2. In XHTML, all attributes values must be placed inside commas.

Accepted HTML code

HTML<table border=0>

Valid XHTML code

XHTML<table border="0">

3. In XHTML the name attribute is replaced by id for some tags

In html 4.01, tags like: applet, frame, iframe and img can have defined the name attribute. In XHTML this is deprecated and you can use instead the id attribute.

Some really old browsers do not recognize the id attribute for these elements. A simple and fast fix is to place both name and id

<

Valid XHTML code. The alt attribute is required to offer an alternative text in case the image is not displayed.

Accepted HTML code

HTML<img src="image.jpg" name="my_image"/>

Valid XHTML code

XHTML<img src="image.jpg" name="image" alt="my image"/>

Note:
In XHTML there are tags like: img, input br, hr, who do not need a closing tag. To transform them into valid XHTML tags you mys end them with " />". Please note the space before the slash, it is the difference between writing valid XHTML code and not.

4. In XHTML short hand HTML is not allowed

Accepted HTML code

HTML<input checked>
<option selected>

Valid XHTML code

XHTML<input checked="checked" />
<option selected="selected" />

Here is a complete list with all attributes shorthand form

HTMLXHTML
compactcompact="compact"
checkedchecked="checked"
declaredeclare="declare"
readonlyreadonly="readonly"
disableddisabled="disabled"
selectedselected="selected"
deferdefer="defer"
ismapismap="ismap"
nohrefnohref="nohref"
noshadenoshade="noshade"
nowrapnowrap="nowrap"
multiplemultiple="multiple"
noresizenoresize="noresize"

5. All XHTML documents must have a DOCTYPE declaration have all HTML specific tags (html, head, title, body).

DOCTYPE Declaration is not an HTML element like any other, but we will see more in the next chapter./p>

XHTML<!DOCTYPE Declaration will be placed here>
<html xmlns="http://www.w3.org/1999/xhtml";>
  <head>
    <title>Page title</title>
  </head>
  <body>
  </body>
</html>

NOTE
Although the xmlns inside the html tag is required, you can omit it if you like. This doesn't make sense, isn't it? Well, it is so required that browsers will automatically include it if you omit it or if you validate the document at w3.org. This will have the default "xmlns=http://www.w3.org/1999/xhtml"; value.

The Lang attribute in XHTML

Although search engines will automatically detect the main language of your website, it is very convenient to set one yourself.

Here is how you can do it:

XHTML<html lang="ro-RO" xml:lang="ro-RO" xmlns ="http://www.w3.org/1999/xhtml";>

You can also find it in this form from time to time:

XHTML<meta http-equiv="Content-Language" content="ro" />

w3.org can validate this without any problems, although it is recommended to use xml:lang instead of http-equiv, according to the XHTML standard.

In case we have a paragraph in a different language then the one we declared at the beginning of the document you can proceed like this:

XHTML<div lang="en-RO" xml:lang="es-ES">Este un contenido en español para los habla-inglesa</div>

Or if you just want to place some content in a different language but it is some universally accepted expression or similar to it:

XHTML<div lang="it" xml:lang="no">Hasta la vista baby</div>

It seems a little bit complicated, but things get simpler as you practice.

To find a complete list of language_country values you can visit www.w3.org