When completing the layout of the site, it is necessary to arrange all the elements in such a way that they constitute an integral structure and are convenient for the end user to perceive. Perform HTML alignment with the help of the web markup language is the easiest way to make the site convenient and readable.
Page Elements Alignment
The HTML alignment tool allows you to specify the location of text or block elements on a page relative to the right and left edges of the screen. Thus, a holistic structure of the site is created, in which all the blocks are located so that the user can comfortably perceive the information on the page.
If the text on the page is written without formatting, it is perceived much worse and makes the site visitor want to close the page without further reading. Therefore, first of all, it is necessary to divide the information into logical blocks, and then distribute them so as to create a holistic and easy to read picture.
For example, the headings in the text can not only be highlighted in bold or enlarged, but also placed in the middle, and the menu block shifted to the left or right edge will help to accurately highlight the main links.
The easiest way to do justification is to use HTML tags or CSS tools.
HTML alignment
There are four main ways to arrange text and elements on a web page:
- left - the text will be located on the left edge;
- right - responsible for alignment on the right edge;
- center - the text or elements will be displayed in the center;
- justify - alignment in HTML at the edges, the entire width of the page with the same indentation at both edges.
By default, if no formatting elements are involved, the information block will be aligned with the left side, then the length of the lines on the right will be different.
An example of code will be considered below, in which examples of using the basic formatting methods for alignment in width in HTML will be displayed.
The align attribute is responsible for the location of the text, which works with tags such as <div>, <p>, <h1> and others.
The syntax will look like this:
<body> <h1 align="center"> </h1> <h2 align="right"> </h2> <p align="justify"> , , . . </p> <h2 align="left"> </h2> </body>
Copy the above example into notepad and save as an HTML file. By opening it in any browser, you will understand how alignment works with a practical example.
It can be applied not only to text, but also to images, then the code will look like this:
<img src="kartinka.jpg" align="center">
This example centered in HTML. Try experimenting and moving the picture left or right using the appropriate align attribute values.
CSS Alignment
You can arrange web page elements appropriately not only using HTML, but also using CSS. To accomplish this task, a style property such as text-align is used. It is registered either within the <style> tag directly in the body of the HTML document or taken out into a separate style file with the extension .css, which is then connected to the page.
The first option is best used on pages that are lightly loaded with styles. If the amount of CSS code is very large, it is recommended to create a separate document containing style sheets.
The syntax for aligning text elements will be as follows.
<style> p { text-align: center; } h1 { text-align: right; } h2 { text-align: left; } </style>
You may notice that the values for this property will be similar to those set when centered in HTML. The same is true for text positioned to the right and left or to the full width of the page.
Create a text document and copy this code there. In this example, the main paragraphs enclosed in the <p> tag will be located in the middle of the page, the headings of the first level will be displayed on the right, and the subheadings of the second level will be displayed on the left.
Among modern web developers and layout professionals, the use of style sheets is considered more preferable for optimizing a web page.
Additional formatting methods
In addition to the above methods for performing width alignment in HTML, there are other tags with which you can arrange the text in the right way.
For example, the <blocqkuote> tag allows you to indent from the left side of the page more. To understand how this works, copy the following example.
<body> <p><blockquote> </blockquote></p> </body>
There is a similar way to indent on the left with a given value using CSS. To do this, use the following style property.
<p style="text-indent:150px"> </p>
When using this method, you can independently specify a value that will be responsible for the width of the indent. Try this method and change the size of the indentation to any other in order to understand the principle of operation.
Another interesting tag that can be used to format text, but in our time has almost completely lost its meaning - this is <nobr>.
Its task is to disable automatic line breaks, even if this line is wider than the browser window itself.
Conclusion
So, the article examined the main ways to align text and other structural elements of a web page using HTML and CSS. Which way to choose? This should be decided depending on what goals and objectives are set during the layout of the site.