Understanding Elements and Tags in HTML
Kickstart Your Career: Frontend Development for Absolute Beginners! | Lesson 3
Transcript
Welcome back to "Kickstart Your Career: Frontend Development for Absolute Beginners"! In this lesson, we're going to delve deeper into the fundamental building blocks of HTML: elements and tags.
What are HTML Elements and Tags?
HTML documents are made up of elements, which are the individual components that define the structure and content of a webpage. Each element is enclosed by opening and closing tags, which tell the browser how to interpret and display the content. There are some tags that are considered self-closing. We will learn more about those in a minute.
HTML Tags
Tags are the fundamental units of HTML syntax. They consist of angle brackets (< and >) and define the beginning and end of an element. Tags are always enclosed in angle brackets, and most tags come in pairs: an opening tag and a closing tag. You already saw an example of this in the last lesson when you created your first Paragraph elements in HTML!
<p>Remember me? I am the Paragraph element with opening and closing tags.</p>Self-Closing Tags
In HTML, there are certain elements that are considered "self-closing" or "void" elements, which means they don't require a closing tag. Instead, they end with a slash before the closing angle bracket. Here are some examples. We will learn more about these HTML elements in future lessons:
<img src="image.jpg" alt="Description" />
<input type="text" name="example" />
<br />
<hr />
<meta charset="UTF-8" />These elements do not have any content inside them, so they do not require a closing tag. This is why they are considered "self-closing."
/ at the end of the singular tag. For example, <hr />, which adds a horizontal rule to the page.HTML Elements
Elements, on the other hand, consist of tags and the content they enclose. They represent the building blocks of a webpage and define its structure. Elements can contain other elements, creating a hierarchical structure known as the Document Object Model (DOM). We will learn more about the DOM in future lessons. For now, just remember that your HTML Document is made up of a hierarchical structure of elements. These elements are usually made up of a pair of tags (opening and closing) and the content they contain (like the text within a set of <p></p> tags.
Wrapping Up
That's it for this lesson! In the next one, we will learn about some of the most important elements in HTML <html>, <head>, and <body>.