Pre, code, samp, kbd and var tags to display code in HTML

When we work with texts on a web page, especially if its content is technical, it can sometimes happen that we need to display it in a certain format. For this, HTML incorporates a series of semantic tags that allow the browser to be indicated that the information contained within is special. These are pre, code, samp, kbd, and var.
By default, the previous labels will change the typeface of the text by the monospace type font that our operating system has by default, although with CSS we can customize the web layout with the attributes that we want.

pre
If you know HTML you will know that one of the first things to keep in mind is that there are a series of rules for laying out texts that limit the way in which we can enter content. Therefore, this first <pre> tag is used to define a text that is preformatted and we want it to display as we entered it. That is, the browser will paint the content with the spaces, line breaks or tabs that we have entered without following the usual rules.

Double space without using  
 Tabulation
Jump of line 
without using <br>

As we see in the example, it is not necessary to use certain elements for the text to display as we want. This element can be used in conjunction with subsequent elements to help us have the optimal format.

code
When what we are going to represent is some type of programming code we can use <code> , a tag that I personally use frequently in this blog. We can use it within a line of text if the script is small or we can use as many lines as we need, in which case it will be convenient to include it within a <pre> for respect our format.

    <?php
    if (a = b){
        echo "Using the code tag is funny";
    }
    ?>

As you can see, when using it in conjunction with the previous one it is much more comfortable to work since we can copy and paste directly from the code editor with which we are working.

samp
Let's suppose that what we need to format is not any of the above, but a message, warning or notification given by a system, either from the operating system itself or from a program, of whatever type. If this is our case we have the <samp> tag and it will be very useful when we reflect to differentiate this content from a simple quotation mark.

Error 404. Página no encontrada.

<samp>Error 404. Página no encontrada.</samp>

kbd
We also have a label to represent a keyboard input. Suppose we want to mention the famous keyboard shortcut to cut (ctrl + c) or we simply want to indicate that the user must enter a certain text. If so, in both cases we will use <kbd>.

ctrl + c para cortar

<kbd>ctrl + c</kbd> para cortar

var
Last but not least, if we are going to work with variables, whether mathematical or programming, we can use the <var> element. In this case we will label only those elements that are a variable.

variable1 + variable2 = variable3

<var>variable1</var> + <var>variable2</var> = <var>variable3</var>

This is all. I hope it will be useful to clarify and facilitate the use of these tags when you write your articles.