How to Align Text in HTML

Introduction

HTML stands for Markup Language Hypertext. It consists of the two terms markup and hypertext. Although HTML provides the structure and style of a webpage, hypertext is used to describe the link between various web pages. This is why it is termed a markup language.

Aligning text in HTML makes the material appear more organized and understandable. This is part of the page's structure and layout. The text-align property in HTML determines how text is aligned on a webpage. Essentially, it indicates how text should be positioned horizontally on a webpage.

The text-align property has three possible values: justify, left, right, and centre. As a result, we may align our text to the left, right, or centre, depending on what we need.

Alignment of Text

The alignment and justification of text on a webpage may be specified using the align feature offered by HTML. Additionally, the values of this property are justified, centre, right, and left. Additionally, it supports the alignment of the col, colgroup, tbody, td, tfoot, th, thead, and tr components.

However, the align attribute has been deprecated for all other HTML elements. We need to utilize CSS to align the remaining HTML components. Utilizing CSS, we may align a text in HTML using the text-align property. The text-align property is a CSS attribute that lets you tell HTML text where to align horizontally.

On the other hand, any internal, external, or inline stylesheet may utilize this attribute. On the other hand, using the text-align attribute in internal and inline stylesheets has been covered here.

The text-align property accepts three values: left, right, or centre, which determine the text's alignment. Nevertheless, this text-align property must be used with inline CSS inside the HTML style attribute.

How can Text in HTML be Aligned?

Any left, right, centre, and justify values can align a text's align property in HTML. Nonetheless, the procedures for using the HTML align property or aligning text are provided below.

Syntax

The CSS style in HTML emphasizes online sites that are more adaptable, user-friendly, and visually appealing from both the browser and user perspective. By default, the justify text on an HTML page should be positioned on the left side. HTML Justify text values are aligned with the text or values correctly. Let's examine how the HTML standard syntax justifies the page's alignment.

The HTML syntax is:

The CSS syntax is:

The fundamental syntax of HTML codes for defending text values inside a document is as follows. When text-align is to be set in justify, the text-justify property is supplied, and attribute values are the text's justification technique. Different attribute values, such as auto, inter-word, inter-character, none, initial, and inherit, are available for text-justify; each value has a unique set of description logics. If we use the auto option, the browser will choose the justification algorithm. If we choose not to use the auto option, the justification method will be automatically disabled. Initialization will set the default value in the property tag. Inherit value will pass down the parent element's value to its child element for the property.

How can Text in HTML be Aligned?

Any left, right, centre, and justify values can align a text properly in HTML. Nonetheless, the procedures for using the HTML align property or aligning text are provided below.

The text is first inserted into an HTML element that requires alignment.

Because it has to be aligned, the text "Welcome to the document" is positioned inside the code's p element.

The text is then aligned using the HTML element's align property.

Any left, right, centre, or justify values can be used inside the HTML align property to align the text.

Text Alignment to the Left

We shall set the HTML align attribute's value to the left to align a text to the left of the webpage. Let's look at the HTML code to align a text to the left of the page.

Output:

Text Alignment to the Right

We shall set the HTML align attribute's value to the right to align a text to the right of the webpage. Let's look at the HTML code to align a text to the right of the page.

Output:

Text Alignment to the Center

We shall set the HTML align attribute's value to the centre to align a text to the centre of the webpage. Let's look at the HTML code to align text to the centre of the page.

Output: