HTML - align Attribute

Quiz

HTML algin attribute is used to specify the alignment (center, left or right) of content within an HTML element.

However, in modern HTML, the align attribute has been deprecated in favor of using CSS for layout and alignment. CSS is the standard way for styling and positioning elements in modern web development because it offers more exact control over alignment and display.

Syntax

<tag align = "value"></tag>

Applies On

Below listed elements allow using of the HTML align attribute.

Element	Description
<img>	HTML <img> tag is used to append image in document.
<table>	HTML <table> tag allow us to put data in a organized way by providing row and column facility.
<iframe>	HTML <iframe> is an inline frame that allows us to embed another document within the current HTML document.
<caption>	HTML <caption> tag is used to specify a caption for the table element.
<col>	HTML <col> tag is used to offer information about columns.
<applet>	HTML <applet> tag is used for embedding a Java applet within an HTML document.
<colgroup>	HTML <colgroup> tag is used to describe the collection of one or more columns in a table for formatting.
<hr>	HTML <hr> tag is used to create a horizontal line on the webpage.
<legend>	HTML <legend> tag is used to specify the caption of fieldset element.
<tbody>	HTML <tbody> tag is used to create a separate semantic block in an HTML table, which defines the table's body content.
<td>	HTML <td> tag is used to define the data cell of the table and used as a child element of tr element.
<tfoot>	HTML <tfoot> tag is used to group footer content in an HTML table.
<th>	HTML <th> tag designates the header cell for HTML tables.
<thead>	HTML <thead> tag is used to group the header content of HTML table
<tr>	HTML <tr> tag is used to define each row in table.

Examples of HTML align attribute

In the following examples, we discuss different ways how we can use algin attribute.

Align attribute with h1 and p tag

The below code demonstrate how h1 and p tag can be aligned using algin attribute

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML align attribute</title>
</head>
<body>
   <!--example of the align attribute-->
   <h1 align="left">This is h1 heading.</h1>
   <p align="center">Text within the p tag.</p>
</body>

</html>

Align attribute with div tag

Consider another scenario, where we are going to use the align attribute with the div element.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML align attribute</title>
   <style>
      div {
         color: green;
         font-weight: bolder;
      }
   </style>
</head>

<body>
   <!--example of the align attribute-->
   <div align="right">
      <p>
      Text within the p tag(it will display
      the right side of the screen view 
      because we have used align = "right").
      </p>
   </div>
</body>

</html>

Align attribute with form tag

Let's look at the following example, where we are going to use align attribute with the form.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML align attribute</title>
   <style>
      form {
         width: 300px;
         height: 210px;
         background-color: rgb(21, 114, 185);
         color: white;
         border-radius: 10px;
      }

      form button {
         width: 100px;
         padding: 5px;
      }
   </style>
</head>

<body>
   <!--example of the align attribute-->
   <form align="center">
      <h1 align="center">Login</h1> 
      Username: <input type="text">
      <br>
      <br> Password:<input type="password">
      <br>
      <br>
      <button>Login</button>
   </form>
</body>

</html>

Supported Browsers

Attribute
align	Yes	Yes	Yes	Yes	Yes

html_attributes_reference.htm

Print Page