Elements and Tags

Introduction

HTML(Hypertext markup language) defines the structure and content of webpages, we use HTML elements to create all of the paragraphs, headings, lists, images, and links that make up a typical webpage. In this lesson, we will explore how HTML elements work.

Learning Outcomes

By the end of this lesson, you should be able to:

  • Explain what HTML Tags are
  • Explain what HTML elements are

Elements and Tags

Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags.

Opening tags tell the browser this is the start of an HTML element, they are comprised of a keyword enclosed in angle brackets <>. For example an opening paragraph tag looks like this: <p>.

Closing tags tell the browser where an element ends. They are almost the same as opening tags, the only difference is they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: </p>.

A full paragraph element looks like this:

Elements Diagram

You can think of elements as containers for content, the opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.

There are some HTML elements that do not have a closing tag. These are known as empty elements because they don’t wrap any content. We will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags.

HTML has a vast list of predefined tags you can use to create all kinds of different elements. It is important to use the correct tags for content as it can have a big impact on how your webpages are ranked in search engines and how accessible your sites are to users who rely on assistive technologies like screen readers to use the internet.

Using the correct elements for content is called semantic HTML, we will explore this much deeper later on in the curriculum.

Assignment

Additional Resources

This section contains helpful links to other content. It isn’t required, so consider it supplemental for if you need to dive deeper into something.

Knowledge Check

  • What is a HTML tag?
  • What are the three parts of a HTML element?
Improve this lesson on GitHub

Have a question?

Chat with our friendly Odin community in our Discord chatrooms!

Open Discord