HTML文章を視覚化し、そのまま文章として表示する

  • 5
    Like
  • 4
    Comment
More than 1 year has passed since last update.

始めに

HTMLを説明するときに、HTMLのタグの存在を説明することは当然必要です。
そこで絶対に必要になることはHTMLタグを視覚化する、ということです。

例えば、以下のように普通にHTML文章を作成してしまうと、タグがマークアップ言語として認識されることで有効化されてしまい、文章の上で<h1>タグは見えなくなってしまいます。

test.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
    こんにちは、HTML!<br>
    <h1></h1>
</body>
</html>

実際にどうなっているか確認してみましょう。

スクリーンショット 2016-10-22 16.18.17.png

上はHTML文章を表示してみた図です。画像右側の白い画面では、タグではない普通の文章である「こんにちは、html!」が表示されているのに対して<h1>タグは表示されていないのが確認できますね。

それでは<h1>タグを始めとしたHTML文章を視覚化するためにはどうすればいいのでしょうか。

HTML文章を視覚化する方法

HTML文章を視覚化するためには、マークアップ記号を実体参照文字に置き換える必要があります。具体的に見ていきましょう。

test.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
    こんにちは、HTML!<br>
    &lt;h1&gt;&lt;/h1&gt;
</body>
</html>

それでは、改めて実際にはどう表示されるかを見てみましょう。

スクリーンショット 2016-10-22 16.17.31.png

<h1>タグが表示できていることがわかります!

それでは、この実体表示文字と表示される文字の対応表を見てみましょう。ある程度必要そうだと思われるものについて一覧にしたつもりです。

実体参照文字と表示される文字の対応表

表示させたい文字 打ち込むべき文字
< &lt;
> &gt;
&quot;
&apos;
& &amp;
半角スペース &nbsp;

しかし、一つ一つのタグをいちいち書き換えていてはキリがありません。これをすべて自動で変換してもらいたい!

自動で変換してくれるサイト

そんなサイトがありました。

HTML実体参照変換

こちらです。名前はそのままですね。

入力された文字列内の&、"、<、>を実体参照に変換します。変換はJavaScriptでおこなわれます。

とのこと。ここを用いることで一括で変換することができます!

おわりに

今回は、他人にHTMLを教えるためにタグを視覚化することが必要でした。この方法を知るまでにこちらのサイトを非常に参考にさせていただきました。
まとめて多くの文字を打ち込む際にはバッククオート(`)でくくってしまいコードとして表示させてもいいですが、一部を見える化したい時などはうまく実体表示文字を使ってみてください。