XHTML 文書は、開始タグと終了タグの2つに囲まれることで表現される、要素を1つの単位として構成される。
要素 element を表現する開始タグは、
<element>
であり、その終了タグは、
</element>
と表現される。この開始タグと終了タグに囲まれる部分を要素という。
全ての要素は、開始タグで始まり終了タグで終わる。要素は、その内部にまた要素を包含することが出来、その要素を子要素と呼ぶ。また、自身が包含される要素を親要素と呼ぶ。
ある種類の要素 empty は子要素を持たない。この場合、開始タグと終了タグを書く代わりに、
<empty />
と表現することが許される。このようなタグを空要素タグという。
大部分の要素は、ブロック要素とインライン要素の2つに大別される。基本的には、インライン要素は子要素としてブロック要素を持たず、内部にはインライン要素や文字列のみを子要素として持つ。
ブロック要素は、子要素としてインライン要素のみを持つものや、ブロック要素を持てるものなど、要素によって、包含できる子要素が変化するが、いずれのブロック要素の場合も共通する特徴は、その前後に改行が入ることである。
ある要素 element の開始タグには、その振る舞いを定める属性を記述することが出来る。属性名 property、属性値 value とするとき、その開始タグは、
<element property="value">
と記述する。
XHTML は、XML により記述された HTML 言語であるため、最初に、
<?xml version="1.0" encoding="Shift_JIS"?>
のような、XML 宣言を必要とする。
さらに、この文書が、XHTML 1.0 Transitional で記述されることを表現するために、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
という DTD 宣言を必要とする。
包含する全ての子要素が HTML であることを表す要素。XML 文法で書かれるため、名前空間を属性として、
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> ... </html>
と指定しなくてはならない。
XHTML 1.0 Transitional において、子要素とできるものは、head 要素と body 要素の2つである。
<head> ... </head>
子要素がヘッダ情報であることを表す要素。主に、title 要素、link 要素、script 要素、meta 要素などを持つ。
title 要素は、包含する文字列をタイトルとする要素である。
link 要素は空要素タグであり、href 属性で指定される文書を参照する。主として、外部スタイルシートを参照する場合に用いられ、
<link rel="stylesheet" href="style.css" type="text/css" />
などとして、外部スタイルシート style.css を参照する。
script 要素は src 属性で指定される外部スクリプトを参照する。
<script type="text/javascript" src="script.js"></script>
meta 要素は空要素タグであり、HTML 文書のメタ情報を指定する。例えば、文字コードを指定する場合、http-equiv 属性に、"Content-Type" を指定し、
<meta http-equiv="Content-Type" content="text/html" charset="Shift_JIS" />
などとして、charset 属性で指定する。ちなみに、この charset 属性の値としては、Shift_JIS の他、euc-jp、iso-2002-jp などが指定できる。
スタイルシートを用いる場合、http-equiv 属性に、"Content-Style-Type"を指定し、
<meta http-equiv="Content-Style-Type" content="text/css" />
などと指定する。同様に、スクリプト言語を用いる場合、http-equiv 属性に、"Content-Script-Type" を指定し、
<meta http-equiv="Content-Script-Type" content="text/javascript" />
などと指定する。
子要素であるブロック要素が本文であることを表す要素。
本文全体の見栄えに関する指定は、style 属性において属性値としてスタイルシート呼ばれるものを記述することによって表現することが出来る。
例えば、背景色を白に、文字色を黒に指定する場合には、
<body style="background-color:white; color:black;"> ... </body>
などと指定することになる。background-color は、背景色を指定するプロパティであり、color は、文字色を指定するプロパティである。
プロパティ名の後に、: をはさんで、white などのように値を指定し、; で終了することでスタイルシートの宣言を行う。
<div> ... </div>
子要素としてブロック要素・インライン要素を持つことの出来る、汎用的なブロック要素である。基本的には、あるブロック要素にスタイルシートを指定することが目的である。
<p> ... </p>
子要素として持つインライン要素を、段落 とするブロック要素である。body 要素内で文字列を記述する場合、原則として、この p 要素の子要素として記述するのが基本である。
<hr />
横罫線を表す空要素タグである。
<span> ... </span>
子要素としてインライン要素を持つことの出来る、汎用的なインライン要素である。基本的には、あるインライン要素・文字列にスタイルシートを指定することが目的である。
<a> ... </a>
子要素であるインライン要素に アンカー を指定するインライン要素。リンク先を表す href 属性に URL を指定することで、包含したインライン要素に対して、リンクを指定する。また、リンク先のタイトルを、title 属性に記述する。
<a href="filename.html" title="filename"> ... </a>
src 属性に指定される画像を配置する空要素タグ。alt 属性に指定した文字列は、画像が表示できない場合に代わりに表示される。
<img src="filename" alt="filename" />
横罫線を表す空要素タグである。