—HTML Series · Post 3: Elements, Tags & Attributes
🔤 Elements, Tags & Attributes
Three words that describe literally everything in HTML. Understand these and nothing in the language will ever surprise you again.
The Three Words That Explain All of HTML
Every single piece of HTML — from a one-line heading to a thousand-line webpage — is built from just three concepts: elements, tags, and attributes. That's it. That's the whole vocabulary. Once you understand how these three things work together, you can read any HTML document on the internet and know exactly what's going on.
Think of it this way: if HTML is a language, these are the nouns, verbs, and adjectives. Tags define what something is. Elements are the complete package. Attributes add extra detail. Master these three and you've cracked the grammar of the entire language.
Don't try to memorize every HTML tag and attribute that exists — there are over a hundred of them. Instead, understand the pattern. Once you get how tags, elements, and attributes work together, learning any new tag is just filling in a template you already know. Pattern recognition beats memorization every time.
Tags: The Labels
A tag is a keyword wrapped in angle brackets. It's the label you put on a piece of content to tell the browser what that content is. Most HTML tags come in pairs — an opening tag and a closing tag:
The opening tag <p> says "a paragraph starts here." The closing tag </p> says "the paragraph ends here." The forward slash / in the closing tag is what signals the end. That's the pattern for almost every tag in HTML: open, content, close.
<!-- Opening & closing tag pairs -->
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<strong>This is bold text</strong>
<a href="https://codherway.com">This is a link</a>One of the most common beginner bugs: forgetting the closing tag. If your paragraph text suddenly swallows your entire page, or your bold text never stops being bold, check for a missing </p> or </strong>. The browser won't always tell you — it'll just try to "fix" your mistake, usually in the worst possible way.
Elements: The Full Package
An element is the entire unit — the opening tag, the content inside it, and the closing tag, all together. When someone says "the paragraph element," they mean the whole thing:
The distinction matters because people use "tag" and "element" interchangeably all the time, and technically they're different things. A tag is just the opening or closing bracket part. An element is the complete sandwich — bread, filling, and all. In practice, most developers use these words loosely, but knowing the actual difference helps when you're reading documentation or debugging.
Elements can be nested inside each other. A <strong> element inside a <p> element makes one specific word bold within a paragraph. Nesting is how you build complex structures from simple pieces — it's HTML's superpower.
<!-- Nesting: elements inside elements -->
<p>I am learning <strong>HTML</strong> and it's <em>actually making sense</em>.</p>Self-Closing Elements
Not every element has content between an opening and closing tag. Some elements are self-closing — they stand alone because they don't wrap around text. They are the content.
<!-- Self-closing elements — no closing tag needed -->
<img src="photo.jpg" alt="A sunset over the lake" />
<br />
<input type="text" name="username" />
<hr />The <img /> element doesn't wrap around text — it is an image. The <br /> element is a line break — it doesn't have content, it just creates a break. The <input /> element creates a form field. The trailing /> is a convention to signal "this tag closes itself," though in modern HTML5 it's technically optional. Most developers still include it because it makes the code easier to read.
Quick way to remember which elements are self-closing: ask yourself, "does this element wrap around content?" If the answer is no — if the element is the content (like an image) or creates a structural effect (like a line break) — it's self-closing. If it wraps around words, it needs a closing tag.
Attributes: The Details
Attributes are the extra pieces of information you attach to a tag. They go inside the opening tag and follow a specific pattern: name="value". They never go in the closing tag. They never go in the content area. Always in the opening tag.
In that example, href and target are attributes. They tell the browser more about the link — where it goes and how it opens. The tag says what it is (a link). The attributes say how it works.
Think of attributes like settings on a machine. The tag creates the machine. The attributes configure it. A <button> tag creates a button. A type="submit" attribute tells it what kind of button it is. A disabled attribute turns it off.
<!-- Attributes add information to tags -->
<a href="https://codherway.com">Visit CodeHerWay</a>
<img src="logo.png" alt="CodeHerWay logo" />
<input type="email" name="user-email" placeholder="Enter your email" />
<div class="hero-section" id="top">
<h1>Welcome</h1>
</div>The 10 Attributes You'll Use Constantly
There are dozens of HTML attributes, but you'll use the same handful over and over. Here are the ten that matter most right now:
| Attribute | What It Does | Used On |
|---|---|---|
| class | Names an element for CSS styling. You can reuse the same class on multiple elements. | Any element |
| id | Gives an element a unique name. Only one element per page should have a given ID. | Any element |
| href | The URL destination for a link. Short for "hypertext reference." | <a> |
| src | The file path to an image, video, or script. Short for "source." | <img>, <script>, <video> |
| alt | Alternative text describing an image. Read by screen readers. Shown if image fails to load. | <img> |
| title | Shows a tooltip when the user hovers over an element. | Any element |
| target | Controls where a link opens. _blank opens in a new tab. | <a> |
| type | Defines the kind of input — text, email, password, submit, checkbox, etc. | <input>, <button> |
| name | The identifier for form data. This is the key that gets sent to the server. | <input>, <select>, <textarea> |
| value | The default value of a form field. Pre-fills the input. | <input>, <option> |
You don't need to memorize this table. Bookmark this page. The goal right now is to recognize these attributes when you see them in code, not to recall all ten from memory. Recognition comes first. Recall comes with practice. Every working developer looks things up — it's not a sign of weakness, it's part of the job.
class vs. id — The One Distinction That Trips Everyone Up
Both class and id let you name elements. The difference: a class is reusable — you can put the same class on a hundred different elements. An id must be unique — only one element per page can have a given ID. Think of class like a label that says "all shirts go in this drawer." Think of id like a name tag that says "this specific shirt."
<!-- class: reusable — apply to many elements -->
<p class="intro-text">First paragraph.</p>
<p class="intro-text">Second paragraph, same style.</p>
<!-- id: unique — only ONE element can have this -->
<section id="about">
<h2>About Me</h2>
</section>In practice, you'll use class about 90% of the time and id about 10%. Classes are the workhorse of CSS styling. IDs are mostly used for anchor links (jumping to a section) and JavaScript targeting. When in doubt, use a class.
When I first started writing HTML, I treated attributes like decorations — I'd throw in a class here and there when a tutorial told me to, but I had no idea why. I'd copy target="_blank" without understanding what it did. I'd leave alt empty on every image because "who reads that?"
Turns out: screen readers read that. Google reads that. And anyone on a slow connection who can't load your image reads that. Every empty alt="" I shipped was a silent "I don't care about the people using my website." I didn't mean it that way. But intent doesn't override impact.
Now I write alt text on every single image, I name my classes intentionally, and I actually read what attributes do before I use them. It takes five extra seconds and it makes your code accessible, professional, and yours — not something you copied without understanding.
🏆 Mini Build: Personal Profile Card
Build a simple profile card using everything you learned in this post. Your card should use tags, elements, and attributes intentionally.
Recap
Tags are the labels wrapped in angle brackets — they come in pairs (opening and closing) or stand alone (self-closing). Elements are the full package: the tags plus everything inside them. Attributes are the extra details that go inside opening tags using the name="value" pattern. Together, these three concepts are the entire grammar of HTML. Every tag you learn from here on out is just a new word in a language whose grammar you already understand.
Next up: text and content elements — headings, paragraphs, bold, italic, and all the ways HTML lets you structure written content.
