【初心者向け】HTMLタグを表示する簡単な方法

ITエンジニアとして勤務をしていると避けて通れないのが技術のアウトプット。職場のテックブログの記事執筆などで、ソースコードを公開する場が少なからずあるはずです。

ここで問題になるのが、HTML言語。ブログのシステム側で処理されている場合は別として、HTMLのソースコードをそのまま貼り付けても表示することはできません。何故なら、ソースコードに書かれたHTMLタグをブラウザが解釈して、表示処理を行ってしまうからです。

例えば、下記のようなソースコードを貼り付けるとします。

<section>
    <h1>ここは記事のタイトルです</h1>
    <p>ここには本文を記載します</p>
</section>

これをシステム側で処理を行っていないブログなどに貼り付ければ、ブラウザがHTMLタグを解釈して表示処理を行ってしまう為に下記のような表示になるはずです。

ここは記事タイトルです

ここには本文を記載します

これを回避する為に、特殊文字という概念が定義されています。

特殊文字用いたタグ表示

文字コードの違いなどにより表示できない一部の文字や、前述のようにタグの一部として処理されてしまいブラウザ上で非表示となる文字列を特殊文字と呼びます。

実際に特殊文字を用いてソースコードを表示してみましょう。

<section>
    <h1>ここは記事のタイトルです</h1>
    <p>ここには本文を記載します</p>
</section>

このソースコードを実際にブラウザを通してみてみると下記のようになります。

<section>

<h1>ここは記事のタイトルです</h1>

<p>ここには本文を記載します</p>

</section>

後述しますが、特殊文字に対応した文字列が定義がされていて、この文字列を記述することで特殊文字が表示されます。今回の場合はそれぞれの特殊文字を下記のような文字列に置き換えることでブラウザでも表示されるようにしました。

• < を < に変換
• > を > に変換

※ 厳密には文字実体参照と呼ばれる方法ですが、今回は初心者向けなので特殊文字の表示で用語を統一させていただきます。

特殊文字を表示するコード

上記の他にも様々な特殊文字があります。ここでは、よく使われる特殊文字と対応文字列の紹介をします。他にも様々な特殊文字がありますので、是非とも検索してみてください。

まとめ

HTMLのソースコードを表示するというテーマで特殊文字を紹介させていただきましたが、様々な場面で特殊文字を使う画面があると思います。どのような特殊文字があるのかを把握して、是非とも実務で役立ててください。