Decoding the Jargon: Tags, Elements, and Attributes Explained

Welcome to Day 2 of our HTML series!

Yesterday, we learned that HTML is the Skeleton of your website. It provides the rigid structure that holds everything else up. Without it, your site is just a shapeless blob of text and images.

But if you tried the “View Source” trick we suggested yesterday, you might still feel like you are looking at alien hieroglyphics. You see angle brackets < >, forward slashes /, and equal signs =. It looks messy, chaotic, and intimidating.

Today, we are going to decode that mess. We are going to learn the Grammar of HTML.

Just like the English language relies on nouns, verbs, and adjectives to form coherent sentences, HTML relies on three specific building blocks to form a web page:

1. Tags
2. Elements
3. Attributes

Once you understand these three concepts, you will never be intimidated by code again. You will look at a block of raw HTML and read it just like a sentence in a book. You will stop seeing “code” and start seeing “instructions.”

1. The Tag (The Instruction) 🏷️

A Tag is a command. It is a specific keyword wrapped in angle brackets (< >). It tells the web browser when to start doing something and when to stop.

Tags are the on/off switches of the web.

• The Opening Tag:<p>
  • Translation: “Browser, start a paragraph here. Everything that follows is standard text.”
• The Closing Tag:</p>
  • Translation: “Browser, stop the paragraph here. Return to normal.”

The Golden Rule: The closing tag always looks exactly like the opening tag, but with a forward slash (/) before the keyword.

The “Leaking” Effect (Why Closing Tags Matter)

What happens if you forget the closing tag?

Imagine you open a <b> (Bold) tag at the start of a sentence but forget the </b>.

The browser thinks the “Bold” instruction never ends. It will “leak” down the page, turning your footer, your sidebar, and your copyright notice bold. If you ever see a formatting error that swallows half your page, look for a missing closing tag.

2. The Element (The Whole Sandwich) 🍔

This is where beginners often get confused. “Tag” and “Element” are often used interchangeably in conversation, but technically, they are different things.

• Tag: Just the code bit (<h1> or </h1>). It is the bread.
• Element: The entire package—the opening tag, the content inside, and the closing tag. It is the whole sandwich.

Example:

<h1>Welcome to My Shop</h1>

• <h1> is the Opening Tag.
• Welcome to My Shop is the Content (Text Node).
• </h1> is the Closing Tag.
• The entire line <h1>Welcome to My Shop</h1> is the Element.

Why does this distinction matter?

When you use a visual page builder like GenerateBlocks or Elementor, you aren’t dragging “tags” onto the screen; you are dragging “elements.” You are moving the whole sandwich. If you delete an element, you delete the content inside it too.

3. The Attribute (The Adjective) 🎨

If HTML elements are the Nouns (“This is a Link”, “This is an Image”), then Attributes are the Adjectives.

Attributes provide extra information about an element. They tell the browser how to behave or where to go.

Crucially, attributes always live inside the Opening Tag, never the closing tag.

The Formula:

<tag attribute=”value”>Content</tag>

Let’s look at the most important attributes you will encounter as a business owner.

A. The href Attribute (The Destination)

This is used exclusively for Links (the Anchor tag <a>).

• Code: <a href="https://google.com">Click Here</a>
• Translation: “Create a link. The destination (href) equals Google. The clickable text to show the user is ‘Click Here’.”
• Note: href stands for Hypertext REFerence. Without it, a link is just blue text that goes nowhere.

B. The src Attribute (The Source)

This is used for Images (<img>).

• Code: <img src="logo.jpg" alt="My Company Logo">
• Translation: “Place an image here. The source (src) of the file is ‘logo.jpg’.”
• The Alt Attribute: Notice the alt="..." part? That is a second attribute. It tells Google what the image is (essential for the SEO we discussed in December).
• Note: Images are “Self-Closing” tags (or “Void Elements”). You can’t write text inside an image, so they don’t need a </img> closing tag.

C. The class and id Attributes (The Nametags)

These are the most common attributes you will see in WordPress. They are used to connect your HTML skeleton to your CSS skin.

• The Class: A group nametag.
  • Code: <p class="intro-text">Welcome back.</p>
  • Usage: You can have 50 different paragraphs all with class="intro-text". You tell CSS: “Make everything in the ‘intro-text’ group blue.”
