By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

Paragraphs and Headings in HTML

Tutorial on how to write text and headings in HTML

Edited: 2014-12-31 02:59

This Tutorial will teach you how to markup text, and how to change its appearance with CSS.

A Paragraph is a section of text, generally same rules apply as in books. However line breaks are more frequent in text on web pages, which increases readability when done right.

Headings are also sections of text, though smaller then Paragraphs. Newspapers commonly use "headlines", they often appear as bold text in a larger size then the rest of the article.

Paragraphs

In theory you could just write plain text to the browser, but in practice you should markup text with p elements and other relevant elements, don't wrap text in div elements alone. The div element has no meaning, and is mainly used for styling purposes.

Paragraphs are block elements, and can be placed inside other blocks, such as header, footer, div, and article. Etc. You can also place them directly in the body, which is what we will be doing in this Tutorial.

<p>This is a Paragraph</p>

To force a line break, we use the br tag, see below:

<p>This is a Paragraph<br>With a single line-break</p>

Actual page content should be placed in the body section of the page, below is a short example:

<!DOCTYPE html>
<html lang="en-US">

  <head>
    <title>Headers Example</title>
  </head>

  <body>
    <p>This is some textural content</p>
  </body>

</html>

Headings

Like we have headlines in books, newspapers, and magazines. Etc. We also got headlines on web pages. To create a headline, you should use the h1 to h6 elements. These elements are used to create a header level, where h1 has the highest level, h6 has the deepest level.

The number of the header doesn't matter, if the header is used together with the section element, in which case the section element determines the section level. You can read more about this in the tutorial titled: Semantic elements of HTML

Its important that you use headers correctly, to properly transfer "meaning" into your pages. The first header (h1), should be used for the main article header, where h2 can be used as subsections to h1, and h3 to h2. Etc.

If you have navigation columns on your page, then its best to use h1 for the headers on those, rather then using h2. This is to properly indicate relasionship between your sections, the navigation section has nothing to do with the main article.

A lot of web designers are using h2 for navigation columns, because they make the incorrect asumption, that you can't have multiple h1s on a page. Don't make the same mistake.

<!DOCTYPE html>
<html lang="en-US">

  <head>
    <title>Headers Example</title>
  </head>

  <body>
    <article>
    <h1>How to use h1 headings in HTML</h1>
    <p>This is how you use Headings in HTML. The article element is used for the main content, while the h1 is the first header on the page.</p>
    <h2>How to use h2 subheadings in HTML</h2>
    <p>This is a h2 subsection, which is directly raleted to the h1 section.</p>
    <h3>How to use h3 subheadings in HTML</h3>
    <p>This is a h3 subsection, which is directly raleted to the h2 section.</p>
    <h4>How to use h4 subheadings in HTML</h4>
    <p>This is a h4 subsection, which is directly raleted to the h2 section.</p>
    <h5>How to use h5 subheadings in HTML</h5>
    <p>This is a h5 subsection, which is directly raleted to the h2 section.</p>
    <h6>How to use h6 subheadings in HTML</h6>
    <p>This is a h6 subsection, which is directly raleted to the h2 section.</p>
    </article>
  </body>

</html>

The article element is used to markup the main content in your page, such as an Article, Blog post, etc.

Styling Paragraphs and Headings

You can change the appearance of Paragraphs using CSS, below is an example of how to apply a different font to Paragraphs on the page.

<!DOCTYPE html>
<html lang="en-US">

  <head>
    <title>Styling of Paragraphs</title>
    <style type="text/css">
      h1 {color:#0000FF;}
      p {font-size:2em;}
    </style>
  </head>

  <body>
    <h1>My first use of CSS</h1>
    <p>Using CSS to change the style of headings and paragraphs</p>
  </body>

</html>

Brugbart Vision!

Above applies some CSS in the head section, using the style element. This way to apply CSS is called Internal CSS, you should note that External CSS will be most suitable for most situations.

Past: An Introduction to CSS Next: Semantic elements of HTML