span要素やdiv要素は意味をもたない要素であるが、どんな違いがあるのか、復習がてらまとめてみました。
この２つは実務上ではcssで装飾したいときなどに使われます。そしてclass属性をつけることができます。class属性とはその要素が所属するグループ名のことで自由につけることができます。
まず例として
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>これはテスト</title>
<style>
.red{
color: red;
}
.blue{
color: blue;
}
</style>
</head>
<body>
<p>私はただいま<span class ="red">html</span>と<span class ="blue">css</span>を学習中です</p>
</body>
</html>
結果
このようにclass属性を定義してcssで色をつけることができます。
ではdivとの違いは何かというとまず１つ目は改行がされるかどうか、ということです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>これはテスト</title>
</head>
<body>
これは<div>div</div>要素です
<hr>
これは<span>span</span>要素です
</body>
</html>
このようにdiv要素は改行されますが、span要素は改行されません。
もう１つはdivの中にspanは書けますが、spanの中にdivは書けないので注意です。
OK
<div><span>テスト</span></div>
NO
<span><div>テスト</div></span>
まとめると
div要素とspan要素はどちらも意味をもたない要素
div要素は改行されるがspan要素は改行されない
div要素は中にspan要素を書けるがspan要素の中にdiv要素は書けない