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.

Lesson overview

This section contains a general overview of topics that you will learn in this lesson.

• 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 that 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:

<p>some text content</p>

Let’s break this down:

• <p> is the opening tag.
• some text content represents content wrapped within the opening and closing tags.
• </p> is the closing tag.

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 elements often look like this: <br /> or <img/>, but some can also be used without the closing forward slash such as <br> or <img>. These are known as self-closing tags or 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 that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they 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 in much more depth later on in the curriculum.

Assignment

Knowledge check

This section contains questions for you to check your understanding of this lesson on your own. If you’re having trouble answering a question, click it and review the material it links to.

• What is an HTML tag?
• What are the three parts of an HTML element?

Additional resources

This section contains helpful links to related content. It isn’t required, so consider it supplemental.

• Don’t Fear the Internet’s video about HTML