Now that you've written your first HTML page, let's learn the "grammar" of the language. All of HTML is built on three core concepts: Tags, Elements, and Attributes. Understanding the difference is critical to becoming a proficient developer.
1. Tags: The Building Blocks
A tag is a marker used to define where a piece of content begins and ends. Tags are enclosed in angle brackets <>.
Opening Tag: Marks the beginning. Example: <p>
Closing Tag: Marks the end. It's the same as the opening tag but with a forward slash /. Example: </p>
2. Elements: The Complete Structure
An element is the entire unit, consisting of the opening tag, the content inside, and the closing tag.
Opening Tag + Content + Closing Tag = Element
So, while <p> is an opening tag, the entire line below is a complete paragraph element:
<p>This is the content of the paragraph.</p>Some elements, called "void elements," are self-contained and don't have a closing tag, like the image tag: <img src="image.jpg">.
3. Attributes: Providing Extra Information
Attributes provide additional information about an element and are always placed inside the opening tag. They come in name/value pairs like name="value".
Let's look at a hyperlink element, which uses the <a> tag. We need to tell the browser where the link should go. We do this with the href attribute.
<a href="https://projectworlds.com">Visit our site!</a>Let's break this down:
Element: The whole thing: <a href="https://projectworlds.com">Visit our site!</a>
Tags: <a> and </a>
Attribute: href="https://projectworlds.com"
Content: Visit our site!
Think of it like this: the element is the car, the tag is the model (a sedan), and the attributes are the features (color="red", engine="V8").
What's Next: You know the theory, but writing code in a plain text editor is slow. In the next lesson, we'll set up a professional code editor that will make your life much easier.