HTML Terminology: Tags, Elements, and Attributes

Namaste and welcome, future full-stack developers! In this lesson, we’re going to demystify the core vocabulary of HTML. Think of HTML as the skeleton of every webpage you visit. To build that skeleton effectively, we need to understand its fundamental building blocks. We’ll explore what tags, elements, and attributes are, and how they work together to give structure to your web content. Let’s dive in!

The Building Blocks of HTML

HTML isn’t a programming language; it’s a markup language. This means it uses a system of special keywords, or “markup,” to tell web browsers how to display content. These keywords are what we call tags, which then form elements, and can be further customized with attributes.

What are HTML Tags?

At its simplest, an HTML tag is a keyword enclosed in angle brackets, like <p> or <h1>. Tags are the instructions you give to the browser. They don’t appear on the webpage themselves but define how the content between them should be treated.

For example, <p> tells the browser, “Hey, this is a paragraph!” and <img> tells it, “Display an image here.”

Understanding HTML Elements

This is where many beginners get confused, but it’s crucial! An HTML element is made up of an opening tag, its closing tag (if it has one), and all the content in between. It represents a complete structural unit in an HTML document.

Consider this:

<p>This is a paragraph of text.</p>

Here:

• <p> is the opening tag.
• </p> is the closing tag. (Notice the forward slash!)
• This is a paragraph of text. is the content.
• The entire package <p>This is a paragraph of text.</p> is an HTML element.

So, while “tag” refers to the specific keyword in angle brackets, “element” refers to the complete structural unit, including tags and content.

Adding Detail with HTML Attributes

Sometimes, simply defining an element isn’t enough; you need to provide more information or modify its behavior. This is where attributes come in. Attributes are special keywords used inside the opening tag of an element to provide additional information about that element.

They are always specified in the format: name="value".

Let’s look at an image element:

<img src="my-image.jpg" alt="A beautiful landscape" width="300">

In this example, <img> is the tag. But what image should it display? How big should it be? What if the image doesn’t load?

• src="my-image.jpg" is an attribute. src is the attribute name, and "my-image.jpg" is its value, telling the browser where to find the image.
• alt="A beautiful landscape" is another attribute, providing alternative text for accessibility (e.g., for screen readers or if the image fails to load).
• width="300" sets the width of the image to 300 pixels.

Attributes are key to making your HTML elements dynamic and informative!

Types of HTML Tags

HTML tags generally fall into two categories based on whether they require a closing tag.

Paired Tags (Opening and Closing)

Most HTML tags are paired tags. This means they have both an opening tag and a corresponding closing tag. The content that the tag affects is placed between these two tags.

Examples:

• <p>...</p> (paragraph)
• <h1>...</h1> (heading level 1)
• <div>...</div> (division/container)
• <a>...</a> (anchor/link)

<h1>Welcome to My Page</h1>
<p>This is an example of a paired paragraph tag.</p>
<a href="https://fullstackdost.com">Visit FullStackDost</a>

Unpaired Tags (Self-Closing)

Some HTML tags do not enclose any content and therefore do not require a separate closing tag. These are often called unpaired tags, empty tags, or self-closing tags.

They typically represent something that is inserted into the document, rather than something that contains content.

Examples:

• <img> (image)
• <br> (line break)
• <hr> (horizontal rule/thematic break)
• <input> (form input field)

<p>This is some text.<br>And this is on a new line.</p>
<hr>
<img src="logo.png" alt="FullStackDost Logo">

While historically some self-closing tags were written with a trailing slash (e.g., <br />), in modern HTML5, it’s generally optional and often omitted for brevity (e.g., <br>).

Putting It All Together: A Simple HTML Structure

Let’s see how these terms fit into a basic HTML document structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Hello, FullStackDost!</h1>
    <p>This is a paragraph with some <strong>bold</strong> text.</p>
    <img src="sample.jpg" alt="A sample image" width="200">
    <hr>
</body>
</html>

In this snippet:

• <html>, <head>, <body>, <h1>, <p>, <strong> are all paired tags forming their respective elements.
• lang="en", charset="UTF-8", src="sample.jpg", alt="A sample image", width="200" are all attributes providing extra information.
• <meta>, <img>, <hr> are unpaired (self-closing) tags.

Practice Exercise: Identify and Create!

It’s your turn to apply what you’ve learned! Open your favorite text editor (like VS Code or Notepad++) and create a simple HTML file. Save it as my_terminology_page.html and then open it in your web browser.

1. Create an HTML document with the basic <!DOCTYPE html>, <html>, <head>, and <body> structure.
2. Inside the <head>, add a <title> element that says “My HTML Terminology Page”.
3. Inside the <body>:
   • Add an <h1> element with the text “Understanding HTML Basics”.
   • Add a <p> element explaining in your own words what an HTML element is.
   • Add another <p> element explaining what an HTML attribute is, and include an example of an image tag (<img>) with src and alt attributes. Use placeholder values for the attribute values, like src="placeholder.jpg".
   • Add a <hr> tag.
   • Add a <p> element with some text, and use a <br> tag to force a line break in the middle of the text.
4. Review your code. Can you identify all the paired tags, unpaired tags, elements, and attributes you’ve used?

Don’t worry if it’s not perfect the first time. The key is to practice and understand the distinctions!

Summary

Fantastic work! You’ve now grasped the essential terminology of HTML:

• Tags are the keywords in angle brackets (e.g., <p>).
• Elements are the complete structural units, including opening tag, content, and closing tag (e.g., <p>Hello</p>).
• Attributes provide additional information or modify the behavior of an element, specified as name="value" inside the opening tag (e.g., <img src="image.jpg">).
• Paired tags require both an opening and closing tag (e.g., <div>...</div>).
• Unpaired tags (or self-closing/empty tags) do not have a closing tag (e.g., <br>, <img>).

Understanding these terms is fundamental to writing correct and effective HTML. Keep practicing, and you’ll soon be structuring web content like a pro! Up next, we’ll start exploring some common HTML tags in detail. Stay curious!