Top > IT > Web > HTML > OtherTips
Last-modified: Mon, 20 Jan 2014 00:09:25 JST
Counter:1920 Today:1 Yesterday:1 Online:3
このエントリーをはてなブックマークに追加

HTML に関する小ネタ

About

ここでは分類が難しい Tips についてまとめています。

定義されないタグ(要素)は出力されない

HTML を出力するための標準的なブラウザでは、HTML に定義されない要素を示すタグはテキストとして出力されません。定義されないタグ内に書かれたテキストのみが出力されます。次に例を挙げます。

<p>p 要素は HTML で定義され、ブラウザで認識されるタグです。
<hoge>HTML で定義されない、ブラウザで認識されないタグです。</hoge></p>

この出力結果はモダンブラウザ(2013.12)では次のようになります。

p 要素は HTML で定義され、ブラウザで認識されるタグです。
HTML で定義されない、ブラウザで認識されないタグです。

定義されていないもののタグはタグとして認識されるので、<hoge>はテキストとして出力されません。<hoge> から </hoge> の間に書かれたテキストのみが出力されます。

任意に書かれた改行コードについて

任意に書かれた改行コードの扱いは、書かれた場所によって異なります。例えば次のような場合があります。

※もちろんブラウザによる差異はあります。

次の例のように書かれた2つの h1 要素が出力する結果は、多くの場合に同じものです。 つまり、改行は無視されて、出力されません。これはフローコンテンツ(HTML4.xではブロックコンテンツ)に書かれた改行に共通の処理です。

<h1>1行目のテキスト
2行目のテキスト</h1>
<h1>1行目のテキスト2行目のテキスト</h1>

出力結果の見た目です。

1行目のテキスト2行目のテキスト
1行目のテキスト2行目のテキスト

一方でフレージングコンテンツ(HTML4.xではインラインコンテンツ)として書かれた改行は、改行が1つの半角スペースとして役割をもって出力されます。

<p>1行目のテキスト
2行目のテキスト</p>
<p>1行目のテキスト2行目のテキスト</p>

出力結果の見た目です。

1行目のテキスト 2行目のテキスト
1行目のテキスト2行目のテキスト

これは英語などの慣習にしたがったための実装と思われます。すなわち、英単語の区切りの間には半角スペースが必要なためです。例えば「this(改行)is」というようなテキストがあるとき、見た目上「this is」となる必要があるからです。

一部のブラウザでは半角英数字以外の間に挿入された改行は半角スペースとして表示されないようですが、2014年1月現在最新の、IE-v11, FireFox-v26.x, Chrome-v32.x, Safari-v5.1.x(win) では半角スペースが表示されるようでした。