• The ID: A unique barcode.
  • Code: <div id="header-logo">...</div>
  • Usage: There can be only one element on the page with id="header-logo". It is unique. IDs are often used for “Jump Links” (e.g., clicking “Contact” and jumping down to the #contact section).

The Concept of “Nesting” (Russian Dolls) 🪆

HTML isn’t just a flat list of tags one after another. Elements live inside other elements. This is called Nesting. It creates a family tree structure (Parent > Child).

Example: A Button inside a Link inside a Paragraph.

<div class="container">
    <p>
        Ready to start? <a href="/contact">Contact Us</a>
    </p>
</div>

The Rules of Nesting:

1. First In, Last Out: The tag you opened last must be closed first.
   • Correct: <b><i>Bold and Italic</i></b> (The Italic is inside the Bold).
   • Wrong: <b><i>Bold and Italic</b></i> (The tags are overlapping like crossed wires). This confuses the browser.
2. Indentation: You will notice in the example above that the <p> is moved to the right. This is called Indentation.
   • Does the computer care? No. You could write it all on one line.
   • Does the human care? Yes. Developers indent code to show the “Parent/Child” relationship visually. It helps you see that the link is inside the paragraph, which is inside the container div.

The “Missing Div” Nightmare

If your website layout suddenly breaks—for example, your sidebar falls to the bottom of the page or your footer disappears—it is almost always a Nesting Error.

You likely opened a <div> (a container box) but forgot to close it with a </div>. The browser thinks the sidebar is inside the main content box, rather than sitting next to it.

Quotes matter: The Syntax Traps 🪤

Computers are incredibly literal. They do exactly what you tell them, even if it’s wrong. Here are the three most common syntax errors beginners make when editing HTML widgets in WordPress.

1. The Missing Quote

Error: <a href=”https://google.com>Click Here</a>

The Fix: You missed the closing quote ” after .com.

The Result: The browser thinks the URL hasn’t finished yet. It assumes the rest of the paragraph, and maybe the rest of the page, is part of the link address. The whole page turns into one giant, broken blue link.

2. The Curly Quote (The Microsoft Word Virus)

Error: <a href=“https://google.com”>

The Fix: Look closely. Those quotes are curved (“smart quotes”). Code only understands straight, vertical quotes (“).

The Cause: This happens when you write code in Microsoft Word, Outlook, or Slack and then copy-paste it into WordPress. These programs “autocorrect” your quotes to make them look pretty. Never do this. Always use a plain text editor (Notepad) or the “Custom HTML” block in WordPress.

3. The Case Sensitivity

Fact: HTML is technically case-insensitive. <P> and <p> both work.

The Fix: Always use lowercase. It is the rigid industry standard. It is easier to read, cleaner, and crucially, it is required if you ever move into other languages like XHTML or React. Writing tags in CAPS looks like you are shouting in 1999.

Summary: Reading the Matrix

Let’s look at a real piece of code you might find in your WordPress text widget. Don’t panic—break it down using what we just learned.

<div class="call-to-action">
    <h2>Ready to start?</h2>
    <p>Call us on <strong>01234 56789</strong> or email us.</p>
    <a href="/contact" class="button">Get a Quote</a>
</div>

Can you read it now?

1. <div>: A box (container) opens. It has the nametag (class) “call-to-action”.
2. <h2>: A sub-heading starts and ends. Content: “Ready to start?”.
3. <p>: A paragraph opens.
4. <strong>: The phone number is wrapped in a “Strong” tag (which makes it bold). Note how it closes before the paragraph closes.
5. <a>: A link pointing to the /contact page. It has a class of “button” (so CSS can make it look like a button).
6. </div>: The container box closes here.

Congratulations. You just read code. You saw the structure behind the design.

📅 Coming Up in Week 1…

Now that you know the grammar (Tags and Attributes), we need to look at the document itself.

Tomorrow, we answer the question: “Where does the title in the Google tab come from?” and “Why can’t I see my analytics code on the page?”

Join us for The Invisible Box: Understanding <html>, <head>, and <body>, where we dissect the parts of the page you don’t see.