Coders' Guidebook
Tutorials
Web development
Android apps
Courses Search

How to add headings and paragraphs to your website

This tutorial will walk you through how to use headings and paragraphs to add text to your website.

Headings

Text can be displayed in a variety of ways. One method is to use headings. Headings are declared between opening <h1> and closing </h1> tags. For example, if you wanted to write a heading which says "My nature and wildlife blog" then you would type the following code: <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.

headings.PNG

Paragraphs

Paragraphs are written 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 sufficient by itself and does not require a closing tag.

break.png

Why some punctuation symbols may not display as text. Sometimes when writing 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 has its own identifier called 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 >>>