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.
By the end of this lesson, you should be able to:
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:
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:
A full paragraph element looks like this:
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 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.
This section contains helpful links to other content. It isn’t required, so consider it supplemental.
This section contains questions for you to check your understanding of this lesson. If you’re having trouble answering the questions below on your own, review the material above to find the answer.