HTMLにおける基本的なタグ
HTMLで最も重要なタグは、見出し、段落および改行を定義するタグです。
HTMLを学習する最良の方法は、サンプルを使って勉強することです。当サイトでは、非常に使い勝手のよいオンラインHTMLエディタを作りました。そのオンラインHTMLエディタで、HTMLのソースコードを編集し、リアルタイムに結果を表示させることができます。
HTMLの基本タグサンプル
シンプルなHTMLドキュメントのサンプル
これは、最低限のHTMLタグだけで構成された、とてもシンプルなHTMLドキュメントのサンプルです。
body要素の内部のテキストがブラウザにどのように表示されるかデモンストレーションします。
シンプルな段落のサンプル
このサンプルは、p（段落）要素の内部のテキストがブラウザにどのように表示されるかデモンストレーションします。
見出しタグ
見出しは、<h1>から<h6>タグで定義されます。<h1>は題、<h2>は部、<h3>は章、<h4>は節、<h5>は項、<h6>は小見出しを定義します。
<h1>これは見出し（題）です</h1>
<h2>これは見出し（部）です</h2>
<h3>これは見出し（章）です</h3>
<h4>これは見出し（節）です</h4>
<h5>これは見出し（項）です</h5>
<h6>これは見出し（小見出し）です</h6>HTMLでは、見出しの前後に自動的に空白の行が挿入されます。
段落タグ
段落は、<p>タグで定義されます。
<p>これは段落です。</p>
<p>これはもうひとつの段落です。</p>HTMLでは、段落の前後に自動的に空白の行が挿入されます。
改行タグ
段落内で行を変えたいときに使用されるのが<br>タグです。<br>タグを置いた位置で強制的に改行されます。
<p>これは<br>段落と<br>改行です。</p><br>は、空要素と言い、終了タグを必要としません。
HTMLでのコメント記述用タグ
コメントタグは、HTMLのソースコードにコメントを挿入するために使用されます。コメントはブラウザには表示されません。ソースコードの説明やメモなどをコメントすることができます。後々編集する際に、そのコメントによって編集が容易になるでしょう。
<!-- これはコメントです -->終了タグの中ではなく、開始タグの中に感嘆符（!）を必要とすることに注意してください。
基本メモ - 役立ちTips
HTMLドキュメントを記述する場合、テキストが色々なブラウザでどのように表示されるかわかりません。ある人々は大きなディスプレイで、ある人々は小さなディスプレイで見るかもしれません。ユーザーがウィンドウのサイズ変更するごとに、テキストが整形し直されるでしょう。なので編集の段階で、空の行やスペースを使ってテキストの体裁を整えようとするのはタブーです。
HTMLでは、連続した複数のスペースは1つの半角スペースとして表示されます。また、新しい行も1つの半角スペースとして見なされます。
空白の行を挿入するために、空の段落<p>を使用するのは推奨されません。 <br>タグを代わりに使用してください。（しかしリストを作成するために<br>タグを使用するのは推奨されていません）
終了タグ</p>無しで段落を書くことができることに気づいたかもしれません。しかし、それに依存しないでください。HTMLの次のバージョンでは、タグを閉じずに次のステップに入ることを許可しません。
HTMLでは、段落の前後や見出しの前後のように、いくつかの要素の前後に自動的に空白の行が挿入されます。
HTMLの基本タグサンプル集
段落の既定表示サンプル
このサンプルは、p（段落）要素の既定表示のいくつかをデモンストレーションします。
改行のサンプル
このサンプルは、HTMLドキュメントでの改行の使い方をデモンストレーションします。
HTMLの体裁に関する問題のサンプル
このサンプルは、HTMLの体裁に関する問題をデモンストレーションします。
見出しのサンプル
このサンプルは、HTMLドキュメント中の見出しを表示するタグをデモンストレーションします。
中央揃えの見出しサンプル
このサンプルは、見出しを中央揃えにすることをデモンストレーションします。
水平線のサンプル
このサンプルは、水平線を挿入する方法をデモンストレーションします。
コメントの挿入サンプル
このサンプルは、HTMLのソースコードに隠れたコメントを挿入する方法をデモンストレーションします。
背景色のサンプル
このサンプルは、HTMLページに背景色を設定することをデモンストレーションします。
基本的なHTMLタグ一覧表
| タグ | 説明 |
|---|---|
| <html> | HTMLドキュメントを定義します |
| <body> | HTMLドキュメントの内容を定義します |
| <h1>～<h6> | 見出しを定義します |
| <p> | 段落を定義します |
| <br> | 改行を挿入します |
| <hr> | 水平線を定義します |
| <!--> | コメントを定義します |