first.html と云う名前で HTML 文書を作成してください。<title>HTML 要素について</title>
<...>) と終了タグ (</...>) の間の事です。【first.html の HTML ソース】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>HTML 要素について</title>
</head>
<body>
</body>
</html>
本文は見出しがつきものです。見出しを表す要素は、「最大の見だし」から、「最小の見だし」まで、六つ用意されています。
| 要素名 | 意味 |
|---|---|
| h1 | chapter 章 |
| h2 | section 節 |
| h3 | subsection 小節（項） |
| h4 | subsubsection 小々節（目） |
| h5 | paragraph title 段落小見出し |
| h6 | subparagraph title 小段落小見出し |
first.html をテキストエディタで開いて下さい。first.html の body 要素の内容 （<body> から </body> の間）を、次のように記述しましょう；
<h1>はじめての HTML 文書</h1> <h2>HTML 要素</h2> <h2>HEAD 要素</h2> <h2>BODY 要素</h2> <h3>H1 要素</h3>記述できたら、「上書き保存」してください。
first.html をブラウザで開いて下さい。次のように表示されれば成功です；
ここでは見だしを意味する要素しか記述していませんので、単なる箇条書きになってしまいました。次から、この見出しの間を文章で埋めていきます。
見出しを表す要素は六つあります。これらは文字を大きくする要素ではありません。文字の大きさは後で CSS と云う仕組みで変更しますので、 HTML は意味のマークアップに専念する必要があります。
文字の大きさを変更するために見出し要素を利用すると、非視覚ブラウザにとっては意味がわからない文書になってしまいます。例えば、音声読み上げ式のブラウザの場合は、見出しの前に「章題……」、「節……」などの音声を付加させる場合も在る事に注意してください。
HTML の要素は、ブロックレベル要素と、テキストレベル要素に分けられます。
h1-h6 要素の内容は、単なるテキストかインライン要素しか許されません。
例えば、h1 要素の内容に副題のつもりで h2 要素や p 要素を書きたいと思っても、それは誤りです。
「見だし要素」は、文字を大きくする要素ではなく、「見出し」を表す要素であることに注意してください。音声読み上げブラウザや、文字の大きさを変更できないテキストベースのブラウザなどが存在しますので、文字の大きさを変更するために見だし要素を利用すると、意味がわからない文書になってしまいます。見栄えは後で調整できます。
次の例は h1 要素の中に h2 要素が入って入るので誤りです；
<h1>HTML 文書序説 <h2>構造化文書入門</h2></h1>
HMTL 文書は不特定多数へ公開される性質があります。その時に備えて、文書製作者である貴方への連絡先を記述しておきます。
first.html をテキストエディタで開きましょう。<address> 今日の日付. <a href="mailto:貴方の e-mail address">貴方の名前</a> </address>私の場合は、
<a href="mailto:SUGAI, Manabu.">SUGAI,M.</a>
です。first.html をブラウザで開いて下さい。先ほど開いたままになっている場合は、「更新」 (reload) すれば結構です。a 要素はハイパーリンクを作る要素です。上の例では、「SUGAI,M.」と云う文字列をクリックすると、ご利用のコンピュータで標準のメールソフトが起動します。
a 要素の開始タグに記述した href="..." のことを属性と呼びます。要素には、利用できる属性が複数定義されていますが、今利用した href 属性は、ハイパーリンクのリンク目的地を指定するためのものです。
a 要素の href 属性の属性値（今は mailto:メールアドレス）は大文字と小文字を区別します。十分注意してください。
a 要素に付いては「STEP4」で紹介します。
次のように表示されれば成功です；
HTML 文書には、是非日付を入れるように心掛けて下さい。文書によっては、日付が不明瞭なものには全く価値が無いと云う場合もあります。
また、 address 要素は全ての文書に含めておくほうが良いかもしれません。検索エンジンやリンクからのアクセスの場合、必ずしもトップページから読み進めるとは限りません。全てのページにアドレス要素が含まれていれば、印刷された場合にも文書の筆者が明示されると云うメリットもあります。
address 要素の内容は、単なるテキストかインライン要素しか許されません。
ここでハイパーリンクを作るために利用した a 要素はテキスト・レベルのインライン要素です。
上のままでは、本文と連絡先が連続しており、少し読みにくく感じられます。そこで、 本文と連絡先の間に水平線を引く事にします。水平線は hr 要素で表します。
hr 要素は開始タグだけで終了タグが存在しません。このような要素の事を空要素と呼びます。 hr 要素の開始タグが現れた場所に水平線が引かれます。今は、 address 要素の開始タグの直前に記述する事にします。
...省略... <hr> <address> ...省略... </address>
次のように表示されていれば成功です；
HR 要素は意味的な区切りを明確にするために、非常に重宝します。従って、視覚的な効果のためだけに HR 要素を利用すると、このメリットが損なわれてしまいます。視覚効果のためだけに利用する場合は、 CSS を利用すべきです。
また、 HR 要素は極大きな意味の区切りのために利用するので、段落の途中やアドレス要素、見出し要素などの内容には記述できない事も覚えておいてください。
次の例は p 要素の中に hr 要素が入って入るので誤りです；
<p> HTML は構造化テキストです。 <hr> W3C は国際的標準化団体ではありませんが、 事実上の WWW の標準化団体として機能しています。 </p>
ここまでで、タイトル、見だし、アドレスが書けるようになりました、次は文章を書いてみます。