Beginning HTML5 and CSS3 For Dummies
Book image
Explore Book Buy On Amazon

Headings break a document into sections. Most books use headings and subheadings to divide each chapter into sections, for example, and you can do the same with your web page. Headings

  • Create an organizational structure.

  • Break up the text flow on the page.

  • Provide visual cues as to how pieces of content are grouped.

HTML includes six elements for different heading levels in documents:

  • is the most prominent heading (Heading 1)

  • is the least prominent heading (Heading 6)

Follow numerical order from lowest to highest as you use HTML heading levels. That is, don’t use a second-level heading until you use a first-level heading, don’t use a third-level heading until you use a second, and so on. If this doesn’t make sense to you, think about how the six heading styles work in Microsoft Word and you’ll have it.

Formatting

To create a heading, follow these steps:

  1. Add in the body of your document.

  2. Type the content for the heading.

  3. Add .

When used in this context, n means the number of the heading level you want to create. For example, to create a first-level heading, you would substitute the number 1 for n and would add

to your page, for a second-level heading, add

, and so forth.

Browser displays

Every browser has a different way of displaying heading levels.

Graphical browsers

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

  • First-level headings (

    ) are the largest (usually two or three font sizes larger than the default text size for paragraphs).

  • All headings use boldface type by default, and paragraph text uses plain (nonbold) type by default.

  • Sixth-level headings (

    ) are the smallest and may be two or three font sizes smaller than the default paragraph text.

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>All About Blocks: Headings 1-6</title>
  </head>
  <body>
    <h1>First-level heading</h1>
    <h2 id="tab3" >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>

The figure shows the headings in the HTML page as rendered in a browser.

image0.jpg

Use CSS to control how headings look, including color, size, spacing, and alignment.

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

Text browsers

Text-only browsers use heading conventions that are different from those of graphical browsers because text-only browsers use a single character size and font to display all content. Some good text-only browsers to consider include Lynx, ELinks, Cygwin, and MIRA.

About This Article

This article is from the book:

About the book authors:

Ed Tittel is a 30-year veteran of the technology industry with more than 140 computing books to his credit, including the bestselling HTML For Dummies.

Chris Minnick runs Minnick Web Services. He teaches, speaks, and consults on web-related topics and has contributed to numerous books, including WebKit For Dummies.

This article can be found in the category: