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.
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.
<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.
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>