Html pre tag attributes example

Here you learn how to use pre tag <pre>, and why to use pre tag, how does that help in html page in seo, also learn how to make pre tag text auto wrap with css styling.

pre tag in html page design

The HTML <pre> tag is used to specify pre formatted content, means the content will be displayed as you are seeing in your code editor, anything written within <pre> ... </pre> tag is displayed with white space and line break.

Let's look at the example below
Assume you want to display following lines of JavaScript code as its appearing on your code editor with formatting.

pre tag example in html page

<script>
    function AreYouLearning() {
        var result = confirm("Are you learning html tags");
        if (result)
                alert('Yes, Learning');
        else
                alert('Not Learning');
    }
</script>

the above code is written within <pre> tag

Now let’s write the same code without pre tag to understand the difference

<script>function AreYouLearning() { var result = confirm("Are you learning html tags"); if (result) alert('Yes, Learning');  else alert('Not Learning');}
</script>

As you can see, there is now formatting, even no line breaks are maintained.

Hope you understand the use of <pre> tag in html.

html pre auto wrap example

How to wrap text in a <pre> tag in HTML

pre tag is used for displaying code blocks so it preserves the spaces and line breaks, but in some situation you may need to wrap text, here is the code, if you want to auto-wrap the text inside pre element

You can wrap text using some css style

<style>
pre {
    overflow-x: auto;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}
</style>

You may also read following tutorials to understand the use of div tag and difference between span and div tag.