基本的タグ


タグの基本

基本中の基本

 HTMLはタグを使って、ページを構成しています。タグは開始タグと終了タグで文字列を挟んで意味づけするものと、単独で特定の機能を持つものがあります。
 例えば、段落を作るpタグは<p>と</p>で文章を囲んで段落とします。一方、改行を表すbrタグ (<br />) は単独で用います。brタグのような単独で使用するタグはXHTMLでは "/" をタグの後に付ける必要がありますが、その他の仕様ではなくてもかまいません。従って、<br>でもかまいません。

 タグは通常、小文字を使用します。ただ、古いHTMLでは小文字と大文字を区別しなかったため、互換性のため大文字でもブラウザで正しく表示される場合があります。

 また、古いHTMLの仕様では本来、開始タグと終了タグで囲む必要がある場合でも開始タグのみでも正しいとされていたため、終了タグを省略してもブラウザによっては正しく表示できます。

 でも、これから新しくHTMLを作る場合は、新しい仕様に則って作成しましょう。


HTMLの特別な文字

 HTMLでは "<" と ">" を使ってタグを表すので、文章中に < と > をそのまま書くとブラウザが勘違いして正しく表示できません。これらを文章中に書くときは、"&lt;"と"&gt;"を使います。ということは&も特殊文字と言うことになります。これは"&amp;"と書きます。

 あるいは、文字コード(ASCIIコード)を使って次のように書くこともできます。ついでに、フランス語などに使われる文字も同じような方法で表現できます。

&#60;<
&#62;>
&&#26; (&が2つ必要なことに注意)&
a&#768;
a&#769;
a&#770;
a&#771;


複数の連続した空白

 ブラウザで表示されるとき、複数の連続した空白(TABも)は1個にまとめられてしまいます。これは、昔の回線速度が遅かった時の名残でしょうか。これを避けるには、preタグを使うか、&nbsp;を使います。

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6文字分字下げしました。

      6文字分字下げしました。

 ただ、全角空白は影響されないようです。(下の例は全角空白で字下げと複数空白を行っています)
     全角    空白

(注意)字下げは空白を挿入するのではなくて、スタイル(margin-left)を使うようにしましょう。そのほうが、複数行を一括字下げできます。

タグの属性

 タグは「属性」を持ちます。属性は形容詞みたいなものです。属性を追加したり変更したりすることにより、外観や特性を変更できます。属性は name="value" の形式で書きます。nameが属性名、valueが属性の値です。

 属性はタグの中で定義します。a タグはハイパーリンクを定義しますが、ジャンプ先はhref属性で定義します。(下のa タグの説明を参照してください)

HTMLのコメント

 コメントはHTMLソースを見やすくするために入れる文字列です。でも、これはブラウザには表示されません。あくまでHTML作成者が「この部分はこういう意味だよ」的に書いておく文言です。コメントは <-- 文字列 --> という形式です。

<-- これはコメントです。ブラウザには表示されません。 -->
 scriptタグやstyleタグの中のコメントは、それが正しいスクリプトなら解釈実行される可能性が高いです。これは、互換性維持のためのものです。昔のブラウザはスクリプトに対応していないものがあり、スクリプトを表示してしまうことがあったので、それを避けるためスクリプトをコメントとしていたためです。

HTMLの基本的タグ

 とりあえず以下のタグを知っていれば、HTMLが書けます。

html タグ

 htmlタグはHTMLの開始と終了をブラウザに知らせます。したがって、HTML文書は、<html>と</html>ではさまれている必要があります。

htmlタグの属性

属性説明
manifestドキュメントキャッシュの場所を指定する。(例) manifest="doc.ahtml"
xmlnsもし書くなら xmlns="http://www.w3.org/1999/xhtml" とする。

head タグ

 headタグは、HTMLの表示されない情報をブラウザに知らせます。例えば、文書のタイトル、文書の文字コード、スタイルシート、スクリプトなどです。以下のタグを含めることができます。headタグ固有の属性はHTML5ではありません。headタグの詳細はこちら。


body タグ

 bodyタグはHTML本体、つまりブラウザによって表示される文書の開始と終了をブラウザに知らせます。bodyタグ固有の属性はHTML5ではありません。bodyタグの詳細はこちら。


p (Paragraph)

 pタグは段落を作ります。具体的にいうと<p>と</p>で挟まれた文字列をグループ化します。段落の最後には改行が挿入されます。

<p>This is a paragraph</p>
<p>これは段落です。</p>

(注意) pタグ固有の属性はありません(HTML5)。


br (Break)

 brタグは改行を挿入します。

駆け付け3杯。<br />

(注意) brタグ固有の属性はありません(HTML5)。


a (Anchor)

 a タグはハイパーリンクを作成します。

<a href="http://www.yahoo.co.jp">Yahoo! Japan</a>

aタグの詳細 ...


h (Heading)

 h1, h2, h3, h4タグは表題を作ります。h1が最上位でh4が最下位です。

<h1>最上位の表題</h1>
<h2>2番目の表題</h2>
  ....
<h6>最下位の表題</h6>

(注意) hタグ固有の属性はありません(HTML5)。


img (Image)

 imgタグは画像を表示するのに使います。詳しくはimg タグのページ参照。

<img src="画像のURL" alt="画像が表示できなかったときの代替テキスト" />

hr (Horizontal)

 hrタグは水平線を描画します。

<hr />



(注意) hrタグ固有の属性はありません(HTML5)。水平線の色、幅、長さなどはスタイルで変更できます。

 

ページの先頭へ戻る