ブロックレベル要素が、見出し / 段落 / リスト / 表など文章を構造化する基本要素だったのに対し、インラインレベル要素はアンカー / 強調等の文章（テキスト）そのものに意味付けをします。

インラインレベル要素は、必ずブロックレベル要素内に記述しなければならず、CSSで指定しないかぎり前後に改行は入りません。

インラインレベル要素

アルファベット順 A

a abbr acronym applet

アルファベット順 B

b basefont bdo big br button

アルファベット順 C

cite code

アルファベット順 D

del dfn

アルファベット順 E

em

アルファベット順 F

font

アルファベット順 G

アルファベット順 I

i iframe img input ins

アルファベット順 K

kbd

アルファベット順 L

label

アルファベット順 M

map

アルファベット順 O

object

アルファベット順 Q

q

アルファベット順 R

rb rbc rp rt rtc ruby

アルファベット順 S

s samp script select small span strike strong sub sup

アルファベット順 T

textarea tt

アルファベット順 U

u

アルファベット順 V

var

ol要素内に<li>項目</li>として項目を記述します。また、ol要素の中にul要素等を記述する事も可能。

下記はol要素の指定サンプルです。

<ol>
<li>サンプル項目</li>
<li>サンプル項目</li>
<li>サンプル項目</li>
</o>

<ol>
<li>サンプル項目
<ul>
<li>サンプル項目</li>
<li>サンプル項目</li>
<li>サンプル項目</li>
</ul>
</li>
<li>サンプル項目</li>
<li>サンプル項目</li>
</ol>

li要素

<li>要素の中には、ブロックレベル要素、インラインレベル要素、テキストを記述できます。

ul要素内に<li>項目</li>として項目を記述します。また、ul要素の中にul要素等を記述する事も可能。

下記はul要素の指定サンプルです。

<ul>
<li>サンプル項目</li>
<li>サンプル項目</li>
<li>サンプル項目</li>
</ul>

<ul>
<li>サンプル項目
<ul>
<li>サンプル項目</li>
<li>サンプル項目</li>
<li>サンプル項目</li>
</ul>
</li>
<li>サンプル項目</li>
<li>サンプル項目</li>
</ul>

li要素

<li>要素の中には、ブロックレベル要素、インラインレベル要素、テキストを記述できます。

dｌ要素内に<dt>定義する語句(項目)</dt>と<dd>語句の定義（説明）</dd>を記述します。

下記はdｌ要素の指定サンプルです。

<dl>
<dt>項目</dt>
<dd>説明</dd>
<dt>項目</dt>
<dd>説明</dd>
</dl>

<dl>
<dt>項目</dt>
<dd>説明</dd>
<dd>説明</dd>
</dl>

dt要素

dt要素内には、インラインレベル要素とテキストが記述できます。

dd要素

dd要素内には、ブロックレベル要素とインラインレベル要素とテキストが記述できます。

pre要素の中に記述できるのは、インラインレベル要素とテキストです。

また、pre要素内に記述されたデータは半角スペースや改行など入力通りに表示されます。

pre要素に記述できない要素

applet / basefont / big / font / img / object / small / sub / sup

p要素の中に記述できるのは、インラインレベル要素とテキストです。

文章の段落を構成する際、<br />タグを使いますが、、<br />は必要な個所だけ指定するように心がけましょう。

h1,h2,h3,h4,h5,h6まであり、重要度はh1が最も重く、以下h2,h3となります。

文書構造的に以下のような指定例は好ましくありません。

<h1>見出しレベル1</h1>
<p>文章文章文章文章文章</p>
<h3>見出しレベル3</h3>
<p>文章文章文章文章文章</p>
<p>文章文章文章文章文章</p>
<h2>見出しレベル2</h2>
<p>文章文章文章文章文章</p>
<p>文章文章文章文章文章</p>

また、(X)HTMLの構造的に、サイドバー内に<h2>見出しレベル2</h2>等を指定する際は、サイドバーがコンテンツ（本文）より先に記述される構造にするべきです。

addressの中に記述できるのはインラインレベル要素とテキストです。

address要素のデフォルト表示は下記サンプルのように傾いています。通常スタイルに戻す場合は、CSSでfont-style: normal;を指定します。

<address>制作者:ウェブマジック  E-mail：info@*****</address>

fieldset要素は必ず見出しを意味する legend要素ではじまらなければならず、legend要素の前には半角スペースや水平タブなどの空白類文字しか許されません。

fieldsetの中に記述できるのはブロックレベル要素、インラインレベル要素です。

<fieldset>
<legend>グループ</legend>
*****内容*****
</fieldset>

<fieldset>
<legend>グループ</legend>
*****内容*****
</fieldset>

