How to Control Text Blocks in HTML5

Blocks of text build the foundation of your web page. You use blocks of text to create such things as headings, paragraphs, and lists. You can break those blocks into smaller pieces to better guide readers through your content.

Block quotes

A block quote is a quotation, or an excerpt from a copyrighted source, that you set apart on a page. Use the <blockquote> element to enclose quotations:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Famous Quotations</title>
  </head>
  <body>
    <h1>An Inspiring Quote</h1>
    <p>When I need a little inspiration to remind me of why I spend my days
       in the classroom, I just remember what Lee Iococca said:</p>
    <blockquote>
      In a completely rational society, the best of us would be teachers
      and the rest of us would have to settle for something else.
    </blockquote>
  </body>
</html>

Most web browsers display block quote content with a slight left indent, as shown in in this figure.

image0.jpg

Preformatted text

Ordinarily, HTML ignores white space inside documents. That’s why a browser won’t display any of a block element’s

  • Hard returns.

  • Line breaks.

  • Large white spaces.

The following markup includes various hard returns, line breaks, and lots of spaces. The figure shows that the web browser ignores all of this.

image1.jpg
<p>This is a paragraph
   with a lot of white space
        thrown in for fun (and as a test of course).</p>

The preformatted text element (<pre>) instructs browsers to keep all white space intact while it displays your content. (As shown in the code sample.) Use the <pre> element in place of the <p> element to make the browser apply all your white space, as shown in the figure.

image2.jpg
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>White Space</title>
  </head>
  <body>
    <pre>This is a paragraph
                           with a lot of white space
                                  thrown in for fun (and as a test of course).
    </pre>
  </body>
</html>

You may want the browser to display white spaces in an HTML page where proper spacing is important, such as for

  • Code samples

  • Columnar data, numbers, or other format-sensitive text

  • Text tables

You could nest <pre> elements inside <blockquote> elements to carefully control how lines of quoted text appear on the page. Or better yet, forget about these tags and use CSS to position text blocks inside <div> elements.

Horizontal rules

Using a horizontal rule element (hr) lets you include solid straight lines called rules on your page.

The browser creates the rule based on the hr element, so users don’t wait for a graphic to download. A horizontal rule is a good option to

  • Break a page into logical sections.

  • Separate headers and footers from the rest of the page.

Formatting

When you include an <hr> element on your page, as in the following HTML, the browser replaces it with a line, as shown in the figure.

image3.jpg
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Horizontal Rules</title>
  </head>
  <body>
    <p>This is a paragraph followed by a horizontal rule.</p>
    <hr>
    <p>This is a paragraph preceded by a horizontal rule.</p>
  </body>
</html>

A horizontal rule always sits on a line by itself; you can’t add the <hr> element in the middle of a paragraph (or other block element) and expect the rule to appear in the middle of the block.

The following bit of HTML creates a horizontal rule that takes up 45 percent of the page width, is 4 pixels (px) high, is aligned to the center, and has shading turned off:

    <p>This is a paragraph followed by a horizontal rule.</p>
    <hr width="45%" size="4" align="center" noshade="noshade">
    <p>This is a paragraph preceded by a horizontal rule.</p>

The figure shows how adding attributes in the preceding example alters how a rule appears. (Note: These attributes are deprecated, and best replaced with CSS equivalents. Deprecated attributes are covered online, and the preceding HTML is not valid.)

image4.jpg
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com