ブロックレベルとインライン

html4.01strictでは要素はブロックレベルとインラインに大別できます。

<!--================== HTML content models ===============================-->

<!--
    HTML has two basic content models:

        %inline;     character level elements and text strings
        %block;      block-like elements e.g. paragraphs and lists
-->

<!ENTITY % block
     "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
      BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">

<!ENTITY % flow "%block; | %inline;">

ブロックレベル要素

p,h1,h2,h3,h4,h5,h6,ul,ol,pre,dl,div,noscript,blockquote,form,hr,table,fieldset,address

ブロックレベルは段落やリストなどのようなものです。

内容の幅にかかわらず端まで確保されます。
内容に幅や高さを指定することができます。
また、ブロックレベルはその前後で行が変わり縦に並んでいきます。

端まで幅が確保されます。ここは段落であるp要素です。わかりやすいように背景色とボーダーを指定しています。

幅と高さを指定できます。ここは段落であるp要素です。わかりやすいように背景色とボーダーを指定しています。

改行されて縦に並びます。ここは段落であるp要素です。わかりやすいように背景色とボーダーを指定しています。

<!ENTITY % block
     "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
      BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">

<!ENTITY % heading "H1|H2|H3|H4|H5|H6">

<!ENTITY % list "UL | OL">

<!ENTITY % preformatted "PRE">

インライン要素

tt,i,b,big,small,em,strong,dfn,code,samp,kbd,var,cite,abbr,acronym,
a,img,object,br,script,map,q,sub,sup,span,bdo,input,select,textarea,label,button
文字列

ブロックレベルの要素として使用されるものでbodyの直下の要素としては使用できません。


		<p><a href="http://yahoo.co.jp">ヤフージャパン</a></p>

a要素はインラインなのでp要素などの中に入れます。

改行を伴わないので横に並びます。


		<p>

		<a href="http://yahoo.co.jp">ヤフージャパン</a>,

		<a href="http://msn.co.jp">MSN</a>,

		<a href="http://google.co.jp">グーグル</a>

		</p>

ヤフージャパン,MSN,グーグル

幅と高さ上下のマージンを指定しても無視されます。

ただしimgやinputなどのようにテキスト（文字）以外のものが表示される置換インラインと呼ばれるものがありブロックレベルと同じように幅と高さ上下マージンを指定できるものもあります。

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

<!ENTITY % fontstyle
 "TT | I | B | BIG | SMALL">

<!ENTITY % phrase "EM | STRONG | DFN | CODE |
                   SAMP | KBD | VAR | CITE | ABBR | ACRONYM" >

<!ENTITY % special
   "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">

<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">

insとdel

ins要素とdel要素は文章を追加したり削除したりしたことを表すものでその部分がインラインならインラインとしてブロックレベルなブロックレベルとして扱われる特別な要素です。

<!ELEMENT (INS|DEL) - - (%flow;)*      -- inserted text, deleted text -->
<!ATTLIST (INS|DEL)
  %attrs;                              -- %coreattrs, %i18n, %events --
  cite        %URI;          #IMPLIED  -- info on reason for change --
  datetime    %Datetime;     #IMPLIED  -- date and time of change --
  >	
<!ENTITY % flow "%block; | %inline;">