1 Minute HTML CSS Part 6 – Code Snippets & Symbols

Last Updated: January 26, 2024

CODE RELATED TAGS

<code>var a = "hello";</code>
<pre>var b = "world";</pre>
<samp>hello world</samp>
  • <code> A block of code. Extra white spaces and line breaks will be ignored.
  • <pre> Preformatted text. Extra white spaces and line breaks will be retained.
  • <samp> Sample output.

 

HTML SYMBOLS

  • HTML symbols are “special characters” in HTML.
  • For example – &lt; represents “lesser than” <, and &gt; represents “greater than” >.
  • Just do an “HTML symbols list” search online for the complete list.

 

CODE SNIPPETS

<pre><code>&lt;p&gt;
  &lt;strong&gt;Hello&lt;/strong&gt; world.
&lt;/p&gt;</code></pre>
  • The common way to display code snippets is to combine <pre><code>.
  • But if we put <strong>Hello</strong> inside, it will be confused as HTML code.
  • So to display code snippets properly, we turn the tags into HTML symbols first. That is – &lt;strong&gt; will display as <strong>.
  • In VSCode:
    • Highlight the code snippet.
    • Hit CONTROL-SHIFT-P (COMMAND-SHIFT-P on a Mac).
    • Convert to HTML entities.