Although HTML is plain text, it needs structure so browsers understand it. That structure is provided by three things: tags, elements, and attributes.
HTML tags are keywords surrounded by angle brackets, like <html>. Most tags come in pairs — an opening tag and a closing tag:
<html> ... </html>
The closing tag has a forward slash before the tag name. Some tags are self-closing — they have no content and no closing tag:
<br>
<img src="photo.jpg" alt="A photo">
Here is a complete, standards-compliant HTML5 page:
<!DOCTYPE html>
<html>
<body>
<h1>Hello World</h1>
</body>
</html>
Breaking it down:
| Tag | Purpose |
|---|---|
<!DOCTYPE html> | Tells the browser this is an HTML5 document |
<html> | Root element — wraps everything |
<body> | The content visible in the browser window |
<h1> | A top-level heading |
Indenting nested tags is not required but makes the code much easier to read.
An element is the combination of an opening tag, its content, and its closing tag:
<tagname>content</tagname>
Elements can be nested — one element can contain others:
<body>
<h1>Hello World</h1>
</body>
Everything between <body> and </body> is part of the body element.
Attributes add extra information to a tag. They are always written inside the opening tag as name="value" pairs:
<a href="https://www.example.com">Visit My Website</a>
The href attribute tells the browser where the link goes. Some attributes — like id — can be applied to any element:
<h1 id="main-heading">Hello World</h1>
<p id="intro">This is a paragraph.</p>
The id uniquely identifies an element in the page. Other attributes are element-specific, like src on <img>:
<img src="photo.jpg" alt="A descriptive caption" />
You do not need to memorise every attribute. Your editor's auto-complete and the documentation will guide you when you need them.
The starter file has a bare <body>. Your tasks:
<h1> with the text "My First Page" and give it an id of "title".<p> tag below it with any text you like.<br> tag between two sentences inside the paragraph.Remember: a tag has angle brackets, e.g. <p>. An element is the opening tag + content + closing tag.