A.T-MOON

contents

パンくずリスト

HTMLタグとは

HTMLとは

HyperText Markup Language≠フ略で、Web作成になくてはならない言語です。
タグを使用する事でパソコンが情報を読み取れるようになり、作成したWebを表示することが出来るようになります。
まずはこのHTMLタグを使ってサイトの基礎を作り、表示してみましょう。

HTMLの基礎構造

┌───────── 要素 ─────────┐
<font color="red"> ココに文字や文章 </font>
要素名
└--属性--┘ └─要素内容─┘
└───開始タグ───┘ 終了タグ

これがHTML文書の基本的な構造です。
属性や値によって定義されるひとつのかたまりを要素といい、要素の内容ごとに表示されます。
<○○○>の部分をタグといいます。
開始タグ終了タグにはさまれた部分に要素内容を記述し、それがブラウザに表示されるという形が一般的です。
上記の場合初めのfont要素名color="○○"属性、属性の中の"red"の部分ががです。

HTML文書で使われるタグや属性は大文字小文字を区別しません。どちらで記述してもかまいません。
ただしURLやJavaScript、スクリプト名や文字コードなどは大文字小文字を区別しますので注意してください。
当サイトではXHTMLへの移行を考慮し、全て小文字で記述していきます。
(XHTMLではタグ、属性、値は全て小文字で記述するよう定義されています。)

色々な要素名があり、それに伴う属性も色々です。
それぞれの組み合わせにより、ひとつの要素ができあがります。
どんな要素があるのか、どんな属性があるのかを見てみましょう。
ページTOP
ひとつ前のページに戻る

HTMLのツリー構造と親要素・子要素

<html>
 <head>
 ┃┗<title>
 <body>
    <h1>
    <ul>
    ┃┗<li>
    <h2>
    <p>
      <strong>

<html>タグの下位に<head>タグ<body>タグがあり
<body>タグの下位には文章の内容に応じてツリー構造が展開されます。
このツリー構造において、1つ上の階層にある要素を親要素といいます。
逆に親要素から見てその階層下にある要素を子要素といいます。
さらにその子要素(子孫)とツリー構造が展開していきます。

ブロックレベル要素とインラインレベル要素

要素を大きくわけるとブロックレベル要素インライン要素に分けることができます。
それぞれに決まりがありブロックレベル要素の中にブロックレベル要素インライン要素を含むことはできますが
インライン要素の中にブロックレベル要素を含むことは出来ません。
また、スタイルシートとの関連もあり、適用されるもの、されないものなどがあります。
より正確に文書を記述したいのならば、それぞれの要素についても理解しておくことが大切です。

ブロックレベル要素…見出しや段落など、ひとつのまとまりを構成する要素。前後には自動的に改行がはいります。
address blockquote center dir div dl fieldset h1〜h6 hr isindex menu noframes 
ol p(インラインのみ含める) pre table ul


インライン要素…文字と同じレベルで扱われる要素。前後に改行ははいりません。
a abbr acronym applet b basefont bdo big br button cite code em img span strong sub sup 
textarea tt u var


別扱いになる要素…スタイルシートでは別扱いになる要素。
テーブル要素…<table>タグ
セル要素…<th>タグ
キャプション要素…<caption>タグ
リストアイテム要素…<li>タグ(リスト項目の一つ一つの事)
ページTOP
ひとつ前のページに戻る


汎用的な属性

HTML4.01では、要素に対して使用できる汎用的な属性が定義されています。

id属性 …要素に名前をつけます。同一文書内で同じ名前を使用できません。
スタイルシートのセレクタやスクリプトからの参照先、オブジェクトの指定やリンクの指定などに使われます。

class属性 …要素に名前をつけます。idと異なり同一文書内で複数の要素に対し同じ名前を使用できます。
スペースで区切ることによりひとつの要素に対して複数の名前を指定することもできます。
スタイルシートのセレクタなどに使われます。

dir属性 …要素内容を表示する方向を指定。左から表示の場合はltr、右から表示の場合はrtlとなります。

lang属性 …言語コードの指定。日本語の場合はlang="ja"、英語の場合はlang="en"のように記述します。

style属性 …要素に対するスタイル情報を直接記述します。詳しくはスタイルシートの章を参照下さい。

title属性 …要素の情報を表示させます。一般的にはツールチップの形で表示されます。
ページTOP
ひとつ前のページに戻る
HTMLタグindex HTMLタグの基本@