Coders' Guidebook
Tutorials Dictionary

How to add headings and paragraphs to your website

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

Headings

Headings serve as titles for the different sections of content on a webpage. There are different sizes of headings and using thmem can help the user (and search engines) understand the webpage's structure. 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 constitute bodies of text. To define a paragraph, simply enclose the text between opening <p> and closing </p> tags. An important consideration 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, you can use an entity to represent a punctuation symbol. An entity is a short string of characters that web browsers interpret as a punctuation symbol. 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 >>>