Tags & Elements

HTML is built from tags — special keywords wrapped in angle brackets. A tag tells the browser what type of content to display. Most tags come in pairs: an opening tag and a closing tag.

Opening and closing tags

<p>This is a paragraph.</p>
 ↑                        ↑
 opening tag          closing tag

Closing tags always start with a forward slash / before the tag name. Everything between the opening and closing tag is the element's content.

Self-closing tags

Some tags don't wrap any content — they stand alone. These are called self-closing or void elements:

<img src="photo.jpg" alt="A photo">
<br>
<hr>
<input type="text">

You don't need a closing tag for these elements because they don't contain inner content.

Nested elements

Elements can be placed inside other elements. This creates a parent-child relationship and is how you build complex page structures:

Block vs inline elements

• → Block elements take up the full width available and start on a new line. Examples: <div>, <p>, <h1>-<h6>, <ul>, <section>.
• → Inline elements only take up as much width as they need and do not start on a new line. Examples: <span>, <a>, <strong>, <em>, <img>.

Attributes

Tags can have attributes — extra information that modifies the element's behavior or provides metadata:

<a href="https://example.com">Click me</a>
<img src="photo.jpg" alt="A landscape">
<div class="container">...</div>
<p id="intro">...</p>

• → href — the URL a link points to
• → src — the source path for images, scripts, etc.
• → alt — alternative text for images (for accessibility)
• → class — a class name used for CSS styling or JavaScript
• → id — a unique identifier for the element

Quiz