Skip main navigation

Creating paragraphs and headers

Article discussing how to create paragraphs and headers in HTML.

Now that you have some exposure to some HTML elements, let’s pull back and focus on two basic building blocks of any website: paragraphs and headings. As you know, every element needs to be clearly defined in HTML. In terms of text, knowing how format paragraphs and structure a website with headings will allow you to create a basic website.

Let’s take a look at each of these basic building blocks, starting with paragraphs.

Creating paragraphs

The paragraph element is used to publish text on a web page. Recall that paragraphs are defined using <p> tags and should be closed using </p>. If you inspect the source of this paragraph, you will see that a <p> tag has been used to create it.

Take a look at how the paragraph element is used to contain the placeholder text in the following example:

Side-by-side comparison of a paragraph of lorem ipsum in html format (with p tags used for styling) and actual appearance in a browser. Click to enlarge

Again, notice the structure of the code – in other words, the <html>, <body>, and then <p> elements along with their corresponding closing tags. Also, did you see how the break between the paragraphs was created??

Technically, it is OK to omit the closing </p> tag because it is not required in order for the document to be valid. A browser just assumes it is closed when it encounters the next block element. Many web developers, including myself, prefer to close paragraphs and all elements for the sake of consistency and clarity. I recommend folks who are just learning markup do the same. – Jennifer N. Robbins, Learning Web Design (2018) [1 p72]

Creating headings

Headings help to organise the content within the <body> element, and they help to create a document outline. Just as an HTML page is hierarchically ordered, so too are sections of text.

Before we look at an example and consider a best practice for using headings, let’s first understand the ‘why’ of headings a little better. The document outline headings are largely valuable for two reasons: [1 p71]

  1. They allow screen readers to quickly process the information on a web page.
  2. They assist search engines to identify and classify content for users to find (with the algorithms giving more weight to higher-order headings).

For these reasons, as Jennifer N. Robbins, one of the first web designers notes, ’it is a best practice to start with the Level 1 heading (h1) and work down in numerical order, creating a logical document structure and outline’. [1 p72]

Now let’s consider an example to see how headings work. The following image shows how headings of different orders are formatted alongside how the text will appear on the page.

<img src="https://ugc.futurelearn.com/uploads/assets/93/05/9305873f-40ec-424f-8e2c-830f2dd6fc95.png" alt="Side-by-side comparison of headings in html format (with tags used for styling) and actual appearance in a browser (text styled using the

tag, down to the

tag).”>
Click to enlarge

We’ve already mentioned how valuable headings are to screen readers and search engines, but you can see how using headings could help visitors visually navigate around a page with ease. (Also, you may have realised that we left out a heading, as in HTML we use the code <h1></h1> to <h6></h6> to indicate header sizes from biggest to smallest.) Type out a similar code in JSFiddle and try switching up the headings in the code to see how it appears (i.e. moving <h1>, <h2>, <h3>, etc. around).

Over to you

Earlier in this activity, we shared resources relating to HTML best practices from Google and WHATWG. Use those and your own research to find a tip, best practice, or some piece of useful information related to headings and paragraphs in HTML. Share what you discovered or learned with your fellow learners in the comments.

References

  1. Robbins JN. Learning Web Design: A beginner’s guide to HTML, CSS, Javascript, and web graphics. 5th ed. Canada: O’Reilly Media Inc. 2018. p. 71-72.
This article is from the free online

Software Development Basics

Created by
FutureLearn - Learning For Life

Our purpose is to transform access to education.

We offer a diverse selection of courses from leading universities and cultural institutions from around the world. These are delivered one step at a time, and are accessible on mobile, tablet and desktop, so you can fit learning around your life.

We believe learning should be an enjoyable, social experience, so our courses offer the opportunity to discuss what you’re learning with others as you go, helping you make fresh discoveries and form new ideas.
You can unlock new opportunities with unlimited access to hundreds of online short courses for a year by subscribing to our Unlimited package. Build your knowledge with top universities and organisations.

Learn more about how FutureLearn is transforming access to education