HTMLの基本(タグの書き方と要素)

要素について

HTMLでの要素とは、HTML文書内で登場する様々な構成部品のことを指します。リンクを表すもの、画像を挿入するもの、段落、見出し…これらは全て要素の一つです。1つのHTMLにはこの要素を複数書くことができます。

要素とタグの関係

HTMLの文書の中にはこれらの要素が複数含まれるので、「どの部分からどの部分まで」が一つの要素なのか、明確に記述する必要があります。このことをマークアップと呼びます。このマークアップに使われるのがHTMLタグです。

HTMLタグの書き方について

タグには「開始タグ」と「終了タグ」と呼ばれるものがあります。どちらも同じ要素を表しますが、「開始タグ」と「終了タグ」は2つでセットです。先ほど述べたように、タグで「どの部分からどの部分まで」を表すために、通常は「開始タグ」で書き始めて、「終了タグ」で閉じるのが普通です。開始タグの書き方は「<p>」のように要素名をカッコでくくります。さらに、終了タグは「</p>」のように同じ要素名の前に「/」スラッシュをつけてカッコでくくります。

ただし、タグの中には終了タグが必要なかったり、省略できる要素もあります。例えば、画像タグの<img>改行タグ<br>などがそうです。

タグの記述例

見出しの例
<h1>見出しの文章</h1>

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

HTML内に記述する様々な要素は大きく分けて「ブロックレベル要素」と「インライン要素」に分かれます。同じ要素でも働きが異なります。具体的に説明します。

ブロックレベル要素の働き

ブロックレベル要素はHTML文書の骨格となる要素群です。例えば、見出しタグ<hx>(x=1~6)や段落タグ<p>がその一つです。ブロックレベル要素はWEBブラウザ上では長方形の形をした表示領域となります。また、多くのWEBブラウザではブロックレベル要素の後には改行が挿入され、スペースが空きます。(余白はスタイルシートで調節可能)

ブロックレベル要素は<body>内に直接記述することができます。また、1つのブロックレベル要素に異なるブロックレベル要素を挿入することができます。(要素によっては不可なものもある)さらに、ブロックレベル要素にインライン要素を挿入することも可能です。

ブロックレベル要素一覧
要素名 働き 要素名 働き
address 連絡先 blockquote 引用
center 中央揃え div 複数行グループ(汎用レベル要素)
dl 説明付き定義リスト fieldset フィールドセット
form 入力フォーム hx(x=1~6) 見出し
hr 水平線(区切り線) ol 番号付きリスト
p 段落 pre フォーマット済みテキスト
table 表(テーブル) ul 通常リスト

インライン要素の働き

インライン要素は、多くはブロックレベル要素の中身となるようなもので、ある特定の部分を重み付けしたり、文章の一部に動作を加えたりする際に使用します。例えば、強調タグ<strong>やリンクタグ<a>がその一つです。

インライン要素はブロックレベル要素とは異なり、表示領域を指定しません。中にはブロックレベル要素と同じように長方形の形をとるものもありますが、特に決まっているわけではありません。

インライン要素に別のインライン要素を含ませることはできますが、インライン要素にブロックレベル要素を入れることはできません。

インライン要素一覧
要素名 働き 要素名 働き
a リンク abbr 略語
acronym 略語(頭文字) applet Javaアプレット挿入
b 太字 big 大きめの文字
br 改行 cite 出典元
code プログラムコード dfn 定義
em 強調 font フォント
i 斜体 iframe インラインフレーム
kbd キーボード入力 label フォームラベル
object オブジェクト q 引用
s 取消線 samp サンプル(例)
small 小さめの文字 span 1行グループ(汎用インライン要素)
strike 取消線 strong 強い強調
sub 下付き文字 sup 上付文字
tt 等幅フォント u 下線
var 変数、引数(ひきすう)

置換要素と非置換要素

インライン要素はさらに置換要素と非置換要素に分かれます。インライン要素のほとんどは非置換要素です。非置換要素は開始タグと終了タグに囲まれた文字列に要素ごとの装飾が加えられて、表示されます。一方、置換要素は終了タグがないものもあり、開始タグと終了タグで囲まれた文字が表示されるのではなく、要素ごとの動作に置換されて表示されます。例えば、画像タグ<img>などがその例です。

置換要素一覧
要素名 働き 要素名 働き
img 画像(イメージ) input 入力フォーム
object オブジェクト挿入 select 複数項目選択スイッチ
textarea 複数行テキストフォーム

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

最新のHTML5を学ぶなら

参考情報

最新情報をチェックしよう!