<< Becky! ホットメール設定 | main | pulseaudio-equalizer >>
2018.04.05 Thursday

タグ:divとspanの違い

JUGEMテーマ:インターネット

 

<div>はブロック要素、CSSで幅(width)と高さ(height)の指定が可能。

<span>はインライン要素、CSSで<span>から</span>までの幅と高さを指定しても反映されません。

 

その他のインライン要素:<strong><img>

 

 

<div>は上下に改行が挿入され、空白は上下ともに入りません。

<p>は上下に改行、下に一行分の空白が挿入。

<spam>は上下に改行も空白も入りません。

 

 

<div>の中にはなんでも入れられます:

div、p、h1〜h6、ul、dl、ol、li、span、img、strong、em…など

 

<p>の中に入れることができるもの:

a、img、span、strong、em…など

 

h1〜h6タグの中に入れることができるもの:

span、img、strong、em…など

 

<ul><ol>の中に入れることができるもの:

li タグ

 

<li>の中に入れることができるもの:

div、h1〜h6、p、ul、dl、ol、li、span、img、strong、em…など

 

<span>の中には span、a、img が入れられます。

 

<dl>の中に入れることができるもの:

dt、dd タグ

 

<dt>の中に入れることができるもの:

a、img、span、strong、em…などのインライン要素。

見出し要素のhタグはブロックレベル要素なので入れられません。

 

<dd>の中に入れることができるもの:

div、h1〜h6、p、ul、dl、ol、li、span、img、strong、em…など

 

強調タグ<strong><em>はいずれもインライン要素 。

<strong><em>の中に入れることができるもの:

spanなどのインライン要素

 

<a>はインライン要素なので

spanなどのインライン要素 を入れることができます。

 

 

一般的な使い分けとしては、<p>は改行させたい場所に、

<div>と<span>は装飾したい場合によく用いられます。

 

改行用のタグとして<br>がありますが、このタグは推奨されていないため、

代わりに<p>で囲むことが一般的です。
 

しかし、<p>タグに属性を使うことは推奨されていませんので、

その場合は<div>や<span>を使う事になります。

全体に同じ装飾を施したい場合は<div>、

特定の文字だけ装飾したい場合は<span>を使うのが一般的です。

 

確認:インライン要素の中にブロック要素を入れ子にすることが出来ません。

<p>の中に<div>は入れません。

<span>の中に<div>は入れません。

 

<div><p><span>ほげほげ</span></p></div>

と記述。

 

 

<em><span>hoge</span></em>
<span><em>hoge</em></span>

<em><span>どちらもインライン要素なので
1)強調してから中身を書く
2)中身を書いてそこを強調
の違いだけで、どちらも使用可。

 

<em><a href="hoge">fuga</a></em>
<a href="hoge"><em>fuga</em></a>
であれば、強調されているのがリンク自体なのか

リンクテキストなのかの差が出てきますが、

文法的にどちらが間違いということは無い。

 

 

最近タグを組まなくなったら忘れてしまい、覚書でした。

参照:https://saruwakakun.com/html-css/basic/div-span

   https://matome.naver.jp/odai/2137515842633207101

 

HTML 4.01 ブロックレベル 要素一覧:

http://www.tagindex.com/html_tag/elements/block.html

HTML 4.01 インライン 要素一覧:

http://www.tagindex.com/html_tag/elements/inline.html

 

コメント
コメントする








 
この記事のトラックバックURL
トラックバック
Calendar
   1234
567891011
12131415161718
19202122232425
262728293031 
<< August 2018 >>
Selected Entries
Categories
Archives
Recent Comment
Recent Trackback
Recommend
Recommend
熊野 神と仏
熊野 神と仏 (JUGEMレビュー »)
植島啓司 九鬼家隆 田中利典
Links
Profile
Search this site.
Others
Mobile
qrcode