Module 11: Introduction to HTML
Elements and attributes
🏠The everyday picture
A parcel with a label: the parcel is the thing, and the label adds details about it ("fragile", "deliver to flat 4B"). In HTML, the element is the parcel and attributes are its labels.
📘What it really is
-
An element usually has an opening tag, content and a closing tag:
<p>Hello</p>. The closing tag has a/. -
Some elements are empty and have no closing tag:
<br>,<img>,<meta>. -
Elements nest inside each other like boxes, and must close in the reverse order they opened:
<p>I'm <strong>learning</strong></p>is right;<p>I'm <strong>learning</p></strong>is broken. -
Attributes sit inside the opening tag and add information:
name="value". <html lang="en">: the page language;<a href="about.html">: where a link goes (Module 12);-
<img src="me.jpg" alt="Asha smiling">: which image, and a description of it. -
idandclassare attributes you can put on any element to name it, so CSS and JavaScript can find it later:<p class="intro">. -
Comments are notes for people, ignored by the browser:
<!-- contact section starts here -->.
🖱️Try it
Give your first paragraph class="intro". Add a comment above your <h2> sections explaining what they are.
Then deliberately break the nesting (swap two closing tags), save, and right-click → Inspect in the browser.
Notice how the browser guesses and repairs it. Fix it again.
✅Quick check
In <a href="contact.html">Contact us</a>, what's the element, the attribute and the content?
Show the answer
The element is a (a link), the attribute is href="contact.html", and the content is "Contact us".
Why is <p>Hi <em>there</p></em> a problem?
Show the answer
The elements close in the wrong order. Browsers guess how to fix it, and different guesses cause odd bugs.