askvity

How do I Align Text on Both Sides in HTML?

Published in HTML Text Alignment 4 mins read

To align text on both sides in HTML, you need to justify it. This type of alignment makes the text occupy equal horizontal space from both the left and right margins, which can improve its visual appearance.

Historically, this was sometimes done using an align attribute on HTML elements, as the reference mentions assigning the value to the "aligned attribute as justified". However, the standard and recommended method today is to use Cascading Style Sheets (CSS).

Understanding Justified Text Alignment

Justified text alignment is a type of text alignment that is used to stretch text lines so that each line fills the full width of the space between the margins. This is commonly seen in newspapers, books, and magazines.

  • Key characteristic: Creates clean edges on both the left and right sides of a block of text.
  • How it works: The browser typically adds extra space between words (and sometimes letters) within each line to make it stretch to the full width.

Using CSS to Justify Text (Recommended Method)

The modern and standard way to justify text is by using the text-align CSS property with the value justify.

Applying text-align: justify;

You can apply this CSS rule to any block-level element that contains text, such as <p>, <div>, <h1> through <h6>, list items (<li>), etc.

Here are common ways to apply the CSS:

  1. Inline Styles: Directly within the HTML element using the style attribute.

    <p style="text-align: justify;">
    This paragraph's text is aligned on both the left and right sides using an inline style.
</p>

  2. Internal Styles: Within the <style> tags in the <head> section of your HTML document.

    <!DOCTYPE html>
<html>
<head>
<title>Justify Text Example</title>
<style>
  .justified-text {
    text-align: justify;
  }
</style>
</head>
<body>
  <p class="justified-text">
    This paragraph uses a CSS class defined in the head section to justify the text alignment on both sides.
  </p>
</body>
</html>

  3. External Stylesheet: The most organized method. Create a .css file (e.g., styles.css) and link it in your HTML <head>.

    • styles.css:
      .justified-text {
  text-align: justify;
}
    • index.html:
      <!DOCTYPE html>
<html>
<head>
<title>Justify Text Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
  <p class="justified-text">
    This paragraph gets its style from an external CSS file, making the text justified on both margins.
  </p>
</body>
</html>

Practical Considerations

  • Last Line Alignment: Browsers usually do not justify the last line of a paragraph unless it is explicitly forced to (e.g., using text-align-last). The last line is typically aligned to the left by default.
  • Readability: While justified text creates clean edges, it can sometimes lead to large gaps between words, especially in narrow columns or with long words. This can occasionally make the text harder to read.
  • Browser Support: text-align: justify; is widely supported by all modern web browsers.

Historical Note: The HTML align Attribute

As indicated by the reference mentioning an "aligned attribute as justified", older versions of HTML used the align attribute directly on elements like <p>, <div>, <table>, <img>, etc., to control alignment.

Element align Attribute Value Description
<p>, <div> justify Aligns text to both left and right margins.
<img> left, right Aligns image relative to surrounding text.
<table> left, center, right Aligns table on the page.

However, this attribute is now deprecated in HTML5. This means it's outdated and should not be used for new web development. CSS provides a more flexible and powerful way to handle layout and presentation, including text alignment.

In summary, while older methods involved HTML attributes, the correct and standard approach in modern web design to align text on both the left and right sides is by applying the text-align: justify; CSS property to the containing element.

Related Articles