構造

XHTML文書を構成する要素を紹介する．

文書型宣言

XML宣言

XHTMLがXMLの一種であることを示すための指定である．

テンプレート 
<?xml version="バージョン" encoding="文字コード " ?>
エンコード
種類文字コード意味
シフトJISShift_JIS主にWindowsで使用されている．
EUCeuc-jp主にUNIXで使用されている．
JISiso-2022-jpJISコード
Unicode:UTF-8UTF-8最近使い勝手のいい場面が増えてきている．
例文 
<?xml version="1.0" encoding="UTF-8" ?>

文書型宣言

XHTMLのバージョンを指定する．

テンプレート 
<!DOCTYPE html PUBLIC "-//W3C//DTD DOCTYPEの値//EN"
"URL">
DOCTYPEの種類
種類DOCTYPEの値URL
XHTML1.0
バージョン
(厳密型)		XHTML 1.0 Strict http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
XHTML1.0
バージョン
(移行型)		XHTML 1.0 Transitional http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
XHTML1.0
バージョン
(フレーム型)		XHTML 1.0 Frameset http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd
XHTML1.1
バージョン		XHTML 1.1 http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd
XHTML1.0バージョン(厳密型) 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML1.1バージョン 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 //EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

html要素

html要素

html要素はHTML文書全体を囲む必須の要素であり，文書型宣言の次に記述する．

要素の種類全体を囲む要素
テンプレート 
<html>
内容
 </html>
内容head要素・body要素
xmlns属性

xmlns属性はXHTMLを使う場合は必ず必要であり，次のように記述する．

<html xmlns="http://www.w3.org/1999/xhtml"">
</html>

head要素

head要素はタイトルや文字コードなどHTML文書全体に関する情報を示すのに用いる．

要素の種類html要素の子要素
テンプレート 
<head>
内容
</head>
内容title要素・meta要素・link要素・object要素・base要素・style要素
profile属性
meta要素で指定される値の定義を知ることができるがほとんど活用されていない．

title要素

webページにタイトルを付ける．このタイトルがブラウザのお気に入り等に反映されるので，なるべくページ内容が分かるようなタイトルを付けた方がよい．

要素の種類head要素の子要素
テンプレート 
<title>内容</title>
内容テキスト

meta要素

ページ全体に関する基本データであるメタ情報を指定する．

要素の種類head要素の子要素
テンプレート 
<meta />
http-equiv属性

HTTPプロトコルのヘッダー情報をブラウザに伝えることができる．通常はtitle要素よりも先に指定する．

値機能
Content-Type設定する情報の種類を指定する．
Content-Style-Type使用するスタイルシート言語の種類を記述する．
Content-Script-Type使用するスクリプト言語を記述する．
name属性

製作者側が指定したいデータをメタ情報として定義する．通常はtitle要素よりも後に指定する．

値機能
author著者を記述する．
description概要を記述する．
keywordsキーワードを記述する．
copyright著作権を記述する．
date日付を記述する．
generatorhtmlファイルの編集に使用したアプリケーションを記述する．
robots検索エンジンのロボットにページの登録を許可するかをどうかを記述する．
content属性

http-equiv属性やname属性などで指定した情報の具体的な値を記述する．

  • http-quiv属性

    charsetで文字コードを指定するのが一般的である．

    テンプレート 
    <meta http-quiv="値"
content="MIMEタイプ; charset=文字コード" />
    MIMEタイプ
    ファイル形式MIMEタイプ一般的な拡張子
    HTMLファイルtext/html.html
    XHTMLファイルapplication/xhtml+xml.xhtml
    XMLファイルapplication/xml.rdf
    XMLファイルtext/xml.xml
    CSStext/css.css
    JavaScripttext/javascript.js
    例 
    <meta http-quiv="content-type"
content="application/xhtml+xml; charset=UTF-8" />
  • name属性

    keywordsは複数のキーワードを,で区切って記述する．

    テンプレート 
    <meta name="値" content="テキスト" />
    例 
    <meta name="keywords" content="xhtml, html, css" />
<meta name="description" content="xhtmlの紹介をする．" />

style要素

style要素はXHTMLとCSSを別々のファイルに分けずにXHTMLの中にCSSを記述するときに使う．

要素の種類head要素の子要素
テンプレート 
<style tyle=" " >
内容
</style>
内容スタイルシート

head要素全体を通しての例 
<head>
<meta http-quiv="content-type"
content="application/xhtml+xml; charset=UTF-8" />