div要素の中には、ブロックレベル要素、インラインレベル要素、テキストが記述できますが、文書構造を考えると、div要素の中に直接テキストを記述するのはあまり好ましくありません。

好ましくない例：
<div>
サンプルサンプルサンプルサンプル。
</div>

良い例：
<div>
<p>サンプルサンプルサンプルサンプル。</p>
</div>

或いは、単に文章だけなら適切なマーウアップは<p>です。

良い例：
<p>サンプルサンプルサンプルサンプル。</p>

尚、上記サンプルの「好ましくない例」をAnother HTML-lint gatewayでチェックしても、減点にはなりませんが、正しい文書構造的に考えれば明らかに良くない記述です。

。

以下の宣言では、テキストやインライン要素を直接form要素の中に記述できません。必ずブロック要素を記述します。

• HTML4.01 strict
• XHTML1.0 strict
• XHTML1.1

インライン要素が記述できるのはTransitional。

<form action=" " method="post">
<p><input type="text" name="email" size="80" /></p>
</form>

以下の宣言では、テキストやインライン要素を直接 blockquote要素の中に記述できません。必ずブロック要素を記述します。

• HTML4.01 strict
• XHTML1.0 strict
• XHTML1.1

インライン要素が記述できるのはTransitional。

引用元のURLは<cite>を利用して下記のように記述します。

<blockquote cite="URL">

見出し / 段落 / リスト / 表など文章を構造化する基本要素です。ブロックレベル要素はCSSで幅を指定しなければ、ブラウザの画面いっぱいに広がり、一つの段落(ブロック)を構成します。

ブロックレベル要素は要素の中に、ブロックレベル要素とインラインレベル要素の両方を持つ事ができます(記述できます)が、P要素などインラインレベル要素しか記述できないものもあります。

ブロックレベル要素

要素内にブロックレベル要素だけ記述できる

blockquote要素

form要素

要素内にブロックレベル/インラインレベル要素を記述できる

div要素

fieldset要素

要素内にインラインレベル要素だけ記述できる

address要素

h要素

p要素

pre要素

要素内に特定要素だけ記述できる

dl要素

table要素

ol要素

ul要素

Transitionalで記述していても、非推奨要素などを使用せず、正しい記述に沿って(X)HTMLを記述するのであれば、それは立派な厳密型です。

HTMLでは一部のタグで終了タグの省略が可能でしたが、XHTMLではどの要素も必ず最後は終了タグで閉じます。

HTML
<ul>
<li>サンプル
<li>サンプル
</ul>

XHTML
<ul>
<li>サンプル</li>
<li>サンプル</li>
</ul>

また、<br>などの空要素は<br />と半角スペースとスラッシュを追加します。

head要素内に記述するmeta情報やlink情報も半角スペースとスラッシュで閉じます。

<meta http-equiv=”Content-Style-Type” content=”text/css” />

<meta name=”keywords” content=”***” />

<rel=”stylesheet” href=”***.css” type=”text/css” media=”screen” />

小文字で記述

HTMLでは大文字と小文字の区別はありませんでしたが、XHTMLでは小文字で記述します。(大文字と小文字を区別します。)

HTML
<P>***********</P>

XHTML
<p>***********</p>

属性値

HTMLでは省略が可能な属性値もXHTMLでは省略する事は出来ません。「属性=”属性値”」形式で記述しなければいけません。

XHTML
<input type="radio" checked="checked">

引用符

XHTMLでは全ての属性値を必ずダブルクォーテーション（”）、もしくはシングルクォーテーション（’）の引用符でくくらなければなりません。

表示モードとは、それぞれの互換性を重視した後方互換モードと、W3Cの仕様を重視した標準準拠モードです。ウェブサイト制作者が仕様に準拠して正しい書式に沿った文書を作成していれば何も問題はありませんが、ウェブ技術の進歩に未対応の場合や、一部問題のある記述をしている制作者もいる為に、文書型定義（DTD）に応じて表示モードを自動的に切り替えてしまう機能が備わっています。

DOCTYPEによる解釈の違い

DOCTYPEによる解釈の違いはさまざまありますが、以下はレイアウト崩れ関係する部分です。

• paddingの解釈
• borderの解釈

サンプルソース
#sample{
width: 200px;
margin: 0;
padding: 0 10px;
border: 1px solid #cccccc;
}

上記ソースの場合、後方互換モードの解釈は200pxですが、標準準拠モードでは222pxとなります。つまり、標準準拠モードではpaddingとborderはwidthに含まないと解釈されます。

Internet Explorerでは上手く表示できたのに、Firefoxではレイアウトが崩れた,,,,というのは、これが原因の一端です。

関連情報：CSSレイアウト崩れの原因について

(css)margn-right:auto;

margin-left:auto;