Formatting Text - HTML 4

Here’s a super-ultra-technical definition of a block of text: some chunk of content that wraps from one line to another inside an HTML element.

Your HTML page is a giant collection of blocks of text:

  • Every bit of content on your Web page must be part of some block element.
  • Every block element sits within the <body> element on your page.

HTML recognizes several kinds of text blocks that you can use in your document, including (but not limited to)

  • Paragraphs
  • Headings
  • Block quotes
  • Lists
  • Tables
  • Forms

Paragraphs
Paragraphs are used more often in Web pages than any other kind of text block.

HTML browsers don’t recognize the hard returns that you enter when you create your page inside an editor. You must use a <p> element to tell the browser to separate the contained block of text as a paragraph.

Formatting
To create a paragraph, follow these steps:

  1. Add <p> in the body of the document.
  2. Type the content of the paragraph.
  3. Add </p> to close that paragraph.

Here’s what it looks like:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”http://www.w3.org/1999/xhtml”><head><meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” /><title>All About Blocks</title></head><body><p>This is a paragraph. It’s a very simple structure that you will use time and again in your Web pages.</p><p>This is another paragraph. What could be simpler to create?</p></body></html>

This HTML page includes two paragraphs, each marked with a separate <p> element. Most Web browsers add a line break and full line of white space after every paragraph on your page, as shown in Figure.

Figure : Web browsers delineate paragraphs with line breaks.

Web browsers delineate paragraphs with line breaks.

Some people don’t use the closing </p> tag when they create paragraphs. Although some browsers let you get away with this, leaving out the closing tag

  • Doesn’t follow correct syntax
  • Causes problems with style sheets
  • Can cause a page to appear inconsistently from browser to browser

You can control the formatting (color, style, size, and alignment) of your paragraph by using Cascading Style Sheets (CSS).

Alignment

By default, the paragraph aligns to the left. You can use the align attribute with a value of center, right, or justify to override that default and control the alignment for any paragraph.

<p align=”center”>This paragraph is centered.</p><p align=”right”>This paragraph is right-justified.</p><p align=”justify”>This paragraph is double-justified.</p>

Figure shows how a Web browser aligns each paragraph according to the value of the align attribute.
The align attribute has been deprecated (rendered obsolete) in favor of using CSS.

Headings

Headings break a document into sections. This book uses headings and subheadings to divide every chapter into sections, and you can do the same with your Web page. Headings can

  • Create an organizational structure
  • Break up the visual appearance of the page
  • Give visual clues about how the pieces of content are grouped

HTML includes six elements to help you define six different heading levels in your documents:

  • <h1> is the most prominent heading (Heading 1)
  • <h6> is the least prominent heading (Heading 6)

Follow heading order from highest to lowest as you use HTML heading levels. That is, don’t use a second-level heading until you’ve used a first-level heading, don’t use a third-level heading until you’ve used a second, and so on. If you want to change how headings appear in a browser.

Figure : Use the align attribute with a paragraph to specify the horizontal alignment.

Use the align attribute with a paragraph to specify the horizontal alignment.

Formatting

To create a heading, follow these steps:

  1. Add <hn> in the body of your document.
  2. Type the content for the heading.
  3. Add </hn>.

Browser displays
Every browser has a different way of displaying heading levels, and we cover that in the following two sections.

Graphical browsers
Most graphical browsers use a distinctive size and typeface for headings:

  • First-level headings (<h1>) are the largest (usually two or three font sizes larger than the default text size for paragraphs).
  • Sixth-level headings (<h6>) are the smallest and may be two or three font sizes smaller than the default paragraph text.

The following excerpt of HTML markup shows all six headings at work:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”http://www.w3.org/1999/xhtml”><head><meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” /><title>All About Blocks</title></head>

<body>
<h1>First-level heading</h1>
<h2>Second-level heading</h2>
<h3>Third-level heading</h3>
<h4>Fourth-level heading</h4>
<h5>Fifth-level heading</h5>
<h6>Sixth-level heading</h6>
</body>
</html>

Figure shows this HTML page as rendered in a browser.

You can use CSS to format such heading aspects as color, size, line height, and alignment.

By default, most browsers use Times New Roman fonts for all headings. The font size decreases as heading level increases. (Default sizes for first- through sixth-level headings are, respectively, 24, 18, 14, 12, 10, and 8.) You can override any of this formatting by using CSS.

Figure : Web browsers display headings in decreasing size from level one to level six.

Web browsers display headings in decreasing size from level one to level six.

Text browsers
Text-only browsers use different heading conventions than graphical browsers because text-only browsers display all content using a single size and font.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML 4 Topics