HTML タグの基本的な書き方［A］
1. 要素名は < > で囲む［A］
<要素名>
（例: <p>, <body>, <div>）
HTMLタグの要素名は "<"（「左アングルブラケット」もしくは「小なり」と読む）と、">"（「右アングルブラケット」もしくは「大なり」と読む）で囲みます。入力方法は以下の通り。必ず半角で入力するのを忘れずに。
なお、この < と > で括られている HTML タグそのものは、原則としてブラウザ上には表示されません。（意図的に表示させる方法はあります。）
2. 開始タグと終了タグで括る［A］
<要素名>～</要素名>
（例: 文章の中で<strong>マークアップしたい範囲</strong>を任意のタグで括ってみよう。）
HTML タグには開始タグと終了タグがあります。終了タグは、"<" と要素名の間に必ず "/"（スラッシュ）が入ります。解説書によっては、「<p> や <li> は終了タグを省略できる」と書いてあるものもありますが、終了タグは必ず入れるようにしましょう。
3. 各部の名称と基本的な書式［B］
HTML 要素には特定の機能を持たせるために「属性」を付与する場合があります。たとえば、ほかの HTML ページに対して参照（ハイパーリンク）をかけるアンカータグの場合、<a href="index.html"> のように、ハイパーリンクであることを示すアンカー要素（a）とは別に、リンク先の場所を表すエイチレフ（「ハイレフ」とも）属性（href）と、リンク先の場所が具体的にどのファイル（もしくは URL）なのかを指定する値（href属性値）が加えられます。
| 要素名 |
属性名 |
属性値 |
コンテンツ |
終了タグ |
| <a |
href |
="http://www.google.com"> |
Google |
</a> |
要素名と属性名の間は必ず半角スペースを 1字以上空けること。また <img src="image.jpg" alt="画像（代替テキスト）" /> のように属性が複数ある場合、属性と属性の間も 1字以上の半角スペースで空けます。
属性値は "（ダブルクォーテーション、二重引用符）で括るのが慣習的ですが、'（シングルクォーテーション、一重引用符）でも構いません。
4. 空要素タグ: 開始タグと閉じタグを統合した例外的なタグ［B］
画像や改行などは、HTML 文書中にマークアップとして括る対象（テキスト）がない「空要素」（カラの要素）になります。括る対象がないため、本来なら <br></br> と記述するべきところを、開始タグと終了タグを統合して <br /> と略記することが許されています。これを「空要素タグ」といいます。
<要素名 />
（例: <img />, <br />, <input />）
なお、空要素タグは、XHTML の場合はタグの末尾に "/"（スラッシュ）を入れるのが必須になっていますが、HTML では "/" は入れないことになっていますので注意してください。（なお、本授業では XHTML の修得を目標にしていますので、空要素タグの末尾に "/" を入れる習慣をつけておくと良いでしょう。
［実習１］まずは HTML タグの書式に慣れる
まずは "正しい HTML" を意識せずに、自由に文字を装飾しながら、HTML タグの書式に慣れましょう。
- テキストエディタを開いて新規文書を作成します。
- ファイル名: index.html
- 本文: 「まずは文字の装飾から練習。」
- 以下の要素を使って、本文の中の文字を自由に装飾してみてください。
- <b>: 太字
- <i>: 斜体
- <u>: 下線
- <strike>: 取消線
- <br/>: 改行
- 次に以下の要素と属性も使ってみましょう。
- <font>: 文字
- size="（1～7 か、0 か±3 までの数値）": ～の大きさ
（例: <font size="-2">, <font size="6">）
- color="（RGB値）": ～の色
（例: <font color="#d22">, <font color="#2222dd">）
- face="（フォント名）": ～の書体
（例: <font face="Comic Sans MS">）
- 複数の属性を入れる時は、必ず属性と属性の間に半角スペースを入れること。
（例: <font size="+2" color="green" face="ＭＳ 明朝">装飾された文字</font>）
ちなみに、ここで使うHTML要素名は、必ずしも覚えなくても差し支えありませんので、ひとまずここでは純粋に楽しんでください。（理由は後日 説明します。）
参考: HTMLタグリファレンス（目的別）@HTML クイック リファレンス
HTML 文書の基本構造とお約束［A］
HTML 文書の基本構造［A］
HTML タグの基本書式を抑えたところで、次に HTML 文書の基本構造を覚えておきましょう。HTML 文書は <html> 要素を根幹とし（これを「ルート要素」といいます。［C］）、その直下に <head> 要素と <body> 要素がきます。
<html>
<head>
（ページの基本情報）
</head>
<body>
（ページの本文）
</body>
</html>
<head> 要素以下には、Webページの題名や言語（日本語とか英語とか）などの基本情報が入る、本でいえば「奥付（おくづけ）」のような部分になります。ここは閲覧者の目には直接 見えない部分が多いですが、実は結構 重要な場所です。どう重要なのかについては、前期の後半頃にあらためて説明します。今は「そういうのがあるんだ」程度の認識で充分です。
<body> 要素以下には、閲覧者の目に見える部分 ― Webページの本文が入ります。ブラウザの画面上に表示させる本文、たとえば先ほど編集した「まずは文字の装飾から練習。」という本文はここに入ります。これが本文を構成する段落のひとつであることを示すために、行全体を下記のように <p>（段落、Paragraph）タグで括っておくと良いでしょう。
<html>
<head>
<title>秋山の練習用ページ</title>
</head>
<body>
<h1>HTML入門 3</h1>
<h2>実習 1</h2>
<p>まずは文字の装飾から練習。</p>
</body>
</html>
<head> の直下にある <title> は、ページの題名を設定するための要素です。<title> 要素で括られた Webページの題名は、ブラウザのタイトルバーに表示されたり、「お気に入り」（または「ブックマーク」）の見出しとして使われます。
HTML 文書の記法上のお約束ごと
- 改行文字やタブ文字は半角スペースと同等に扱われる。
（Webページ中で改行させたい時は <br/>（BreakRow）タグを改行させたい位置に挿入します。）
- 連続する複数の半角スペースは、何文字続いていても半角スペース 1文字分としてしか扱われない。
- 入れ子構造が崩れないように書くこと。（終了タグの閉じ忘れもないように。）
- ×: まずは<b>文字の<u>装飾</b>から練習</u>。
- ○: まずは<b>文字の</b><u><b>装飾</b>から練習</u>。
- ◎: まずは<u>文字の</b>装飾</b>から練習</u>。
+ 
→ <
→ >
