html

CSS Pre Tag

While working in the HTML scripting to create a simple static dynamic page, we may encounter many paragraphs or text data with spaces and line breaks. Some of the tags prevent the use of the extra white spaces and automatic line breaks and take the whole content as one. While it is a possibility that the content is separated by lines due to a reason of creating the pages more appealing. To prevent the HTML tags to remove the white spaces and line breaks, we have got the “pre” tag that can be used in many ways to achieve this goal. Within this article, we will discuss all those ways possible to use the “pre” tag for particular purposes.

Example 01:

Let’s get started with the first example of our article. We need to start this example HTML code with the use of the “html” basic tag. The head tag continues with the use of a title tag in it, i.e. “CSS Pre”. To understand the HTML script fully, we need to look at the body section of our webpage first. The heading of the size 1 is initialized within the body. After that, a “div” element is cast off to create a new section and add some other elements to it. This div section contains a heading of the size 2. After the heading, a span tag is utilized to create a new span within the “div” section. This span contains a long text data in it.

After all these sentences, the span tag is closely followed by the closing of the “div” tag. The body of our HTML page is completed. After this, we need to take a look at the CSS styling of this HTML code within the style tag. The span element is used to style it accordingly. The “white-space” attribute is used with the “pre” value. The “pre” value attribute is used here to preserve all the spaces and line breaks that the “span” element contains within it. After that, the font family is set to monospace, and the display property assigns the “block” value. The font size is set to 20 pixels with the color brown. While the background color is set to “bisque”. There are other font families used in the styling to be used by this span. The head tag is complete and we can run our code with the VS Code.

The output for this HTML page within the Chrome browser is given in the following image. You can see that the page created a new section and added a span element within it. The span element contains some lines as content while the line breaks and spaces are all preserved due to the use of the “pre” attribute as a value for the “white space” property of CSS.

Example 02:

Within the previous example, we have taken a look at the use of the “pre” attribute as the value of the white-space property. Now, we use it as a tag in the HTML file. We start this example with the same html, head, and body tag format. Within the body tag of this example code, we use the simple heading of the size 1 followed by the “pre” tag containing a very large text content in it. This content contains line breaks and spaces between the words.

After this, we utilize another heading of the size 1 to state that the pre-element contains the fixed width and height. The “div” element is used here to create a new section after the heading. The style tag is utilized within the “div” opening tag to style the “div” section to a width of 300 pixels, overflow set to auto, height of 200 pixels, and a background color of light green. This “div” section contains a “pre” tag within it to display some set of lines in a quite different styled way instead of using some text lines as a content. This styled “pre” tag content is displayed in the following image. The pre-tag and the “div” tag are closed here.

After that, we close the “body” and “html” tags because this code doesn’t contain any styling more than the basics that we already provided in the in-line. This code is ready to be executed in the Visual Studio Code using the “Run” option.

The output of this HTML code is shown below in the following image. It is clearly showing the use of the standard pre-tag on the simple lines of texts containing the spaces. The breaks display the content text as it is without a single character change. Also, the use of the fixed width and height for the “div” section doesn’t prevent the “pre” tag to display its data as it is. After the heading 2, the green background with scrollbar shows the same style data that is specified with the “pre” tag.

Example 03:

Let’s have our last example of this article containing a pre-tag in it. The html code starts with the very same format – html tag and the head tag following the “title” tag to give an HTML page a new name. Then, the use of a body tag to add some elements to be displayed on the browser screen. After using the head tag, we use the heading of the size 1 in the body of an HTML page. The figure tag is utilized before the “pre” tag usage. The pre-tag is styled with the brown background, white text color, a width of 600 pixels, a padding of 10 pixels, and a font size of 16 pixels via the inline styling.

We add the sign less than and greater than the HTML page using the keyword characters like lt, gt, and the shape of a cow created by some special characters along with some texts. The pre-tag is now complete and we initialized the “figcaption” tag to caption the shape that we formed within the pre-tag. The id for the figcaption tag is specified as “cow-caption” and it contains 2 lines of data with some spaces and line breaks. The figure tag, body tag, and html tags are closed after that. We use this code in the VS code to execute it.

The output shows that the heading is separated from the separate “div” section. This div section contains a cow shape with a brown background and the given caption at the end of this image-like figure. The spaces are removed from the caption.

Conclusion

This article is about the use of the pre tags within the HTML code in several ways to allow the line breaks and spaces for any reason. We tried some examples to demonstrate its use in the easiest and the best way possible. We tried to use the “pre” keyword as the attribute value of the white-space property within one of our examples. Within the rest of the examples, we tried it as a separate tag to demonstrate its working more clearly and efficiently.

About the author

Aqsa Yasin

I am a self-motivated information technology professional with a passion for writing. I am a technical writer and love to write for all Linux flavors and Windows.