Webページは「HTML（HyperText Markup Language）という文法に沿って記述されています．一般的な文章中に含まれる見出しや段落は，HTMLでは「要素」と呼んでいます．要素には「開始タグ」と「終了タグ」をつけて意味を持たせています．各要素は以下のようなスタイルで記述します．
<タグ名>要素の内容</タグ名>
例えば，「自己紹介」という文が，見出しであるとします．見出しはレベルに応じて「h1」から「h6」の6段階の要素で表すことができます．この文は以下のようにタグをつけて表せます．
<h1>自己紹介</h1>
また，要素の種類によっては，その動作を決めるための情報が必要になるものもあります．たとえば，他のページへのリンクは，「a」という要素で表されますが，リンク先のページのアドレスを指定することが必要です．このような，要素の動作を決める情報は，「属性」というものを使って指定します．属性は「属性名="値"」のような形で表し，開始タグの中に記述します．例えば，Waseda net portalへのリンクは，以下のように表します．「href="https://www.wnp.waseda.jp/portal/portal.php"」の部分が属性にあたります．
<h1><a href="https://www.wnp.waseda.jp/portal/portal.php"></a>
一般的なHTMLファイルは次のような構造になっています．
<!DOCTYPE･･･>
<html･･･>
<head>
</head>
<body>
</body>
</html>
1行目の!DOCYPE･･･の部分は「DOCTYPE宣言」と呼ばれるものです．HTMLにはいくつかのバージョンがあり，バージョンによってタグの解釈の仕方が異なることがあります．そこで，「このHTMLは**というバージョンで書かれている」ということを，ファイルの先頭で宣言します．
よく利用されているのは，「HTML4.01」「XHTML1.0」「XHTML1.1」の各バージョンです．HTML4.01とXHTML1.0には，「Transitional」「Frameset」「Strict」の3つの種類があります．Transitionalは，過去のHTMLとの互換性を重視したモードです．また，FramesetはTransitionalに加えてフレームを使えるモードですが，フレームは最近利用が推奨されなくなっています．Strictは，厳密な文法に沿ったモードです．以下に，よく利用するものを列挙します．
| HTMLのバージョン |
DOCTYPE宣言 |
| HTML 4.01 Transitional |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| XHTML 1.0 Transitional |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
HTMLファイル全体は，「html」という1つの要素になります．DOCTYPE宣言の後に，開始タグの<html>を入れ，HTMLファイルの最後に</html>を入れます．また，html要素には属性も指定します．一般的には以下のような属性を指定します．
| HTMLのバージョン |
属性 |
| HTML 4.01 |
lang="ja" |
| XHTML 1.0 |
xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" |
| XHTML 1.1 |
xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" |
<html>タグの直後には，<head>と</head>のタグで囲まれた部分を入れます．これをヘッダ部分と呼び，ページ本体を表示するために必要な情報を入れます．以下のような要素を入れることが一般的です．
| 要素 |
内容 |
| title |
Webページのタイトル |
| link |
関連するファイルの情報 |
| meta |
各種の情報 |
ヘッダ部分の後には<body>と</body>のタグで囲まれた部分を入れます．これをボディ部分と呼びます．
以下のような要素を入れることが一般的です．
| 要素 |
内容 |
| h1～h6 |
見出し |
| p |
段落 |
| br |
改行 |
| a |
リンク |
| img |
画像 |
| table |
表 |
| form |
フォーム |
ここまでの説明に基づいて，簡単なHTMLを以下に紹介します．
| HTMLファイルのサンプルコード |
<![CDATA[
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=Shift_JIS">
<title>北海道の紹介</title>
</head>
<body>
<h1>北海道について</h1>
<p>
日本の最北端にある地方公共団体である．おいしいカニやとうきび，じゃがいもを食べることができる．
札幌ではジンギスカン料理が食べられるビール園がある．北海道大学は札幌にあり，とても広く，
キャンパスの中に牛や馬がいる．<br>
ニセコは美しいスキー場である．ヒラフ，東山，アンヌプリの3つのスキー場は山頂でつながっていて，
相互に滑り降りることができる．キタキツネもいる．
</p>
<br>
<p>
<h3>ニセコスキー場</h3>
ニセコスキー場についての情報は以下にある．<br>
<a href="http://www.niseko.ne.jp/">ニセコ・ユナイテッド</a>
</p>
</body>
</html>
]]>
|
|