HTML Syntax & Structure

Tags, elements, attributes, nesting, void elements — the complete grammar of HTML explained so it actually sticks.

Tags: The Basic Unit

Everything in HTML revolves around tags. A tag is a keyword wrapped in angle brackets:

<p>

< — the less-than sign. Opens the tag.
p — the tag name. In this case, "paragraph".
> — the greater-than sign. Closes the tag.

Most tags come in pairs. An opening tag marks the start; a closing tag (with a forward slash) marks the end:

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

Tag names are always lowercase in modern HTML. Writing <P> works in browsers (they're forgiving) but is considered bad practice.

Elements: The Full Package

An element is the complete unit: opening tag + content + closing tag.

<h1>Welcome to My Site</h1>

<h1> — opening tag
Welcome to My Site — content (the part the visitor reads)
</h1> — closing tag

🗂️ Analogy: elements are like labelled folders

Think of each element as a folder with a label on the front and back. The label on the front says "START: Heading 1." The content is everything in the folder. The label on the back says "END: Heading 1." The browser reads the labels to understand what kind of content is inside.

Attributes: Extra Information on a Tag

Attributes are extra pieces of information you add to an opening tag. They provide details the browser needs that can't be expressed by the tag name alone.

<a href="https://www.example.com">Visit Example</a>

a — the tag name (anchor — creates a link)
href — the attribute name. "href" stands for Hypertext Reference — where the link goes.
= — separates the attribute name from its value
"https://www.example.com" — the attribute value, always in quotes
Visit Example — the visible link text the user sees and clicks

The general pattern is: attribute-name="attribute-value". Always in the opening tag, never the closing tag.

Multiple Attributes

An element can have multiple attributes. Separate them with spaces:

<img src="photo.jpg" alt="A sunset over the ocean" width="800" height="600">

src="photo.jpg" — the image file path
alt="A sunset over the ocean" — alternative text for screen readers and broken images
width="800" — the display width in pixels
height="600" — the display height in pixels

The order of attributes doesn't matter to the browser, but it's good to be consistent.

Void Elements: Tags With No Closing Tag

Some elements don't have a closing tag because they have no content — they are self-contained. These are called void elements (also called self-closing elements).

<br>
<hr>
<img src="photo.jpg" alt="Description">
<input type="text">
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">

The most common void elements you'll use:

Element	What it does
`<br>`	Line break — forces text to the next line
`<hr>`	Horizontal rule — a dividing line
`<img>`	Embeds an image
`<input>`	A form input field
`<meta>`	Metadata about the page
`<link>`	Links to an external resource (like CSS)

📌 You might see <br /> — is that right?

In older XHTML, void elements were written with a self-closing slash: <br />, <img />. In HTML5, the slash is optional and often omitted. Both <br> and <br /> are valid. You'll see both in tutorials — don't let it confuse you.

Nesting: Elements Inside Elements

Nesting is when you put one element inside another. This is fundamental to HTML — almost every real page uses deeply nested elements.

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

Here, three <li> (list item) elements are nested inside a <ul> (unordered list) element. The <ul> is the parent; the <li> elements are its children.

The Golden Rule of Nesting

Elements must be closed in the reverse order they were opened. Think of it like putting on and taking off clothes:

<!-- CORRECT: last opened, first closed -->
<p>This is <strong>very important</strong> text.</p>

<!-- WRONG: overlapping tags -->
<p>This is <strong>very important</p></strong>

In the wrong example, the <p> closes before the <strong> — they're overlapping, which is invalid. Always close the innermost element first.

🧅 Analogy: nesting is like onion layers

To peel an onion, you remove the outer layer last. To nest HTML, you close the innermost element first. If you opened html → body → p → strong, you close them strong → p → body → html. Inside out.

Indentation and Readability

HTML doesn't care about indentation — extra spaces and line breaks are collapsed to a single space in the rendered output. But you care about it, because it makes your code dramatically easier to read and debug.

The convention is to indent child elements by 2 or 4 spaces (or one Tab character) relative to their parent:

<!-- Easy to read -->
<body>
  <header>
    <h1>My Site</h1>
    <nav>
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
    </nav>
  </header>

  <main>
    <p>Welcome to my site.</p>
  </main>
</body>

<!-- The same code, no indentation: a nightmare to read -->
<body><header><h1>My Site</h1><nav><a href="index.html">Home</a><a href="about.html">About</a></nav></header><main><p>Welcome to my site.</p></main></body>

Both produce identical results in the browser. Only one of them you can maintain without going mad.

Block vs Inline Elements

Every HTML element has a default display behaviour. The two main types are block and inline.

Block elements start on a new line and take up the full available width:

<p>This paragraph is a block element.</p>
<p>So is this one. Each starts on its own line.</p>
<h1>Headings are block elements too.</h1>
<div>So is div.</div>

Inline elements flow within text — they don't break to a new line:

<p>This text has a <strong>bold word</strong> and an <em>italic word</em> inside it.</p>

Common block elements: <p>, <h1>–<h6>, <div>, <ul>, <li>, <header>, <main>, <section>.
Common inline elements: <a>, <strong>, <em>, <span>, <img>, <code>.

💡 CSS can override this

Block and inline are the default behaviours. CSS can change them completely — you can make an <a> behave like a block, or make a <div> behave inline. We'll cover this in the CSS course. For now, just know the defaults exist.

HTML Is Case-Insensitive (But Use Lowercase)

Technically, <P>, <p>, and <P> all mean the same thing to a browser. But the HTML5 standard and every professional style guide specifies lowercase. Use lowercase. Always. It's a convention that signals you know what you're doing.

Special Characters (HTML Entities)

Some characters have special meaning in HTML. What if you want to actually display a < on screen, rather than start a tag? You use an HTML entity — a special code that the browser replaces with the intended character:

Character	Entity	When to use it
`<`	`<`	Displaying a literal less-than sign
`>`	`>`	Displaying a literal greater-than sign
`&`	`&`	Displaying a literal ampersand
`"`	`"`	A quote inside an attribute value
non-breaking space	` `	A space that won't line-wrap (use sparingly)
`©`	`©`	Copyright symbol

<p>5 &lt; 10 and 10 &gt; 5 are both true.</p>
<!-- Renders as: 5 < 10 and 10 > 5 are both true. -->

Interview Questions

What is the difference between a block element and an inline element?

Block elements start on a new line and stretch to fill the full available width. Inline elements flow within text content and only take up as much space as their content needs.

What is a void element?

An element that has no content and therefore no closing tag. Examples include <br>, <img>, <input>, and <meta>.

What is an HTML entity and why are they needed?

An HTML entity is a code starting with & and ending with ; that represents a special character. They're needed when you want to display characters that would otherwise be interpreted as HTML — like <, which would start a tag without an entity.

✏️ Exercise

Write an HTML page that demonstrates all four types of things covered in this lesson: an element with attributes (<a href="...">), a void element (<img> or <br>), nested elements (a <ul> containing <li> items where each <li> contains a <strong> word), and at least one HTML entity. View it in your browser.

🧠 Quiz

1. Where do attributes go — in the opening tag or closing tag?

Always in the opening tag only. The closing tag has just the forward slash and tag name.

2. Which of these is correctly nested: (a) <p><strong>bold</p></strong> or (b) <p><strong>bold</strong></p>?

Option (b) is correct. The innermost element (<strong>) must be closed before the outer element (<p>).

3. What HTML entity would you use to display an ampersand (&) on screen?

&

🚀 Mini Challenge

Create an HTML page that shows a recipe. It should include: an <h1> for the recipe name, an <img> for a photo (use any URL from the internet as the src), an <h2> for "Ingredients", a <ul> with at least 4 <li> ingredient items, an <h2> for "Instructions", and an <ol> (ordered list) with at least 3 numbered steps. Pay attention to proper nesting and indentation.

Summary

Tags are keywords in angle brackets: <p>, </p>.
Elements are the full unit: opening tag + content + closing tag.
Attributes add extra info to opening tags: href="...", src="...", alt="...".
Void elements have no content and no closing tag: <br>, <img>.
Nesting means elements inside elements. Close the innermost element first.
Block elements start on new lines; inline elements flow within text.