Theory
The Giant Wall of Text
Imagine you type out a beautiful welcome note for your portfolio site in Notepad. You add clean line breaks, separate your bio into three paragraphs, and hit save. But when you open this file inside your browser, horror strikes: everything is smashed together into one massive, unreadable paragraph! The browser completely ignored all your Enters and spaces. How do we tell the browser where a heading ends and where a paragraph begins?
Theory
The Stick On Labels
Think of HTML tags like stick on labels you place on packages at a courier office. If you paste a 'Fragile' label on a box, the courier treats it with extra care. If you paste an 'Urgent' label, it moves faster. The box itself does not change, but the label alters how handlers interact with it. In web development, tags are structural labels that tell the browser exactly how to interpret and display your raw text content.
Theory
Tags, Elements, and Attributes
Let us define the core terms for your theory exam. A tag is a command enclosed in angle brackets, like <p>, that instructs the browser. An element is the complete bundle: the opening tag, the content text, and the closing tag, such as <p>Hello</p>. An attribute provides extra configuration inside the opening tag, written as a name and value pair like name="value". Every standard HTML5 structure contains these components arranged in a strict hierarchy.
Practical
The Essential HTML5 Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Portfolio</title>
</head>
<body>
<h1>Welcome to My Site</h1>
<p>This is my first webpage.</p>
</body>
</html>This example runs in Gri-Learn on the web, where you can edit it and see the output.
Theory
Anatomy of an Attribute
Let us dismantle a professional line of HTML code to see how attributes modify elements. Look at <html lang="en">.
First, <html> is the opening tag. Inside it, we add a space followed by lang. This is the attribute name, which stands for language. Next comes the equals sign and the attribute value "en" inside straight double quotes. This explicitly tells the browser that the entire document is written in English. The closing tag </html> sits at the very end.
Quiz
In a laboratory exam, a student writes `<p class=main>Welcome to my portfolio</p>`. Why might a strict university evaluator flag this specific line as poor practice?
- The paragraph tag must always be written in capital letters like `<P>`.
- The attribute value 'main' should ideally be wrapped inside double quotes to follow valid HTML standards cleanly.
- Attributes can only be placed inside closing tags, never inside opening tags.
- The word 'class' is a programming command and cannot be used inside structural HTML.
Show the answer
The attribute value 'main' should ideally be wrapped inside double quotes to follow valid HTML standards cleanly.
While web browsers are highly forgiving, university evaluation standards require attribute values to be wrapped in double quotes, like class="main". HTML5 tags are case insensitive, so lowercase is standard, and attributes must always reside exclusively within the opening tag.
Watch out
The Overlapping Tag Trap
A very common mistake that drains marks in descriptive exams is incorrect tag nesting. If you want a phrase to be both bold and italic, you might write <b><i>My Portfolio</b></i>. This is wrong! Tags must close in the exact reverse order they were opened. The correct format is <b><i>My Portfolio</i></b>. Think of it like brackets in algebra: you cannot close an outer bracket before closing the inner one.
Formula
Exam Template: The Five Essential Elements
When asked to write the baseline structure of an HTML5 document for a 5 mark question, always include these 5 essential items in this exact order:
<!DOCTYPE html>(Declares document type as HTML5)<html>(The root container element)<head>(Contains webpage metadata and title)<title>(Sets the text displayed on the browser tab)<body>(Holds all the visible content text and elements)
Think first
The Core Distinction Challenge
Before you tap, close your eyes and mentally explain the exact difference between an 'HTML Tag' and an 'HTML Element' to a fellow student. Can you phrase it cleanly?
Show the answer
An HTML tag is just the individual code bracket itself, like <p> or </p>. An HTML element is the entire complete package: it includes the opening tag, the inner content text, and the closing tag combined together as a single structural unit.
Summary
Key takeaways
- HTML tags act as structural labels that instruct the browser how to render raw text.
- An element represents the complete block from the opening tag to the closing tag.
- Attributes provide secondary configurations and live inside the opening tag as name value pairs.
- A standard HTML5 document is split into a metadata head section and a visible body section.
- Always nest tags cleanly in reverse order to prevent layout bugs and maintain exam marks.
- Memory Hook: Tags are the wrappers, attributes are the descriptions, and elements are the whole candy bars.