1 Minute HTML CSS Part 6 – Code Snippets & Symbols

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 – < represents “lesser than” <, and > 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 – <strong> will display as <strong>.
• In VSCode:
  • Highlight the code snippet.
  • Hit CONTROL-SHIFT-P (COMMAND-SHIFT-P on a Mac).
  • Convert to HTML entities.