Basic HTML: Paragraphs and Headers

Text makes up the core content of any web site, and has lots of tags to enable us to display it exactly how we need it. In this tutorial you’ll learn how to present text in the simplest way using paragraphs and headers.

Paragraph Tags

Paragraph tags structure our paragraphs of text. They tell the browser where a paragraph begins and where it ends which visually separates it from our other content. This stops that “run-on” look that becomes impossible to read. Paragraph tags are one of the easiest to remember, with just the letter “p” inside the < and > symbols. Paragraph tags are closeable elements. Here is an example paragraph:

<p>This is an example paragraph. Here I have some content. Bla bla bla. I like pizza and chocolate and surfing the Internet!</p>

Multiple paragraphs are added in exactly the same way, with more paragraph tags:

<p>This is an example paragraph. Here I have some content. Bla bla bla. I like pizza and chocolate and surfing the Internet!</p>

<p>This is a second paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam vehicula pede mollis lacus. Suspendisse porttitor viverra odio. In fringilla pulvinar nisl. Nam eu elit at lacus vehicula fringilla. Donec vehicula euismod nisl. Aliquam vel nulla.</p>

Although paragraphs of text may provide content, nothing but text is boring and should be broken up with appropriate headers.

Header Tags

There are 6 levels of header tags, giving us 6 levels of header. This allows us to have a main header, sub-header, sub-sub-header and so on. Although we don’t need all headers, all pages should have at least one… otherwise how will people know what a page or its content is about? The first (and therefore biggest) header is “h1”, and we can create our title inside <h1> tags like so:

<h1>My First Header</h1>

If we wanted a sub-header further down the page, we’d then use <h2>, <h3> and so forth.

Make sure you have your index.htm file open that we created in Your First Web Page. In between the body tags, add your first header and a paragraph of content using the paragraph tags discussed above. A good example would be the introduction to your web page. Mine looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>

	</head>
	<body>

	<h1>Introduction</h1>
	<p>Welcome to my first web page :) My name is Jem. Here you'll find lots of information on my family and I.</p>
	
	</body>
</html>

We now have content in our first page! This page can now be uploaded to the Freewebs Single File Uploader as before, and your page should look a little something like this:

first web page

Checklist

Things you should now know:

  • Paragraphs of text go inside paragraph tags
  • There are six levels of headers
  • Header and paragraph tags are both closed tags

Speak Your Mind

*