HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLの予約文字をエスケープしてコードを正しく表示する方法

HTMLコードの構文を、ブラウザに本物のマークアップとして解釈・描画させずにそのまま表示したい場合は、あらかじめ予約文字をエスケープしておく必要があります。

なぜエスケープが必要なのか

まずは、下記の<code></code>要素の中にある<h1>タグに注目してみましょう。

<p>記事で使用できるのは1つの<code><h1></code>要素だけです。</p>

このコードをHTMLドキュメントにそのまま記述すると、<h1>は本物のマークアップとして解釈され、実際に見出しとして描画されてしまいます。コードを見せたいだけなのに、これでは意図した表示になりません。

この問題を避けるには、h1を囲んでいる山括弧 < と > をエスケープします。これらはHTMLにおける予約文字だからです。

幸い、エスケープの方法はとても簡単です。

  • < を &lt; に置き換える
  • > を &gt; に置き換える

エスケープの実例

<p>記事で使用できるのは1つの<code>&lt;h1&gt;</code>要素だけです。</p>

上記のように記述することで、コードは次のように正しく表示されます。

記事で使用できるのは1つの<h1>要素だけです。

class属性を含むHTMLコードのエスケープ

続いて、class属性を持つHTMLコード、たとえば <p class="lead-paragraph"></p> をエスケープしてみましょう。

  • < を &lt; に置き換える
  • > を &gt; に置き換える
  • " を &quot; に置き換える

エスケープ後のHTMLは以下のようになります。

&lt;p class=&quot;lead-paragraph&quot;&gt;&lt;/p&gt;
  1. SeleniumでWebElementのHTMLコード（innerHTML）を取得する方法を解説

    Selenium WebDriverを使えば、Webページ上の任意の要素（WebElement）のHTMLコードを簡単に取得できます。その鍵となるのが、要素のinnerHTML属性です。 innerHTMLとは、要素の開始タグと終了タグの間に存在するコンテンツ（HTMLソース）を指す属性です。この値を取得するには、getAttributeメソッドを使用し、引数として「innerHTML」を渡します。 構文 String s = element.getAttribute(innerHTML); 例として、次のようなHTML要素を考えてみましょう。 <h4>You are browsi

  2. MacでC#を学ぶ方法｜環境構築から基本構文まで完全ガイド

    C#（シー・シャープ）は、MacとPCの両方で動作する優れたプログラミング言語です。開発者の間では、特にWindows環境を中心に、さまざまなソフトウェアアプリケーションの構築に広く利用されています。 本記事では、Macユーザー向けにC#の入門ガイドをご紹介します。Macへの開発環境のセットアップ方法、プロジェクトの始め方、C#の基本構文、そしてなぜこの言語を選ぶべきなのかを解説します。さらに、より深く学べるおすすめのオンラインリソースも併せてご紹介します。 プログラミングに興味があるなら嬉しいお知らせです。当サイトには、Macでのコーディングに関する記事（PythonやSQLなど）や、アプリ