気の向くままに辿るIT/ICT/IoT
webzoit.net
HTML/XHTMLタグ・要素・属性・属性値

DIV/SPAN htmlタグ・要素/区画・区分・範囲内セレクタ設定

ウェブ造ホーム前へ次へ
サイト内検索
カスタム検索
DIV/SPAN タグ・要素とは?

DIV/SPAN htmlタグ・要素

DIV/SPANタグ・要素とは

 divタグはブロックレベル要素で区分・区画を表すdivisionの略、spanタグは範囲を表すインライン要素でグループ化する為に利用し、W3C仕様上は、id属性、class属性の指定がその主な用途とされ、後述のその他の属性も利用できますが、「それ以外の表示上の特別な意味は定義されていない」とあります。

 ただ、divタグは、ブロックレベル要素である為、<div></div>で括られたブロックは見た目上、前後で改行されます。

 この点はW3C仕様上にも同じブロックレベル要素であるpタグとdivタグを使った文節の例が示されていますが、段落用途のpタグが次行との行間が広くなるのに比し、<div></div>タグの前後は、行間が詰められた状態になります。

 前述のようにid、class属性以外について特別な意味は定義されていないのですが、ブラウザの挙動として一般にはこのようになると記されています。

要素 意味 用途 使用例
div division 区分・区画 装飾設定や言語指定に利用 <div></div>
span span 範囲 装飾設定や言語指定に利用 <span></span>

各要素・タグの属性

 divタグでW3C非推奨となっているタグは下記の通りです。

非推奨
属性 意味 用途
align align/alignment 位置指定/設定値:left | center | right | justify 

 divタグ、spanタグに設定可能な属性は下記の通りです。

属性 意味 用途
id identify タグ識別子・参照設定(セレクタ)
class class 参照設定(セレクタ)
lang language 国・地域言語を設定
dir direction 右書き・左書きの方向指定
title title ブラウザ上でタグをポイントすると表示されるテキストを設定
style style CSSインライン設定用
イベント イベントハンドル (マウス)ポインタの動作や状態に応じて処理を記述するための設定

id

 idはファイル内での一意の識別子(唯一特定できる値で区別できるもの)としての役割を持ちます。

等々です。

class

 classは、idと異なり、同じファイル内で(aタグを含む)複数のタグに同じ名称を設定することが可能です。

 また、idの値が一意という条件が満たされれば、同じタグ内に別途classを設定することも可能です。

 主な用途は

です。

id と class

 id と class は、両方設定することも可能ですし、異なる属性値を設定することもできます(idはそのページで一意でなければならないので複数設定する場合はそれぞれの属性値が他にないものにする必要あり)。

 id と class をCSSのセレクタとして見た場合、id は class の設定より優先されます。

lang

 langは、[ lang="en" ]、[ lang="ja" ]のように国や地域の言語を設定することができます。

dir

 dirは、direction(方向)の略で右から左に向かって書く右書き(right to left)か左から右に向かって書く左書き(left to right)の記述書式の方向指定で国際化における指定可能属性です。

 dirの属性値は、right to leftの略語、[ rtl ]か、left to rightの略語[ ltr ]です。

title

 titleは、ブラウザ上でポイントされた場合に、titleに設定された属性値が表示されます。

style

 styleは、CSSのインライン設定を行うことができる属性です。

イベント

 HTMLではユーザーの操作によって何らかの処理を行いたい場合にそのタイミングにあたる属性がいくつか用意されています。

 こうしたタイミングにあたる属性はイベントハンドル、イベントハンドラなどと呼ばれ、JavaScriptやvbscriptの関数等を設定することができます。

 詳細は、イベントハンドル・イベントハンドラ参照。

各種HTMLとHTMLタグ/要素・属性・属性値

ウェブ造ホーム前へ次へ