Topic: HTML Basics

Opening and closing tags – HTML

Summary

<p>Text in HTML gets wrapped in opening and closing tags.</p>

Details

HTML code is made up of elements. Many elements (but not all) are made up of opening and closing tags.

The opening tag is made up of the element’s symbol wrapped in angle brackets, like this (this example is for a paragraph element):

<p>

The closing tag is made up of the element’s symbol preceded by a forward slash and wrapped in angle brackets, like this:

</p>

The text you want to display on your web page is placed between the opening and closing tags, like this:

<p>Text goes between the opening and closing brackets.</p>

By default, browsers will render the text differently depending on which element is being used. Here are some examples of different elements you can use to wrap text:

<h1>This text will be rendered as big and bold in the browser.</h1>

<p>This text will be rendered in a normal font size.</p>

<small>This text will be rendered in a small font size.</small>

VS Code Tip

In VS Code, the closing tag is automatically inserted for you after you type the opening tag.

You can also use an Emmet shortcut to generate both tags. You can simply type the symbol of the element and then press Enter or Tab to automatically create the opening and closing tags for the element. For example, if you type p and then press Enter or Tab, VS Code will insert <p></p> in your file.

Lastly, VS Code will offer suggestions as you type below your cursor. For example, if you type the letter h, you will see a menu pop up with several suggestions that start with the letter h, such as h1, h2, h3, and more. You can use the arrow keys to select the one you want and then press Enter or Tab to generate the tags for that option. You can also use your mouse to click on the option you want.

Demo

References

HTML basics on MDN