Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to define a piece of computer code in HTML5?

HTML5 Web Development Front End Technology

In this article, we will discuss how to define a piece of computer code in HTML5. When creating a website that includes computer programming code, it's necessary to make sure the code is easy to read and stands out from the rest of the text. Here, we are using some tags to define the piece of computer code.

Approaches

We have two different approaches to defining a piece of computer code in HTML5 including the following ?

  • Using the " element"

  • Using the "

     element"</p></li>
</ul>
<p>Let us look at each step in detail. </p>
<h2>Approach 1: Using the "<code> method" </h2>
<p>The first approach is to define a piece of computer code in HTML5 as "<code>". It allows you to define a piece of computer code in HTML5 while maintaining the same font and text size as the surrounding text. This approach is useful when you want to embed a small snippet of code within a larger block of text. </p>
<h3>Example</h3>
<p>Following is an example to define a piece of computer code in HTML5 using "<code>".</p>
<pre class="demo-code notranslate language-html" data-lang="html"><!DOCTYPE html>
<html>
<head>
   <title>Code Example</title>
   <style>
      body {
         font-family: Arial, sans-serif;
         text-align: center;
      }
      p {
         color: red;
      }
      h1 {
         color: blue;
      }
      code {
         background-color: #f2f2f2;
         border: 1px solid #d3d3d3;
         padding: 5px;
         font-family: Consolas, monospace;
      }
   </style>
</head>
<body>
   <h1>Code Example</h1>
   <p>Below is an example of a function in JavaScript:</p>
   <code>
      function greet(name) {
         console.log("Hello, " + name + "!");
      }
   </code>
</body>
</html>

    Approach: Using the "
     method"</h2>
<p>The first approach is to define a piece of computer code in HTML5 as "<pre>". It helps you display a large block of computer code with a fixed-width font and proper spacing. This approach is ideal for displaying longer pieces of code, like a full program or script.</p>
<h3>Example</h3>
<p>Following is an example of defining a piece of computer code in HTML5 using "<pre>".</p>
<pre class="demo-code notranslate language-html" data-lang="html"><!DOCTYPE html>
<html>
<head>
   <title>Using the <pre> Tag</title>
   <style>
      body {
         font-family: Arial, sans-serif;
      }
      pre {
         background-color: #f4f4f4;
         padding: 10px;
         border-radius: 5px;
         font-size: 15px;
      }
      h1 {
         color: green;
      }
   </style>
</head>
<body>
   <h1>Tutorials Point Articles</h1>
   <p>The following code block demonstrates how to use the <pre> tag:</p>
   <p>C Program to Check Whether a Number is Prime or not</p>
   <pre>
      <code>
         
         // C program to swap two variables
         #include <stdio.h>
         int main() {
            int x, y;
            printf("Enter Value of x ");
            scanf("%d", &x);
            printf("\nEnter Value of y ");
            scanf("%d", &y);
            int temp = x;
            x = y;
            y = temp;
            printf("\nAfter Swapping: x = %d, y = %d", x, y);
            return 0;
         }
      </code>

Updated on: 2023-03-27T14:43:20+05:30

356 Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements