HTML　改行「br要素」と改行可「wbr要素」

改行をします。<改行>
改行しました。また改行します。<改行>
改行をブラウザに任せます。<改行可>また改行を任せます。<改行可>改行をブラウザに任せました。

改行する「br要素」

HTML文章では、文の途中で改行しても、改行してくれません。そのまま続けて文が表示されます。
HTML文章で改行するには、「br要素」を使います。
 と書けば改行をしてくれます。

とても単純でわかりやすい要素なのですが、一つ他の要素と違うところがあるのに気付いたでしょうか？
「br要素」は<・・・>(開始タグ)で始まって</・・・>(終了タグ)で終わるという形ではありません。
「br要素」は だけで一つの要素になります。終了タグがないことを示す方法として、 という書き方もあります。

　ちなみに、「br要素」の「br」はline breakのbrで、改行という意味です。

改行してもよい「wbr要素」

ここで改行してもよいので、改行するかしないかははブラウザの判断にまかせる「wbr要素」という要素あります。
日本語では改行をしなくても勝手にブラウザが改行してくれますが、英語の場合、空白や-(ハイフン)などの区切り文字がないと勝手に改行されません。
と書けば改行してもよいということを示します。

この「wbr要素」もだけで一つの要素になります。
終了タグがないことを示す方法として、という書き方もあります。

　ちなみに、「wbr要素」の「wbr」はword breakの略で、単語を割る・分けるという意味にあります。

サンプル

今回説明した、「br要素」「wbr要素」を使用したサンプルを用意します。
このサンプルソースはbody要素内(<body>～</body>)に書いてください。

サンプルソースコード

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz<br>
ABC<br>DEFGH<br>IJK<br>LMN<br>OPQRSTU<br>VWXYZ<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<wbr>abcdefghijklmnopqrstuvwxyz<wbr>ABCDEFGHIJKLMNOPQRSTUVWXYZ<wbr>abcdefghijklmnopqrstuvwxyz<wbr>ABCDEFGHIJKLMNOPQRSTUVWXYZ<wbr>abcdefghijklmnopqrstuvwxyz<wbr>

表示結果

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
ABC
DEFGH
IJK
LMN
OPQRSTU
VWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

　※IE11では「wbr要素」がきちんと表示されません。以下画像はGoogle Chromeでの表示です。

「br要素」と「wbr要素」のまとめと次回記事について

　今回説明した「br要素」と「wbr要素」はいかがでしたでしょうか。
文章の見栄えをよくするために、「br要素」はよく使う要素でしょう。
「wbr要素」はあまり使わない要素かもしれません。

次回は、HTMLで「<」や「>」といった特殊な文字の表示の仕方を説明します。
以上、当サイト管理人のAsterismでした。

Think & Create