HTML Basics: Text Layout Tags

          The web mostly contains web pages that primarily comprise text. You can think of web pages as printed magazines containing a blend of text and photos. Thus formatting web pages is the task of formatting the text. Before you add any eye catching graphics to your web pages, there are some obvious formatting tasks that you would have to do. The text must be broken into paragraphs each section having a heading, long quotations must be set apart from rest, shorter quotations needs to be enclosed in quotes, key text must be emboldened and key points must be listed. These types of formatting make it easier to understand and navigate among the web pages.

          In this tutorial, several ordinary but highly important HTML tags will be discussed. These are required to bolster the format of web page before we plunge into the CSS.

          The most fundamental tag is the <p> tag. The paragraph element is the content and the enclosing <p> tags. The entire content between the <p> tags is treated as a cohesive paragraph. After rendering the text between the <p> tags appears as a single paragraph, with extra spaces before and after the paragraph. By default, HTML paragraphs are left aligned. If you want to change the alignment of the paragraph, you can do so by using its “align” attribute. For example, right alignment is done by using <p align=”right”>. But the “align” attribute is deprecated in the latest standard and should not be used.

The line breaks are introduced by the <br> tags. As HTML is a free form language, you can’t assume that what you see on the source is going to appear as it is on a web page. Thus by hitting <RETURN> keys won’t have any effect in the web page.

The heading elements which are represented by the tags <h1>, <h2>, <h3>, <h4>, <h5>, <h6> and corresponding closing tags are equally mundane but important. The heading tags are used to divide the entire web page into hierarchical topics, each having a section header. The <h1></h1> is the topmost heading with the highest heading font and <h6></h6> is the heading with the lowest heading font.

Text Layout Tags

Lists are important part of web pages. The <ol></ol> tags are used to create ordered lists whereas <ul></ul> tags are used to create unordered lists. The definition lists are created by using the <dl></dl> tags. Lists are used to summarise information. Ordered lists are numbered hierarchical lists whereas unordered lists are not numbered. Elements in the lists are inserted using <li></li> tags. For example,

  1. HTML
  2. XHTML

To create the above list in the HTML, you are required to write the following code:

  • <ol>
    • <li>HTML</li>
    • <li>XHTML</li>
    • </ol>

Definition lists are used to create term definitions i.e., a term and its description. The term is defined using the <dt></dt> tags along with its definition/description using <dd></dd> tags.

Shorter quotations are specified using the <q></q> tags whereas for the larger quotations <blockquote></blockquote> tags are used.

Sourabh Bhunje

Sourabh Bhunje, B.E. IT from Pune University. Currently Working at Techliebe. Professional Skills: Programming - Software & Mobile, Web & Graphic Design, Localization, Content Writing, Sub-Titling etc.

Leave a Reply