未知の苦HTML解道 つまず紀行! <ホームページ作成支援>














改行



段落









 HOME >> 実践HTML >> ブロックレベル要素1 >> 汎用 div要素

HTML文書は、テキスト内容を"見出し要素" "段落要素" "リスト要素" "リンク要素(ハイパーリンク)"などの"要素"とする考え方を基に、それぞれの要素をタグで囲む(マークアップにより書き表す)文書構造になっています。


■ブロックレベル要素とは・・・?

ひとつのブロック(まとまり)から構成される要素の名称です。
ブロックレベル要素の前後は、要素特性により、段落または改行されます。


ブロックレベル要素群(abc順)

<address> <blockquote> <center> <div> <dl> <fieldset> <form> <h1〜h6> <hr> <noframes> <noscript> <ol> <p> <pre> <table> <ul>

 ★ 汎用ブロックレベル要素 <div>タグ
 ★ div は 「Division」=分割、区分の略

<div>〜<div>タグは、HTMLの定義上、特定の意味はないようです。
<div>〜<div>タグで挟まれた前後は、要素特性により改行されます。

divタグ以外の各種ブロックレベル要素は、<要素>〜</要素>の中に、他の要素を組み込むことはできませんが、<div>〜<div>タグは可能です。

あらゆる要素を<div>〜<div>タグ内に格納できる万能なタグと言う位置付けから、divタグは汎用ブロックレベル要素と言われる由縁とも思われます。

div要素の構文にテキストの位置指定[align属性]:は、HTML4.01非推奨

>> スタイルシート推奨 >> 後述


●先ずはdiv要素との比較作例です。 p要素で記述した場合

未知の苦HTML解道

HTML・CSS・Javascript・CGIの覚え書きサイトです。


◇ソース表示
<p>未知の苦html解道</p>
<p>html・css・javascript・cgiの覚え書きサイトです。</p>
 

●p要素をdiv要素で記述した場合1

未知の苦HTML解道
HTML・CSS・Javascript・CGIの覚え書きサイトです。

◇ソース表示
<div>未知の苦html解道</div>
<div>html・css・javascript・cgiの覚え書きサイトです。</div>
 

●p要素をdiv要素で記述した場合 2
  ・・・段落を目的に改行要素<br>記述

未知の苦HTML解道

HTML・CSS・Javascript・CGIの覚え書きサイトです。

◇ソース表示
<div>未知の苦HTML解道</div>
<br>
<div>HTML・CSS・Javascript・CGIの覚え書きサイトです。</div>
 
 ● 応用 ・・・div要素とp要素に書き分けた場合
未知の苦HTML解道

HTML・CSS・Javascript・CGIの覚え書きサイトです。


◇ソース表示
<div>未知の苦HTML解道</div>
<p>HTML・CSS・Javascript・CGIの覚え書きサイトです。</p>

次のように記述しても同等の結果が得られます。

<div>未知の苦HTML解道
<p>HTML・CSS・Javascript・CGIの覚え書きサイトです。</p>
</div>

テキストの位置指定をする場合、[align属性]とそのの記述は、HTML定義「HTML4.01 Transitional」=非推奨要素属性のため、スタイルシートの設定を推奨しています。

HTML4.01非推奨要素属性

WEB for beginner 作成支援
 TOP | Reference | HTML非推奨要素・属性 >>
  非推奨とされる要素と属性 >> 非推奨とされる属性


 ■Ddivに挟まれたテキストの位置指定 [text-align属性]

div要素+スタイルシートを直接記述(インラインスタイル)の場合

左揃え style="text-align:left;"
センタリング style="text-align:center;"
右揃え style="text-align:right;"

左揃えの例
未知の苦HTML解道
HTML・CSS・Javascript・CGIの覚え書きサイトです。

センタリングの例
未知の苦HTML解道
HTML・CSS・Javascript・CGIの覚え書きサイトです。

右揃えの例
未知の苦HTML解道
HTML・CSS・Javascript・CGIの覚え書きサイトです。

※注:要素名とSTYLE属性の間に半角スペース必須
|←←←←←←←←←← 要 素 →→→→→→→→→→|
 ↓要素名 div  ↓要素内容   
<div style="text-align:center;">未知の苦HTML..</div>
    |←←←←属 性→→→→|  
  |←←← 値→→→→|  

段落要素pタグ内にtable要素、あるいは、見出し要素などを挟むと、文法違反になりますが、div要素内であれば問題ありません。


ノーグッドの例・・・"段落要素間に見出し要素"を挟んだタグの記述。

未知の苦HTML解道

HTML・CSS・Javascript・CGIの覚え書きサイトです。

 ××× 上の作例の場合、次のようなタグの記述は間違い ×××

<p>
<h4>未知の苦HTML解道</h4>
HTML・CSS・Javascript・CGIの覚え書きサイトです。
</p>

Another HTML-lintの文法検証では、次のように警告されます。

<h4>の前に</p>が省略されているとみなします。
<p>と</p>の間が空です。
</p>に対する開始タグ<p>が見つかりません。

 ○○○ div要素であれば問題ありません ○○○

未知の苦HTML解道

HTML・CSS・Javascript・CGIの覚え書きサイトです。

◇ソース表示

<div>
<h4>未知の苦HTML解道</h4>
HTML・CSS・Javascript・CGIの覚え書きサイトです。
</div>


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

The Web KANZAKI様 TOP | やや詳しい目次 |
 インターネットやコンピュータの話 | HTMLの説明  >>
 簡単なHTMLの説明 | 2文書の骨格となる基本要素 >>
 文書の骨格をかたちづくる基本要素 | ブロックとインライン
 >> ブロックレベル要素とインライン要素



  実用ツール

HTML文法検証
HTML文書の文法チェックと採点

CSS文法検証
W3C CSS 検証サービス

IT用語辞典
IT用語検索
<< Back | ホーム | ▲Page Top | Next 見出し h1〜h6
Base template by WEBMAGIC  Copyright © 未知の苦HTML解道, all right reserved, since 2004. 8.25