How to place paragraphs and line breaks in web pages. We also see headings as paragraphs that serve as titles.

In the previous chapters we have presented as an example some labels that allow us to format our text. In this chapter we will see in more detail the most widely used and we will exemplify some of them later.

Formatting a text goes through such obvious tasks as defining the paragraphs, justifying them, introducing bullets, numbering or putting it in bold, italics…

We have seen that to define the paragraphs we use the P tag that introduces a break and leaves a blank line before continuing with the rest of the document.

We can also use the BR tag, for which there is no corresponding closure (/BR), to perform a simple carriage return, so we do not leave a blank line but only change the line.

Note: There are other tags that do not have a corresponding closing tag, such as IMG for images, which we will see later. This happens because a line break or an image does not start and end later, but only has a presence in a specific place.

You can verify that changing the line in our HTML document without introducing any of these or other tags does not imply a change of line in the displayed page at all. In reality, the browser will enter the text and will not change the line unless it comes to an end or we specify it with the corresponding label.

Paragraphs delimited by P tags can be easily justified to the left, center or right by specifying such justification inside the tag via an “align” attribute. An attribute is nothing more than a parameter included inside the tag that helps to define the operation of the tag in a more personalized way. We will see throughout this manual a number of very useful attributes for all types of labels.

Note: Keep the following in mind, which we have already discussed previously. The HTML is used to define the content. Therefore, the align attributes that we are going to know next are getting into a plot that does not correspond to HTML, because they are defining the way in which a paragraph should be represented, its style, and not the content. It is important to point this out so that you learn that these things must be done through language, which serves to define the style, the form. In the revision of this text in 2016 we have decided to keep these examples, even though it is not the most correct use of HTML, because that is how it helps us to introduce the tag attributes, which we have not seen up to now. However, you will take it into account when you make your pages and to see how these formats should be applied.

Thus, if we wanted to introduce a text aligned to the left we would write:

Text aligned to the left

For a center justification:

Center aligned text

To align to the right:

Text aligned to the right

The previous paragraphs with their alignments would look more or less like this:

As you can see, in each case the align attribute takes certain values ​​that are written in quotes. Sometimes we need to specify some attributes for the correct functioning of the tag. In other cases, the browser itself takes a defined default value. For the case of align, the default value is left.

Note: The attributes have their values ​​indicated in quotes (“), but if we do not indicate them in quotes it will also work in most cases. However, it is advisable that we always put the quotes to get used to using them, to give homogeneity to our codes and to avoid future errors in more finicky systems.

The align attribute is not exclusive to the P tag. Other very common tags, which we will see later, between which text or images are inserted, usually make use of this attribute in a regular way.

Let’s imagine a relatively long text where all the paragraphs are aligned to the left (for example). One way to simplify our code and avoid continually putting the align attribute on each of our tags is by using the DIV tag.

This tag, DIV, by itself is useless, except to produce a simple line break. In order for it to really be seen, it has to be accompanied by some style defined in the CSS or by HTML attributes such as align and what it allows us is to align any element (paragraph or image) in the way we want.

So, the code:

Paragraph1

Paragraph3

Paragraph2

It is equivalent to:

Note: Remember that align would also not be correct to use in a DIV tag, for the same reason that it would not be correct to use in a paragraph. It helps us to know facets of HTML, which were used more before and have been inherited in the current versions of the language.

As we have seen, the DIV tag marks divisions in which we define a block of content, and to which we could apply style globally, although the correct thing would be to apply that style from the CSS side.

Practical example:

To practice a little what we have just seen, we are going to propose an exercise that you can solve on your computers. We simply want to build a page that has, in this order:

2 centered paragraphs

3 Paragraphs aligned to the right

A triple line break

1 paragraph left aligned

The source code of the exercise, with what we know so far, could have the following form:

Example formatting paragraphs

This is the result:

This is just… see you later…

When viewing it in a browser we would obtain a result like the following:

Headers

There are other tags to define special paragraphs, which will serve as titles. They are the headings or headings in English. As we say, they are labels that format the text as a headline, but the fact that they change the format is not what we have to worry about, but the meaning of the label itself. It is true that browsers assign a larger font size and make the text bold, but the important thing is that they serve to define the structure of the content of an HTML document. So browsers for the blind will be able to inform the blind that this is a new division of content and that its owner is this or that. Search engines will also know how to better interpret the content of a page based on the headlines and subheadings.

There are several types of headers, which differ visually in the size of the letter they use. The specific tag is H1, for the largest headers, H2 for the second level ones, and so on up to H6, which is the smallest header. But what is important, we insist, is the structure that they denote. A page will generally have a level 1 header and several level 2 headers within. Then, within the H2 we will find H3, etc. We should never use headings because they format the text in a given way, but because our document requires it according to its structure.

Headings also imply paragraphing, so everything we write inside H1 and its closing (or any other heading) will be placed in a separate paragraph.

We can see how some headers are presented below.

Level 1 Header

Headers, like other HTML tags, support the align attribute. We see an example of a center-aligned level 2 header, although we repeat that this formatting should be done in CSS.

Level 2 Header

The headers will look like this on the page:

Another interesting exercise is to build a web page that contains all possible headers. It can be seen below.

Level 1 header

Level 2 Header

Level 3 Header

Level 4 Header

Level 5 Header

Level 5 Header level 6