Mastering HTML Code Formatting

Introduction

In web development, we sometimes need to display programming-related or computer-related content on our web pages. When we want to show specific terms like some function name or any variable name, we can use the <code> tag to enclose them. This tag changes the font family for the enclosed text to a monospaced font such as courier.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70725{{"`HTML Computer Code`"}} html/para_br -.-> lab-70725{{"`HTML Computer Code`"}} html/inter_elems -.-> lab-70725{{"`HTML Computer Code`"}} end

Add the Code Tag

First, create an index.html file in your local system and open it using a code editor of your choice.

Next, let's add the <code> tag to your HTML file. The syntax for this tag is straightforward. It has a start and an end tag enclosing the text you want to display.

<body>
  <!-- Add the code tag -->
  <p>This is an example of using the <code>code</code> tag in HTML.</p>
</body>

In the above code block, we enclosed the term code inside the <code> tag. This makes the enclosed text appear in a monospaced font.

Add the Pre Tag to display code in multiple lines

If you need to display programming code in multiple lines, use the <pre> tag with the <code> tag. Let's see how this works by adding the following code to your index.html file.

<body>
  <!-- Using the pre tag with the code tag -->
  <pre>
      <code>
         function multiply(a, b) {
            return a * b;
         }
         // Call the function
         multiply(2, 3);
      </code>
   </pre>
</body>

In this code block, we use the <pre> tag to indicate that we want to display the code in a block format. Inside the <pre> tag, we add the <code> tag to indicate that we are enclosing programming code.

Use Global attributes and Event attributes

You can use the global attributes and event attributes with the <code> tag.

<body>
  <!-- Using global attributes with the code tag -->
  <p>
    <code class="highlight" style="color: red" title="This is a title"
      >Some code</code
    >
  </p>
</body>

In the above code block, we use the class, style and title attributes with the <code> tag.

Add Default CSS Style

If you don't specify any style for the <code> tag, it will use the default CSS settings. Most browsers use monospace as the default font-family for the <code> tag.

<body>
  <!-- Default CSS style for HTML code tag -->
  <p>
    <code>Default CSS style</code>
  </p>
</body>

Summary

The <code> tag is used to enclose programming-related or computer-related content. By using this tag, you can display the enclosed text in a monospaced font such as courier. You can also use the <pre> tag with the <code> tag to display programming code in multiple lines. The <code> tag supports global attributes and event attributes. If you don't specify any style for the <code> tag, it will use the default CSS settings with monospace as the default font-family.

HTML Computer Code