Most of us have had a clear idea of ​​a perfectly designed page since school. An even scattering of letters, slender lines of words, a strict rectangle of text framed by even margins - this is exactly the picture we see when leafing through any printed publication. There is a great temptation to depict something similar on a web page, especially since a well-known means is proposed for this - text alignment. However, what is good for a typographer is a mortal sin for a web designer. And all because, when applied to site markup, this function becomes overgrown with so many shortcomings that its only advantage in the form of a smooth right edge simply fades before our eyes. Here are just a few reasons why you should ditch justification in favor of left alignment.

Visible clutter inside a text block

Yes, yes, the smoother the edges of the text block, the more obvious the mess inside it. In typography, a whole arsenal of tools allows you to achieve consistency in text: hyphenation, adjusting the spacing between words and the distances between letters, and even slightly wider or slightly narrower font options. But the layout of an Internet page suggests, as a rule, only one way to “stretch” a line from edge to edge - an uncontrolled increase in the width of spaces. Not only does this lead to the appearance of unsightly gaps between words, but these gaps, as if by the law of meanness, often fall at approximately the same place in each line, forming so-called vertical “rivers”. All this gives the text a very untidy appearance.

Unreadability

But if aesthetics could still be sacrificed for the sake of neat edges, then the obvious problems with the visual perception of the text are still too high a price to pay for them. And justified text is objectively much less readable than left-aligned text. The main reason lies in the same increased intervals between words: the eye is constantly forced to look for the beginning of the next word, and due to the difference in spaces from line to line, it is also forced to adjust from one distance to another.

The need to work on line length, often to no avail

In fairness, it is worth noting that the identified disadvantages of justified text can be reduced by increasing the line length. However, this method will not always be effective. But it can reduce readability with a very high degree of probability: it is difficult for the eyes, having scanned one long line to the end, to accurately and quickly jump to the beginning of the next one.

Unsuitable for mobile devices

The narrower the column with text, the less it is subject to alignment. And here this format comes into direct conflict with the requirements of mobile devices, for which, on the contrary, the shorter the line, the better. Agree, it’s one thing to follow a long line on a full-screen monitor with your eyes, and quite another to scroll each line back and forth over and over again. A dubious pleasure, but a sure way to lose your mobile audience!

It would seem that if we could add a word wrap function to the page, all these problems that arise when aligning text to the width of the page would be solved. But the catch is that HTML markup does not provide such a function. So it turns out that today there is no other way to maintain acceptable spacing between words on a web page other than aligning text to the edge.

Thus, when creating an Internet page, it is important to remember the main thing: a website is not a book, and you need to approach its design from the positions dictated by technology and the psychology of perception, and not by someone’s aesthetic views, however, very, very conditional. Believe me, if your text is neatly placed and, first of all, readable easily and with pleasure, no one will pay attention to such a trifle as uneven margins!

By the way, when you read this article, did you notice that the text is not justified?

Hello! We continue to master the basics of the HTML language. Let's see what you need to write to align the text to the center, width or edges.

Getting down to business, let's look at how to center text in HTML in three different ways. The last two are linked directly to the style sheet. It can be a CSS file that connects to the pages of the site and defines their appearance.

Method 1 - direct work with HTML

It's actually quite simple. See example below.

Align the paragraph to the center.

If you need to move text fragments in a different way, then instead of the “center” parameter, enter the following values:

• justify – align text to the width of the page;
• right – on the right edge;
• left - to the left.

By analogy, you can move the content that is in the headers (h1, h2) and container (div).

Method 2 and 3 - using styles

The design presented above can be slightly transformed. The effect will be the same. To do this, you need to write the code below.

Text block.

In this form, the code is written directly into the HTML to center the text content.

There is another alternative way to achieve results. You will need to do a couple of steps.

Step 1. In the main code write

Text material.

Step 2. In the included CSS file, enter the following code:

Rovno (text-align:center;)

I note that the word “rovno” is just the name of a class that can be called differently. This is left to the discretion of the programmer.

By analogy, in HTML you can easily make text centered, justified, and aligned to the right or left edge of the page. As you can see, there is far more than one option to achieve your goal.

Just a few questions:

• Are you doing an information non-profit project?
• Do you want your website to rank well in search engines?
• Do you want to earn income online?

If all the answers are positive, then just look at an integrated approach to website development. The information will be especially useful if it runs on the WordPress CMS.

I would like to point out that your own websites are just one of many options for generating passive or active income on the Internet. My blog is dedicated to financial opportunities online.

Have you ever worked in the field of traffic arbitrage, copywriting and other areas of activity that generate primary or additional income through remote collaboration? You can learn about this and much more right now on the pages of my blog.

I will publish a lot of really useful information in the future. Stay in touch. If you wish, you can subscribe to Workip updates by e-mail. The subscription form is located below.

Until now, we have aligned elements only to the left. More precisely, you and I didn’t do this at all, and the browser itself aligns elements to the left by default. Of course, it would be too boring to align everything to the left. Therefore, there are different ways to center and right align.

Alignment of elements is something you just need to know when doing this. The first thing you need to do is type a simple page.

Once upon a time there was a tag

I don’t advise you to use it now, due to the availability of more modern methods, but I can’t help but mention it. It is very, very simple to use. Everything you need to be centered, you place inside this tag. For example, here we align the 1st level heading to the center.

You can add a picture, also aligned to the center, let's also move to the next line using the tag
:

1st level heading, center aligned

It was a tag

, which is already outdated, in addition, contrary to your expectations of tags And simply doesn't exist. Let's say left aligned by default, center aligned using tag , but what about the right one?

To solve this problem, the developers came up with a universal way to align elements HTML. The method is to use so-called containers, which are created using the tag

. That is, everything that needs to be placed in a specific container is placed inside the tag

. And this tag already has the attribute " align", the value of which determines the position of this container. There are three values: " left", "center", "right". By default, it is " left“However, I think that this does not surprise you.

Let's write the same one now HTML code, but using containers, in addition, let's align not to the center, but to the right.

As you can see, everything works. I advise you to also change the values ​​of the attribute " align" to look at other types of container content alignment.

Another way to align elements HTML- these are tables, but this topic deserves a separate discussion, so we’ll talk about it in one of the following articles.

For now, your page should look like this:

1st level heading, center aligned

1st level heading, right aligned

Sincerely, Mikhail Rusakov.

P.S. If you want to know more about HTML, then take a look at my free course with an example of creating a website at HTML:

Html there is a universal parameter and it is called ALIGN. It can be used with various html tags:

p | h1 | div | table | thead | tbody | tfoot | tr | th | td

Possible values:

Center- center alignment
Left- left alignment
Right- on the right
Justify- in width, along the left and right edges. In this case, large gaps may appear between words.

Text is aligned in width

Appearance in browser:

The title is centered

The text is aligned in width. The text is aligned in width. The text is aligned in width. The text is aligned in width. The text is aligned in width. The text is aligned in width. The text is aligned in width. The text is aligned in width. The text is aligned in width. The text is aligned in width. The text is aligned in width. The text is aligned in width.

The content of this block is aligned to the right side

Please note that left alignment occurs automatically. Therefore, there is no need to specify such a value for the align parameter.