【HTML】< と > の意味、略称の正式名称、違いと覚え方、属性値での利用

「&lt;」と「&gt;」はそれぞれHTML文書で「<」「>」文字を表すための記法です。HTMLタグに使われる記号と文章内で使われる不等号を区別するために使われます。

実体参照文字意味正式名称（元の意味）
&lt;<小なりless-than sign
&gt;>大なりgreater-than sign

「&lt;」は「<（小なり）」文字を表すもので、ltは「less than」の略です。「&gt;」は「>（大なり）」文字を表すもので、gtは「greater than」の略です。

本来、<, >はHTMLの特殊文字という扱いとなっているため、ブラウザ上でそのまま表示させることができません。そのため、これらの不等号を文章内で扱う場合には&lt;, &gt;による文字実体参照（実体参照）を用いる必要があります。

なお、<, >は数値文字参照（数値参照、文字参照）として10進数表記の&#60;, &#62;や16進数表記の&#x003C;, &#x003E;という形式で表される場合もあります。

目次

目的

&lt;と&gt;による文字実体参照は<body></body>等のHTMLタグを表現する際に使われている記号<、>と、コンテンツ内の不等号との区別を行うために活用されます。

HTML要素内のコンテンツに素の<文字を用いてしまうと、続く文字がHTML要素の開始タグや終了タグとして解釈されてしまう恐れがあるためです。

<div>  A>B  </div>
<div>  A<B  </div>
<div>  A=A  </div>

上記のHTMLコードはウェブブラウザ上では以下のように表示されることになります。<Bが太字を表す<b>タグとして解釈されてしまうためです。

表示内容

A>B
A
A=A

ブラウザ側の解釈

<div>  A&gt;B  </div>
<div>  A<B>
          <div>  A=A  </div>
        </B>
</div>

そのため、HTML文書内で不等号を表現する際には&lt;と&gt;による記述が必要となります。

<div> A&gt;B  </div>
<div> A&lt;B  </div>

HTML文章の表示がおかしくなってしまう場合や、表示されるべきものが表示されない問題に遭遇してしまった場合には、この<文字の誤用を疑ってみると良いでしょう。

属性値では「&lt;&gt;」と「<>」どちらを使うべきか

HTML要素のコンテンツ内で>を表現する際には&gt;を用いますが、<input value="属性値">等の属性値側で>を表現する際にも&gt;を用いることをオススメします。古いブラウザでは"で囲われた>がHTMLタグの終端を表す記号として解釈される恐れがあるためです。この問題はHTMLインジェクションの脆弱性を引き起こす危険性があります。

HTMLの標準規格（HTML4.01）でも"で囲われた>は&gt;で表現するよう記述されています。なお<記号については、一貫性の観点から&gt;と同様に&lt;を用いることをオススメします。

以下のサンプルはいずれも内部値は共通であり、その値は"<>"となります。

<input type="text" value="<>" />
<input type="text" value="&lt;&gt;" />

<script>
  document.querySelectorAll('input')[1].value === '<>'; // true
</script>

覚え方

&lt;と&gt;はそれぞれless thanとgreater thanから取った略であるため、両単語の意味で覚えるのが適切です。greaterは「大きい」を意味する英単語で、lessは「小さい、少ない」を意味する英単語です。

「A is greater than B」と書けば「A は B より大きい」となり「A > B」を意味することになります。

A is greater than BA > B
A は B より大きいA 大なり B

ちなみに、&lt;のlをLeft（左）のLと誤釈し、左側の記号<と結びつけるような覚え方もあります。

おすすめの記事

昇順と降順の違いと覚え方、順序イメージ【asc, desc】

広告