注目キーワード

HTMLタグをそのまま表示するためにpreタグとcodeタグを使用する

HTMLタグをそのまま表示するためにpreタグとcodeタグを使用する
  1. HOME
  2. HTML
  3. HTMLタグをそのまま表示するためにpreタグとcodeタグを使用する

HTMLタグをブラウザにそのまま表示したいときに、タグをHTMLファイルにそのまま記述したり貼り付けると、HTMLの開始タグと終了タグはHTMLタグとしての機能が働いてしまい表示ができません。

文字実体参照を使用することでHTMLタグをそのまま表示することができます。

そしてHTMLタグをそのまま表示するために役立つHTMLのpreタグとcodeタグを使用することでも、表示を「見やすく」「意味のある要素」としてHTMLタグをそのまま表示することができます。

 

目次

HTMLタグをそのまま表示する

 

<p>HTMLタグをそのまま表示しようと試みる</p>
<p>pタグでマークアップしたテキスト</p>

 

上のHTMLコードをそのままHTMLファイルに貼り付けて表示すると、テキストをマークアップしたpタグをブラウザがHTMLのタグとして認識をするため表示結果はテキストだけが表示されます。表示結果は以下の黒い背景内のテキストです。

 

      HTMLタグをそのまま表示しようと試みる
      pタグでマークアップしたテキスト

 

このとき小なり記号と大なり記号から成り立つHTMLのタグを「タグとして機能させるのではなく」HTMLタグをそのまま「文字列」として表示するには文字実体参照を使用します。

 

  • HTMLのタグで小なり記号は文字実体参照の「&lt;」
  • HTMLのタグで大なり記号は文字実体参照の「&gt;」

 

 

&lt;p&gt;HTMLタグをそのまま表示しようと試みる&lt;/p&gt;
&lt;p&gt;pタグでマークアップしたテキスト&lt;/p&gt;

 

Advertisement

 

文字実体参照の記述はHTMLの開始タグと終了タグを記述するのと同じように文字実体参照でタグ名(例えばp)を囲むことでHTMLタグをそのまま表示することができます。表示結果は次の画像です

 

 

これにより機能を持った文字、今回ならHTMLのタグとしての機能を成り立たせている特殊文字をブラウザは「単なる文字」として解釈し、そのまま表示します。

しかしHTMLタグをそのまま表示するときの文字実体参照を記述する作業が複数になった場合を考えると、途中で投げ出す未来をイメージするかもしれません。

そんなときはHTML特殊文字変換ツールでHTMLタグを文字実体参照に変換します。

 

 

HTML特殊文字変換ツール

 

上記のリンクでHTML特殊文字変換ツールのページを開くことができます。HTML特殊文字変換ツールは検索するとたくさん見つかるので、時間があるときにでも自分で使いやすいと思えたツールを使用してみてください。

 

HTMLのpreタグで整形済み表示にする

 

 

HTMLのタグで小なり記号を「&lt;」で、大なり記号を「&gt;」の文字実体参照で記述してHTMLのタグをそのまま表示させたただけの場合、改行やインデントされずに横並びで表示されてしまいコードが見づらくなってしまいます。

そこでHTMLタグをそのまま表示するために便利なHTMLのpreタグの出番です。

preは「Preformatted Text」の略で「整形済テキスト」という意味です。「整形済みのテキスト要素」として使用できるタグです。

 

<pre>
    &lt;p&gt;HTMLタグをそのまま表示しようと試みる&lt;/p&gt;
    &lt;p&gt;pタグでマークアップしたテキスト&lt;/p&gt;
</pre>

 

preタグの使い方は<pre>の開始タグと</pre>の終了タグの両方を記述したpre要素の中に、改行やインデントで整形したコードやテキストを記述します。

たとえば上のHTMLではpre要素内部の行頭に半角スペース4つ分を開けてHTMLのpタグをそのまま表示しています。

 

    <p>HTMLタグをそのまま表示しようと試みる</p>
    <p>pタグでマークアップしたテキスト</p>

 

表示結果は上のようにHTMLタグが複数行になったとしてもインデントや改行をしたままの状態で表示することができます。

 

Advertisement

 

smple
├── index.html
├── fonts
│ ├── test.ttf
│ └── test.woff
└── style.css

 

少し視点を変えたpreタグの使い方だとフォルダツリーにも使用することができます。

 

HTMLのcodeタグがコードを示す

 

HTMLの<code>タグについても理解しておくと、HTMLタグをそのまま表示させるためのタグとして役立ちます。

codeタグは「Computer Code」の略語です。

 

<code>
    &lt;p&gt;HTMLタグをそのまま表示しようと試みる&lt;/p&gt;
    &lt;p&gt;pタグでマークアップしたテキスト&lt;/p&gt;
</code>

 

HTMLのcodeタグの使い方は、開始タグの<code>と終了タグの</code>でマークアップしたcode要素内部にコードを記述します。

これにより、HTMLのcodeタグをマークアップした要素に記述したコードはfont-family: monospaceが適されて等幅フォントで表示されます。

また検索エンジンのクローラーがページ内のコンテンツを認識するときにcodeタグが目印になり「コードを記載している部分」だと示すことができます。

 

preとcodeでHTMLタグをそのまま表示

 

HTMLのpreタグとcodeタグの使い方を一つずつ説明してきましたが、最終的には2つのタグを組み合わせた要素を作成してHTMLタグをそのまま表示するための使い方にたどり着きます。

preとcodeを組み合わせてHTMLタグをそのまま表示する場合の使い方は<pre><code>…</code></pre>と記述します。<pre>タグの中に<code>タグを入れます。

 

<pre>
    <code>

この中にコードを記述する

    </code>
</pre>

 

これによりpreタグでマークアップした要素に文字実体参照を使用して記述したHTMLタグは、整形済みでそのまま表示することができますし、さらに、codeタグを目印にコードが書いてある部分なのをクローラーにも示すことができるのです。

ソースコードをそのまま表示するときの基本的な使い方ではありますが「整形済みの表示形式」と「コードが書いてあるのを示す」ことを「組み合わせた」いい感じの使い方です。

HTMLカテゴリの最新記事