Goal
By the end of this lesson, you’ll understand what HTML actually does, be able to read a basic tag/element/attribute structure correctly, and understand why HTML is described as a “markup” language rather than a programming language.
Learn
HTML (HyperText Markup Language) describes the structure and meaning of content on a web page: what’s a heading, what’s a paragraph, what’s a list, what’s a link. It doesn’t describe how things look (that’s CSS) or how things behave interactively (that’s JavaScript) — HTML’s job is purely to say what each piece of content is.
The basic building block is an element, written using tags:
<p>This is a paragraph.</p>
Here, <p> is the opening tag, </p> is the closing tag (note the forward slash), and everything between them is the element’s content. Together, the opening tag, content, and closing tag make up the full element.
Elements can also carry attributes — extra information written inside the opening tag:
<a href="https://example.com">Visit Example</a>
Here, href is an attribute name, and "https://example.com" is its value, telling the browser where this link should actually go. Most elements can take several different attributes, each adding specific extra meaning or behavior.
Some elements are self-closing — they don’t wrap around content, so they have no separate closing tag:
<img src="photo.jpg" alt="A description">
An image doesn’t “contain” other content the way a paragraph does, so it doesn’t need an opening/closing pair.
This is why HTML is called a markup language, not a programming language: it doesn’t contain logic, loops, or calculations. It simply marks up plain content with meaning, which browsers, screen readers, and search engines then interpret to know how to treat each part.
Decision Task
Look at this line: <strong>Warning: read carefully</strong>. Before reading on, identify: what is the opening tag, what is the closing tag, and what is the element’s content?
Show Answer
Opening tag: <strong>. Closing tag: </strong> (note the forward slash). Content: Warning: read carefully. Together, all three parts make up the complete <strong> element.
Common Mistake
Beginners sometimes forget the forward slash in a closing tag, writing <p>text<p> instead of <p>text</p>. Browsers are often forgiving and will still render something, but this creates invalid HTML that can cause unpredictable structure problems as a page grows more complex, especially with nested elements.
Practice Questions
1. Write a complete <em> element wrapping the text “really important”.
Show Answer
<em>really important</em>
2. Is <img> a self-closing element or does it need a separate closing tag? Why does this make sense given what an image element actually does?
Show Answer
Self-closing — an image doesn’t wrap around other content the way a paragraph or heading does, so there’s nothing for a closing tag to “close around.”
3. Write an <a> element linking the text “Contact Us” to the URL “https://example.com/contact”.
Show Answer
<a href="https://example.com/contact">Contact Us</a>
4. True or False: HTML can perform calculations and logic, the same way a programming language can.
Show Answer
False — HTML only marks up content with structural meaning; it has no logic or calculations of its own. That’s the role of JavaScript.
5. Explain, in your own words, the difference between an element and an attribute.
Show Answer
An element is the complete structural unit (opening tag, content, closing tag) that defines what a piece of content is; an attribute is extra information added inside an opening tag that provides additional detail or behavior for that specific element, like a link’s destination.
Try It Yourself
Without looking back, write a complete paragraph element containing the text “Hello, world!” — then add a title attribute to it with the value “Greeting” (title is a real, valid attribute usable on almost any HTML element, showing as a tooltip on hover).
Show Answer
<p title="Greeting">Hello, world!</p> — the attribute goes inside the opening tag, after the element name, with no space issues around the equals sign.
Quick Check
1. What is the purpose of HTML, in one sentence?
Show Answer
To describe the structure and meaning of content on a web page.
2. What are the three parts of a typical (non-self-closing) HTML element?
Show Answer
Opening tag, content, closing tag.
3. What symbol distinguishes a closing tag from an opening tag?
Show Answer
A forward slash (/) right after the opening angle bracket.
4. Why is HTML called a “markup” language rather than a programming language?
Show Answer
Because it only marks up content with structural meaning — it has no logic, loops, or calculations of its own.
5. Give one example of a self-closing HTML element.
Show Answer
<img> (or <br>, <input>, <hr> — any element with no wrapped content).