Post
Ask Question

Aligning Text With HTML

Introduction 
 
Today, we will see different ways in which we can mark up text in HTML. Let's learn about some of the informative tags with respect to their representation.
 
Tags 
 
- There are six different level of headings which help us add beauty to the page (i.e. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>).
 
- Paragraph <p>, preformatted sections <pre>, link breaks <br />, and addresses tag <address>
 
- Presentational elements, (<b>, <i>, <u>, <s>, <tt>, <sup>, <sub>, <strike>, <big>, <small> and
<hr />).

- Phrasal elements (i.e. <em>, <strong>, <abbr>, <acronym>, <dfn>, <blockquote>, <q>, <cite>, <code>, <kbd>, <var>, <samp> and <address>).

- Ordered and unordered lists, using <ol> and <ul>. Adding elements to the list <li>, and definition of the list using <dl>, <dt> and <dd>.

- Editing elements, <ins> and <del>

- Grouping elements, <div> and <span>

All the tags listed above help learn how to better use HTML. Now, let's start to learn the basic text formatting:
 
Basic Text Formatting 

The following elements are considered to be basic text formatting elements:
 
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> along with <p>, <br />, <pre>.
  1. <html>  
  2.     <head>  
  3.         <title> Basic Text Formatting </title>  
  4.     </head>  
  5.     <body>  
  6.         <h1> Getting to know HTML Basic Formatting Tags</h1>  
  7.         <p> The blog you are reading is letting you learn the basic text formatting tags </p>  
  8.         <p> This paragraph shows how multiple spaces between words are treated as a single space. This is known as white space collapsing, and the big spaces between some of the words will not appearing in the browser. </p>  
  9.     </body>  
  10. </html>   
Use of <pre> tag 

The <pre> tag will make the text between, <pre> </pre>, shown in browser as it is.
  1. <html>  
  2.     <head>  
  3.         <title> Basic Text Formatting </title>  
  4.     </head>  
  5.     <body>  
  6.         <h1> Getting to know HTML Basic Formatting Tags</h1>  
  7.         <p> The blog you are reading is letting you learn the basic text formatting tags </p>  
  8.         <h2> Whitespace and Flow </h2>  
  9.         <pre> This paragraph shows how multiple spaces between words are treated as a single space. This is known as white space collapsing, and the big spaces between some of the words will be appearing in the browser. </pre>  
  10.     </body>  
  11. </html>   
Now, let's learn about the alignment. The align attribute <align> help us align the text. Headings left, right or center.
 
Example:
  1. <html>  
  2.     <head>  
  3.         <title> Learning about aligning the text</title>  
  4.     </head>  
  5.     <body>  
  6.         <h2 align = left> Left Aligned Heading </h2>  
  7.         <p align = left> the paragraph with left alignment of text </p>  
  8.         <h2 align = center> Centre Aligned Heading </h2>  
  9.         <p align = center> the paragraph with center aligned </p>  
  10.         <h2 align = right> the heading is right aligned</h2>  
  11.         <p align = right> the paragraph is right aligned </p>  
  12.     </body>  
  13. </html>  
In the next blog, we will be discussing line breaks and some further elements.
Next Recommended Reading How To Export HTML Table To Excel Using jQuery Plugin