Introduction
HTML is an acronym for Hypertext Markup Language, combining the terms markup and hypertext. While HTML defines the structure and formatting of a webpage, hypertext refers to the connections between different web pages. This is what classifies HTML as a markup language.
Text alignment in HTML enhances the visual coherence and comprehensibility of content, contributing to the overall structure and layout of a webpage. The text-align attribute in HTML specifies the horizontal positioning of text on a web page, dictating where text should appear within the layout.
The property text-align offers a choice of three values: justify, left, right, and center. This enables us to align text to the left, right, or center as required.
Alignment of Text
Text alignment and justification in a webpage can be determined by utilizing the align attribute provided by HTML. The property values include justified, centered, right-aligned, and left-aligned. This feature also facilitates aligning elements such as col, colgroup, tbody, td, tfoot, th, thead, and tr on the webpage.
The align attribute is no longer supported for most HTML elements. To align HTML components, CSS must be used instead. By employing CSS, text alignment in HTML can be achieved using the text-align property. This property allows you to specify the horizontal alignment of text within HTML elements.
Alternatively, this attribute can be used in internal, external, or inline stylesheets. Furthermore, we have discussed the application of the text-align attribute in internal and inline stylesheets in this context.
The property text-align can be set to one of three values: left, right, or center, to specify how the text should be aligned. It is important to note that this property should be applied using inline CSS within the style attribute of HTML elements.
How can Text in HTML be Aligned?
In HTML, the align property of text can be aligned using values like left, right, center, and justify. Below are the steps for utilizing the HTML align property to align text.
Syntax
The CSS styling within HTML plays a crucial role in enhancing the flexibility, user experience, and aesthetics of websites for both browsers and users. By default, in HTML, text alignment is set to left. The text alignment values in HTML ensure proper alignment of text and values. Now, let's explore how the standard HTML syntax handles the alignment justification of a page.
The HTML syntax is:
<p align="justify/left/right/centre">
...code...
</p>
The CSS syntax is:
div
{
text-align:justify/left/right/centre;
text-justify:values;
}
The basic structure of HTML syntax for protecting text values in a document is as described below. To establish text alignment as justified, the text-justify property is utilized, with attribute values determining the text's alignment method. Various attribute values like auto, inter-word, inter-character, none, initial, and inherit are provided for text-justify, each with its own unique description rules. Opting for the auto value allows the browser to select the justification algorithm, while not selecting auto will deactivate the justification process. The initialization process sets the default value within the property tag. By using the inherit value, the value of the parent element will be passed down to its child element for the property.
How can Text in HTML be Aligned?
Different values like left, right, center, and justify can be utilized to align text effectively within an HTML document. Here are the steps for applying the align property in HTML or aligning text:
The initial step involves inserting the text into an HTML element that necessitates proper alignment.
<html>
<body>
<p>Welcome to the document</p>
</body>
</html>
The string "Welcome to the document" is contained within the p element of the code for proper alignment.
Alignment of text in HTML is achieved by utilizing the align property of the respective HTML element.
<html>
<body>
<p align="">Welcome to the document</p>
</body>
</html>
Different alignment values like left, right, center, or justify can be specified within the HTML align attribute to control the alignment of text.
Text Alignment to the Left
To align text to the left of a webpage, we can specify the value of the HTML align attribute as "left" in the HTML code. Let's examine the following HTML snippet to achieve this alignment.
<!DOCTYPE html>
<html>
<body>
<h2 align="left">Text alignment to the left</h2>
</body>
</html>
Output:
Text Alignment to the Right
To align text to the right of a webpage, we can specify the value of the HTML align attribute as "right" in the HTML code. Let's examine the following HTML code to achieve this alignment.
<!DOCTYPE html>
<html>
<body>
<h2 align="right">Text alignment to the right</h2>
</body>
</html>
Output:
Text Alignment to the Center
To center a text on a webpage, we can adjust the value of the align attribute in the HTML code to "center". This will ensure that the text is aligned at the center of the page. Let's explore the HTML code required to achieve this alignment.
<!DOCTYPE html>
<html>
<body>
<h2 align="center">Text alignment to the center</h2>
</body>
</html>
Output: