spanタグとdivタグの基本

今回は、『<span>タグと<div>タグ』の基本について解説します。

<span>タグ、<div>タグの両方ともタグそのものに深い意味はありません。

<span>あいうえお</span>

と書いても色がついたり、文字のサイズが変わったりするわけではありません。
<span>タグに属性をつけては始めて意味があるものになります。

ご参考　⇒　文字に背景色をつける

<span>タグは「範囲」を指定するものと覚えておくといいと思います。
一方で、<div>タグは「グループ」を指定するものと覚えておくとよいでしょう。

また、

<span>タグはインラインのタグ

<div>タグはブロックレベルのタグ

と呼ばれています。

【インラインのタグ】　
<a>　リンク
<img>　画像
<span>　範囲

【ブロックレベルのタグ】
<div>　グループ
<h1～h6>　見出し
<table>　表
<p>　段落
<ul>　リスト

あまり深く意味を考えずに、約束事として「インラインのタグは必ずブロックレベルのタグの内側に記述する」ということだけ覚えておけば十分です。

例としてインラインの<a>タグとブロックレベルの<p>タグを使用して説明します。

誤り　×　<a href="http://Blogger.com/"><p>Blogger</p></a>は好きなブログサービスです。

正しい　○　<p><a href="http://Blogger.com/">Blogger</a>は好きなブログサービスです。</p>

×の方はインラインがブロックレベルの外側になってしまっています。
○の方はインラインがブロックレベルの内側にきちんと収まっています。

このように必ずインラインのタグをブロックレベルのタグの内側に記述しましょう。

スポンサードリンク