In this tutorial we will look at some HTML tags that you can use to place text inside your webpage. All of these tags are used in the <body> section of the webpage. The following HTML tags (also known as elements) are discussed in this tutorial:
- The <p> tag is for paragraphs
- The <br/> tag is for line breaks
- The <h1> to <h6> tags are used for different size headings
Watch the video below or scroll down to read the instructions on how to create paragraphs, line breaks, and headings.
The paragraph tag
The first tag we will use is the <p> tag to create a paragraph. Paragraph text goes between the <p> and </p> tags. Paragraphs are separated by a space.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Paragraph example</title> </head> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
The HTML code above would tell you web browser to display two paragraphs like this:
The line break tag
To put text in your webpage you don’t even need to use a <p> tag. You can actually just type the text straight in. However, if you add new lines for text inside your HTML document, it won’t actually show a new line in the web browser – all your text will be on one line. If you want to create a new line, then use the line break <br/> tag. This tag will create a new line where the text will continue on.
Use the code below to see how the <br/> tag adds a new line. Two things to note: The <br/> tag is a single tag so it does not require an opening and close tag combination. The <br/> tag does not add spacing between lines like the paragraph tag does.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Line break example</title> </head> <body> This is a line of text.<br/>This is another line of text. </body> </html>
You can see the difference between using line breaks and paragraphs below. Note that there is no spacing between the text that uses a line break, but there is space between the paragraphs.
The heading tags
There are a number of different tags you can use to create a heading because there are a number of different heading sizes. The largest heading size tag is <h1> and the smallest is <h6>. For example, if you want to create a large heading then you would place the text inside the <h1> and </h1> tags.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Headings examples</title> </head> <body> <h1>This is the largest heading</h1> <h2>This is a large heading <h3>This is a medium heading</h3> <h4>This is a small heading</h4> <h5>This is a smaller heading</h5> <h6>This is the smallest heading</h6> </body> </html>
This is what the different size headings would look like: