Tags, Elements and Attributes Without the Fog

HTML is made of elements. An element is usually an opening tag, some content, and a closing tag. Attributes sit inside the opening tag and add extra information.

<p class="note">Delivery takes 2 to 3 days.</p>

• <p> is the opening tag.
• class="note" is an attribute.
• Delivery takes 2 to 3 days. is the content.
• </p> is the closing tag.

The whole thing is one paragraph element.

Tags are not decoration

The tag name tells the browser what the content is. <h1> is a top heading. <p> is a paragraph. <a> is a link. Using the wrong tag and then styling it to look right still leaves the wrong meaning for screen readers and search engines.

Void elements have no closing tag and no content inside. Common ones:

<img src="logo.png" alt="Xtensyon logo">
<br>
<hr>
<meta charset="utf-8">
<input type="text" name="email">

You will see people write <br /> or <img ... />. In HTML5 both styles work. Pick one and stay consistent.

Attributes

Attributes are name="value" pairs in the opening tag.

<a href="https://xtensyon.com" title="Xtensyon home">Xtensyon</a>
<img src="products/rice.jpg" alt="5 kg sack of jasmine rice">

Rules that prevent silent bugs:

• Quote the value. href=https://xtensyon.com often still works; href="page with spaces.html" needs quotes.
• Don't invent attributes for styling. Use class or id, then CSS.
• id must be unique on the page. class can repeat.

Nesting and the one rule that breaks pages

Elements nest. They must close in reverse order of opening. Think of boxes inside boxes.

<!-- Correct -->
<p>Read the <strong>shipping policy</strong> before you order.</p>

<!-- Wrong: tags cross -->
<p>Read the <strong>shipping policy</p></strong>

Browsers try to repair bad nesting. The repair is not always what you meant. Validate by eye first: every open tag that needs a close has one, and nothing crosses.

A readable skeleton

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Order status</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Order status</h1>
  <p class="status">Packed and ready.</p>
</body>
</html>

• <!DOCTYPE html> tells the browser to use modern HTML mode.
• lang="en" helps screen readers and translation tools.
• charset="utf-8" keeps peso signs, ñ and curly quotes from turning into mojibake.

Common mistakes

• Forgetting the closing tag on a <div> that wraps half the page. Everything after it inherits styles you never intended.
• Using <b> or <i> when you mean importance or emphasis. Prefer <strong> and <em> when the meaning matters, not only the look.
• Copying attributes you don't understand (onclick, style, random data-*). Delete them until you need them.

What happens if you skip this

You will paste large chunks of HTML and change text by hunting. The first time a layout shifts because of one unclosed tag, you will not know where to look.

Open your index.html. Add a paragraph with a <strong> word inside it. Save. Reload. View Source (Ctrl+U). Does the nesting match what you typed?

Comments and what the browser ignores

<!-- Temporary: remove after the March sale -->
<p class="promo">Free shipping this week.</p>

Comments do not show on the page. They do ship to anyone who Views Source, so don't put secrets in them.

Boolean attributes

<input type="text" required disabled>

In HTML, the presence of required or disabled is enough. You will also see required="required". Both work in HTML5.