HTML Computer Code Elements
Last Updated : 19 Dec, 2024
HTML provides a set of elements tailored for displaying computer code so that it is easily distinguishable from other text on a webpage. These elements help in formatting and presenting source code in a readable and syntactically correct manner.
The code Tag
The `<code>` tag in HTML is designed to display computer code snippets with fixed formatting for optimal readability. It renders the code in a monospace font, preserving the original spacing and layout. The `<code>` tag also supports both global attributes and event attributes, allowing for flexible styling and interaction.
Syntax:
<code> Computer code contents... </code>
Note: The program that is written inside the <code> tag has some different font sizes and font types to the basic heading tag and paragraph tag.
Example: The <code> tag displays a C program within a <pre> tag, preserving whitespace and formatting. The C program includes the stdio.h library and a main function that prints “Hello Geeks”.
html <!DOCTYPE html> <html> <body> <pre> <code> #include <stdio.h> int main() { printf("Hello Geeks"); } </code> </pre> </body> </html> Output:
The kbd Tag
The `<kbd>` tag is used to define keyboard input. The text between the `<kbd>` tags represents text that should be typed on a keyboard. This text is typically displayed in the browser’s default monospace font, though a richer effect can be achieved with CSS. The `<kbd>` tag has no specific attributes.
Syntax:
<kbd> Contents... </kbd>
Example: To demonstrate the implementation of the <kbd> Tag. The <kbd> tag displays keyboard keys “Alt”, “+”, and “Tab” within the styled text.
html <!DOCTYPE html> <html> <head> <title>The kbd tag</title> <style> body { text-align: center; } </style> </head> <body> <kbd>Alt </kbd> <kbd>+</kbd> <kbd>Tab</kbd> <span> is used to switch between open apps </span> </body> </html> Output:
Output
The pre Tag
The `<pre>` tag in HTML defines a block of preformatted text, preserving spaces, line breaks, tabs, and other formatting characters that browsers usually ignore. Text within the `<pre>` element is displayed in a fixed-width font, but this can be changed using CSS. The `<pre>` tag requires both opening and closing tags.
Syntax:
<pre> Contents... </pre>
Example: To demonstrate implementing the <pre> Tag in the HTML computer code elements.
html <!DOCTYPE html> <html> <head> <title>pre tag with CSS</title> <style> pre { font-family: Arial; color: #009900; margin: 25px; } </style> </head> <body> <pre> GeeksforGeeks A Computer Science Portal For Geeks </pre> </body> </html> Output:
The samp Tag
The `<samp>` tag is used to define sample output from a computer program. It encloses inline text representing a sample or quoted output from a program.
Syntax:
<samp> Contents... </samp>
Example: To demonstrate implementing the <samp> tag in HTML to represent sample output or computer code snippets.
html <!DOCTYPE html> <html> <head> <title>samp tag</title> <style> body { text-align: center; } .geeks { font-size: 25px; font-weight: bold; } </style> </head> <body> <div class="geeks"><samp> Tag</div> <samp>A computer science portal for Geeks</samp> </body> </html> Output:
Output
The var Tag
The <var> tag is used specifically to highlight programming variables or mathematical expressions, providing context to the text, which is useful for accessibility and search engines. In most browsers, the content of this tag is displayed in italic format.
Syntax:
<var> Contents... </var>
Example: To demonstrate using the <var> tag in HTML that denotes variables and it is styled to differentiate them from regular text, providing emphasis on their significance within the content.
html <!DOCTYPE html> <html> <head> <title>var tag</title> <style> body { text-align: center; } .geeks { font-size: 25px; font-weight: bold; } </style> </head> <body> <div class="geeks"><var> Tag</div> <var>GeeksforGeeks Variable</var> </body> </html> Output:
Output
Quick Summary:
| Tag | Description |
|---|
<code> | Defines a piece of computer code. |
<kbd> | Represents keyboard input, often used to display keys or key combinations. |
<pre> | Displays preformatted text, maintaining its original formatting. |
<samp> | Displays sample output or examples, typically used in computing contexts. |
<var> | Denotes variables, often used to represent placeholders or program entities. |
Supported Browsers
- Google Chrome
- Microsoft Edge
- Firefox
- Opera
- Safari
Similar Reads
HTML Tutorial
HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. It tells the web browser how to display text, links, images, and other forms of multimedia on a webpage. HTML sets up the basic structure of a website, and then CSS and JavaScript
10 min read
HTML Introduction
HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. It defines the structure of a webpage by using a series of elements, tags, and attributes to organize text, images, links, and other multimedia elements. HTML is a markup language,
7 min read
HTML Editors
An HTML Editor is a software application designed to help users create and modify HTML code. It often includes features like syntax highlighting, tag completion, and error detection, which facilitate the coding process. There are two main types of HTML editors: Text-Based Editors - Allow direct codi
5 min read
HTML Basics
HTML (HyperText Markup Language) is the standard markup language for creating and structuring web pages. It defines the structure of a webpage using elements and tags.HTML is responsible for displaying text, images, and other content.It serves as the foundation for building websites and web applicat
6 min read
HTML Comments
HTML comments are used to add notes or explanations in the HTML code that are not displayed by the browser. They are useful for documenting the code, making it easier to understand and maintain.To add a comment, use the syntax <!-- your comment here -->. [GFGTABS] HTML <!-- This is a commen
4 min read
HTML Elements
An HTML Element consists of a start tag, content, and an end tag, which together define the element's structure and functionality. Elements are the basic building blocks of a webpage and can represent different types of content, such as text, links, images, or headings. For example, the <p> el
5 min read
HTML Attributes
HTML Attributes are special words used within the opening tag of an HTML element. They provide additional information about HTML elements. HTML attributes are used to configure and adjust the element's behavior, appearance, or functionality in a variety of ways. Each attribute has a name and a value
9 min read
HTML Headings
HTML headings are used to define the titles and subtitles of sections on a webpage. They help organize the content and create a structure that is easy to navigate. Proper use of headings enhances readability by organizing content into clear sections.Search engines utilize headings to understand page
4 min read
HTML Paragraphs
A paragraph in HTML is simply a block of text enclosed within the <p> tag. The <p> tag helps divide content into manageable, readable sections. It’s the go-to element for wrapping text in a web page that is meant to be displayed as a distinct paragraph. Syntax: <p> Content</p
5 min read
HTML Text Formatting
HTML text formatting refers to the use of specific HTML tags to modify the appearance and structure of text on a webpage. It allows you to style text in different ways, such as making it bold, italic, underlined, highlighted, or struck-through. Table of Content Categories of HTML Text FormattingLogi
4 min read