<title>GAKUMONDO</title>

<meta name="keywords" content="xhtml, html, css" />
<meta name="description" content="xhtmlの紹介をする." />
</head>

body要素

body要素

body要素の内容に，実際に表示される内容を記述する．

要素の種類html要素の子要素
テンプレート 
<body>
内容
</body>
内容ブロック要素・script要素・del要素・ins要素

div要素

div要素を使えば，複数の要素をグループ化できる．CSSを使って特定の部分だけデザインを変更したいときによく用いられる．

要素の種類ブロック要素
テンプレート 
<div>
内容
</div>
内容ブロック要素・インライン要素・テキスト
例文 
<div>
グループ
</div>
出力
グループ

hx要素(x=1・2・3・4・5・6)

h1〜h6要素まで6つのレベルで見出しを記述できる．

要素の種類ブロック要素
テンプレート 
<h1>内容</h1>
内容インライン要素・テキスト
例文 
<h1> h1 </h1>
<h2> h2 </h2>
<h3> h3 </h3>
<h4> h4 </h4>
<h5> h5 </h5>
<h6> h6 </h6>
出力

h1

h2

h3

h4

h5
h6

p要素

見出しではなく，文章として表示させたいテキストを記述する．

要素の種類ブロック要素
テンプレート 
<p>内容</p>
内容インライン要素・テキスト・ブロック要素は不可
例文 
<p>パラグラフ</p>
出力

パラグラフ

br要素

文の改行を行う．２つのパラグラフを書く場合，p要素の中にbr要素を入れるよりも２つp要素で記述した方がよい．

要素の種類インライン要素
テンプレート 
<br />
例文 
おはよう<br />ございます。
出力
おはよう
ございます。

リスト

ul要素

ul要素は順不同の項目を並べて見せるのに用いる．リンクを並べるときには，このul要素がよく使われる．

要素の種類ブロック要素
内容li要素

ol要素

ol要素は順序の決まった項目を並べて見せるのに用いる．

要素の種類ブロック要素
内容li要素

li要素

ul要素やol要素でリストを用いるときには，li要素で項目を作成する．

要素の種類ul要素やol要素の子要素
内容ブロック要素・インライン要素・テキスト
  • 丸によるリスト
    テンプレート 
    <ul>
<li>内容</li>
<li>内容</li>
</ul>
    例文 
    <ul>
<li>あああ</li>
<li>かかか</li>
</ul>
    出力
    • あああ
    • かかか
  • 連番によるリスト
    テンプレート 
    <ol>
<li> </li>
<li> </li>
</ol>
    例文 
    <ol>
<li>あああ</li>
<li>かかか</li>
</ol>
    出力
    1. あああ
    2. かかか
  • 複数階層のリスト
    テンプレート 
    <ol>
<li> 
<ol>
<li> </li>
<li> </li>
</ol>
</li>
<li> </li>
</ol>
    例文 
    <ol>
<li>あああ
<ul>
<li>いいい</li>
<li>ううう</li>
</ul>
</li>
<li>かかか</li>
</ol>
    出力
    1. あああ
      • いいい
      • ううう
    2. かかか

dl要素

dl要素は，用語とその説明文を並べて見せる定義リストを作成するときに用いる．用語集やちょっとした見出しと文章を並べるのに使う．

要素の種類ブロック要素
内容dt要素・dd要素

dt要素

td要素は定義リストの中で用語を示す部分を指定する．

要素の種類dl要素の子要素
dt要素の内容インライン要素・テキスト

dd要素

dd要素は定義リストの中で用語の説明部分を指定する．

要素の種類dl要素の子要素
dd要素の内容ブロック要素・インライン要素・テキスト
  • タイトルによるリスト
    テンプレート 
    <dl>
<dt>dt要素の内容</dt>
<dd>dd要素の内容</dd>
<dt>dt要素の内容</dt>
<dd>dd要素の内容</dd>
</dl>
    例文 
    <dl>
<dt>あああ</dt>
<dd>あいうえ・・・</dd>
<dt>かかか</dt>
<dd>かきくけ・・・</dd>
</dl>
    出力
    あああ
    あいうえ・・・
    かかか
    かきくけ・・・

必ずしも１つのdt要素に１つのdd要素を対応させる必要はない．２つのdt要素に１つのdd要素を対応させたり，１つのdt要素に２つのdd要素を対応させることもできる．