Creating paragraphs and headers
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:
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]
- They allow screen readers to quickly process the information on a web page.
- 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
- 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.
Reach your personal and professional goals
Unlock access to hundreds of expert online courses and degrees from top universities and educators to gain accredited qualifications and professional CV-building certificates.
Join over 18 million learners to launch, switch or build upon your career, all at your own pace, across a wide range of topic areas.
