インライン要素

インライン要素とはブロック要素とは違い、body要素内に直接記述できません。

インライン要素はテキストを就職するための要素なので、img要素以外width属性とheight属性が存在しませんし、ブロック要素のように前後に改行が挿入されません。

a要素は説明するまでもありません。

勿論ハイパーリンクを作成するための要素です。

img要素は画像用の要素で、空要素です。

視覚系ブラウザではデフォルトでimgタグの位置に画像を挿入しますが、ファイルが存在しない場合はalt属性で指定されたテキストを表示します。

必須属性はaltとsrcで、alt属性には画像が表示できなかった場合などに代替テキストとなるような説明文を入れておきます。

src属性には表示したい画像のパスを記述します。

この要素はインライン要素なのですが、width属性とheight属性を持っています。

これはimg要素が置換インライン要素と呼ばれる特殊な要素のためで、heightとwidthで実際に表示される幅、高さを決めることが出来ます。

しかしこれらの要素にはピクセルを記述するようにし、パーセント表記はやめましょう。

<p>
<img src="item.png" width="32" height="32" alt="*">ほげほげ<br>
<img src="item.png" width="32" height="32" alt="*">ぴよぴよ<br>
</p>
<p>
<img src="grass.png" width="400" height="300" alt="草原">
</p>

em要素は強調用の要素で、strong要素よりも程度の低い強調を表します。

視覚系のブラウザではデフォルトでこの要素を斜体であらわしますが、英語では強調されている感じがしますが日本語では見にくいだけなので、CSSで太字に変更するか常にstrong要素を使用するようにしましょう。

<p>
文字を強調するための<em>em要素</em>ですが、
日本語を強調したい場合は向きません。
</p>

この例をブラウザで表示させると次のようになります。

strong要素も強調用の要素で、em要素よりも強い強調を表します。

視覚系のブラウザではデフォルトでこの要素を太字であらわします。

<p>
テキストを強調したい場合、
日本語なら普通<strong>strong要素</strong>を使用します。
</p>

この例をブラウザで表示させると次のようになります。

br要素は強制改行のための要素で、空要素です。

HTMLではpre要素などを除きソース内での改行が出力に反映されませんので、改行用にこういった要素が必要なのです。

強制改行用のタグだからと言って連続でこのタグを記述するのはやめましょう。

それは完全に見栄えに関する修飾なので、CSSでline-heightを使うなどして、brは連続で使用しないようにしましょう。

<p>
文章の途中でどうしても改行したい場合にbr要素を使用します。<br>
しかし意味の区切りでbr要素を使用しましょう。<br>
自分の環境でちょうどいい具合にbr要素を挿入すると
他の人の環境では悲惨なことになっています。<br>
出来る限りブラウザの自動改行機能を使用して、
br要素は必要最低限にとどめるべきです。
</p>

この例をブラウザで表示させると次のようになります。