HTML - Paragraphs and Headings

The most common element used inside content areas is that which holds paragraphs of text. Thanks to the fact that HTML coding is pretty intuitive, we use the p tag to hold paragraphs:

<div id=”primaryText”>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</div>

While printed paragraphs are typically indented to help readability, online paragraphs are more commonly separated by blank lines. By default, when the page is displayed, browsers automatically insert that blank line before and after each p element. However, this spacing is easy to adjust with a style sheet (and if you wanted to add indents to each of your paragraphs, that is also easily accomplished in a style sheet).

The second most common element used inside content areas is the heading element. There are six heading elements to identify six different levels of importance. These are similar to creating an outline in a word processing tool. The h1 tag specifies the most important headings on the page, whereas the h6 headings are the least important.

<div id=”primaryText”>
<h1>Most important heading</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<h2>Secondary heading</h2>
<p>Paragraph 3</p>
</div>

By default, when the page is displayed, browsers automatically insert a single line break before and after each heading element. This spacing is easy to adjust with a style sheet.