HTML Element <pre>

The HTML "pre" element allows us to display all the information that is contained between the start and end marks just as we have written it, respecting even the blank spaces and line breaks.

Let's see how the information contained within this tag is displayed in a browser:

<!DOCTYPEhtml>
<html>
<head>
  <title>page title</title>
  <meta charset="UTF-8">
</head>
<body>
<h1>HTML pre tag</h1>
<pre>
 select * from publishers
    left join books
    on editoriales.codigo=books.codigoeditorial;
</pre>
</body>
</html>

The result in the browser is:

Html pre tag example - coding180.com

Normally, if we do not apply CSS to the pre tag, the data appears with a monospaced font, that is, each letter occupies the same width in pixels.

If instead of having the pre tag we use the paragraph tag <p>, the result inside the browser is completely different:

Robort Gabriel

Lagos, Nigeria

Skills