HTML pre Tag
BLUF: Mastering HTML pre Tag is a fundamental step in becoming a web developer. This guide covers the structure, syntax, and best practices for using this HTML element effectively.
Key Lesson: HTML pre Tag
Web structure starts with solid HTML. Learn how HTML pre Tag contributes to accessible and semantic web pages in the tutorial below.
The HTML <pre> tag is used to specify pre formatted texts . Texts within <pre>.......</pre> tag is displayed in a fixed-width font. Usually it is displayed in Courier font. It maintains both space and line break.
It is commonly utilized to showcase code examples in various programming languages such as Java, C#, C, C++ etc, as it accurately presents the code exactly as it is written.
HTML pre tag example
Example
<pre>
This is a formatted text
by using the HTML pre tag. It maintains
both space and line break.
</pre>
Output:
Output
This is a formatted text
by using the HTML pre tag. It maintains
both space and line break.
HTML pre tag example: Java code within pre
Example
<pre>
package com.C# Tutorial;
public class FirstJava{
public static void main(String args[]){
System.out.println("hello java");
}
}
</pre>
Output:
Output
package com.C# Tutorial;
public class FirstJava{
public static void main(String args[]){
System.out.println("hello java");
}
}
If you remove pre tag from the above example, all the text will be displayed in a single line.
Output without pre:
width attribute
The HTML <pre> element additionally provides support for the width attribute. This attribute defines the intended width of the pre-formatted text. However, this feature is not compatible with HTML 5.
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<pre> |
Yes | Yes | Yes | Yes | Yes |
