Coders' Guidebook
Tutorials
Web development
Android apps
Search

How to add headings and paragraphs to your website

The two main ways to display text on your website are through using headings and paragraphs. Headings are primarily used to delineate different sections in the webpage, while paragraphs contain the main bodies of text. In this tutorial, we will discuss how to use both headings and paragraphs to add text to your website.

Headings

Headings distinguish the different sections of content on a webpage. They come in different sizes and can help the user to understand the structure of the webpage. To write a heading, you must insert the heading text between opening <h1> and closing </h1> tags. For example, if you wanted to write a heading that says "My nature and wildlife blog" then you would add the following code to the body element of the HTML document: <h1>My nature and wildlife blog</h1>

<!DOCTYPE html>
<html lang="en-GB">
<head>
  <title>Home</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
  <h1>My nature and wildlife blog</h1>
</body>
</html>

<h1>/</h1> are not the only heading tags. In fact, you can replace '1' with any other whole number up to '6'. <h1> is the largest heading and <h6> is the smallest. Oftentimes, you will use the different heading sizes to reflect the importance of the different sections. For example, you might use h1 tags for the main heading of the webpage and h2 and h3 heading tags as subheadings to break up the webpage's content.

headings.PNG

Paragraphs

Paragraphs contain the main bodies of text and are enclosed between opening <p> and closing </p> tags. An important thing to note when writing paragraphs in HTML is that white space in the code will often be ignored when the webpage is loaded. If you would like to create a gap between two lines of text, therefore, you must insert one or more <br> line break tags. <br> is an empty tag, which means it does not require a closing tag.

break.png

Why some punctuation symbols may not display as text. Sometimes when writing the text for your website you may notice certain punctuation symbols do not display properly. This is often because web browsers can mistake <, >, & and " symbols for HTML code. To avoid this issue, each punctuation symbol can also be identified by an entity. If you input an entity into a passage of text then the browser will display the punctuation symbol and not mistake it for code. Common entities include &quot; for ", &amp; for &, &lt; for < and &gt; for >. A full list of entities can be found here.

<<< Previous

Next >>>