HTML align Attribute

Introduction

The align attribute in HTML is used to specify the horizontal alignment of content within various HTML elements. This attribute helps developers control the positioning of text, images, and other elements on a webpage.

What You’ll Learn

Purpose of align

The primary purpose of the align attribute is to determine the horizontal alignment of content within the designated HTML element. It can be applied to elements such as images, tables, and text, allowing developers to control the layout and presentation of their web pages.

📝 Syntax

Add align to a supported element with a keyword value:

<p align="center">Centered text</p>

Syntax Rules

• Value is a keyword: typically left, center, or right.
• Applied directly on the element being aligned (not on a wrapper in most cases).
• Deprecated—prefer CSS text-align, float, or flexbox.
• Behavior varies slightly by element type (text vs image vs table).

💎 Values

The align attribute accepts different values based on the HTML element it is applied to. Common values include:

• left — Aligns the content to the left.
• right — Aligns the content to the right.
• center — Centers the content horizontally.

<img src="photo.jpg" alt="Photo" align="left">
<p align="center">Centered paragraph</p>
<table align="right">...</table>

Applicable Elements

Examples Gallery

Left-aligned images, centered text, right-aligned tables, and dynamic JavaScript alignment.

<img src="example.jpg" alt="Example Image" align="left">
<p>This text wraps around the image because the image is aligned to the left.</p>

<p align="center">This text is centered.</p>

<table align="right">
  <!-- Table content goes here -->
</table>

<p id="dynamicElement">This paragraph will be centered dynamically.</p>

<script>
  document.getElementById("dynamicElement").align = "center";
</script>

♿ Accessibility

• Alignment does not replace structure — Use headings and semantic HTML; do not rely on centering alone for hierarchy.
• Avoid justified text for long paragraphs — Uneven spacing can reduce readability for some users.
• Do not center critical instructions — Left-aligned body text is easier to scan for most readers.
• Prefer CSS media queries — Responsive layouts adapt better than fixed HTML alignment attributes.

💡 Best Practices