HTML Tags & Elements
Introduction
HTML (Hyper Text Markup Language) is what is used to define the structure of the websites and webpages that you regularly use. When learning HTML, the first thing you will be introduced to are tags and elements. This lesson will serve as a bare-bones introduction to the HTML tag, explore some elements, and start you on your HTML Journey!
Overview
By the end of this lesson, you should be able to:
- Understand the syntax of a HTML Tag
- Explain an HTML Tag
- Explain what an HTML Element is
What is a Tag?
As you start to learn and write HTML in the next few lessons, you will understand that the language is comprised of tags. An HTML tag is a code snippet that defines the structure and formatting of elements on a webpage. In HTML, we use these tags to define and display content. Take a look at the very basic structure of a tag below:
The visual above shows us the syntax for writing a simple tag.
To write a tag, we are going to need a pair of angle brackets <>. Inside the angle brackets is where we will put our element. In the above example, we are putting an h1 element in our tag. HTML offers us many of these elements which are used to build our websites. We will learn the different types of elements (including the mentioned h1 element) in the next few lessons, but for now just make sure you’re able to understand the syntax of a tag.
What you see above is the known as the opening tag of an element. To make a full element, we need an opening and closing tag as well. So how do we make the closing tag? Take a look:
Ok, let’s take a second and dissect everything in the picture.
As mentioned before, to make a full element in HTML, we need an opening and closing tag. The opening tag is denoted by <> , while the closing tag is denoted by </>. Notice how the closing tag has a / . This is so the browser knows when to start and stop the element. The content for the element should be placed in between the two tags, and the closing tag should always have a / inserted before the element.
Go ahead and open your code editor and put the below code snippet in your website:
<p>I am a paragraph element!</p>I am a paragraph element! show up! Try adding some more of these tags. What you just added to your website was the paragraph element. In the next few lessons, you’ll learn about the different types of elements and how to incorporate them into your website.Note:
- In HTML, some elements are known as “self–closing“ elements, meaning they do not require an opening and closing tag. These elements close themselves off with a
/inserted before the element name within the opening tag. We will learn more about these elements in the next few lessons.
- In HTML, some elements are known as “self–closing“ elements, meaning they do not require an opening and closing tag. These elements close themselves off with a
Elements
So what is an Element? An HTML element is a building block of an HTML document, providing instructions to a web browser on how to format, interpret, and display a specific part of the document. They can contain formatting instructions, semantic content, and other elements.
Above are some examples of elements in HTML. Any website you see is really just made up of hundreds upon hundreds of elements. They are like the building blocks of basic websites. Understanding what elements are and how they are used in HTML will help when we actually get to coding!
HTML Elements can create:
- Text
- Lists
- Tables
- Links & Images
- And much more
If you’re curious on all the different HTML elements, look here. Throughout the next few lessons, we will take a look at the most common elements in HTML and understand how to use them.
Find an issue/typo/error with our content? Please report it here