Chapter 3 of 17 · HTML for Beginners — Complete Free Tutorial
Elements, Tags & Nesting
This chapter defines the three words you will read constantly — tag, element, and nesting — and shows the rules browsers use to make sense of your markup.
Tag vs. element: what is the difference?
- A tag is the label wrapped in angle brackets:
<p>or</p>. - An element is the complete package: the opening tag, the content, and the closing tag.
<!-- One element: opening tag + content + closing tag -->
<p>Bread costs ₹40.</p>Developers say "the paragraph element" when they mean the whole thing, and "the p tag" when they mean the brackets. In practice the words are used interchangeably — but now you know the precise difference.
Opening tags, closing tags, void elements
| Type | Syntax | Examples |
|---|---|---|
| Paired (normal) | <tag>content</tag> | <p>, <h1>, <strong>, <div> |
| Void (self-closing) | <tag> | <img>, <br>, <hr>, <meta> |
Void elements have no content, so they never get a closing tag. Writing <br></br> is unnecessary (and technically invalid). In XHTML-style code you may see <br /> — the slash is optional in HTML5.
Nesting rules
Elements can live inside other elements — this creates the document tree. The golden rule: close tags in the reverse order you opened them.
<!-- CORRECT: tags nest cleanly like Russian dolls -->
<article>
<h2>Weekend baking tips</h2>
<p>Use <strong>cold butter</strong> for flaky pastry.</p>
</article>
<!-- WRONG: </p> closes before </strong> ends -->
<p>Use <strong>cold butter.</p></strong>Browsers try to "repair" broken nesting automatically, but repair rules are unpredictable — one misplaced closing tag can swallow half your page. Write clean nesting from day one.
A deeper real-life example
A typical blog post card on a news website is pure nesting:
<article class="card">
<h3><a href="/recipes/focaccia">Rosemary focaccia in 5 steps</a></h3>
<p class="summary">A beginner-friendly recipe with a crispy crust.</p>
<footer>
<time datetime="2026-10-03">3 October 2026</time>
</footer>
</article>Notice how <a> sits inside the heading, and <time> sits inside the footer. Each element keeps its own meaning while forming a larger unit.
Block vs. inline elements
- Block elements start on a new line and take full width:
<p>,<div>,<h1>–<h6>,<ul>,<section>. - Inline elements flow inside text without breaking the line:
<a>,<strong>,<em>,<span>,<img>.
This affects layout, but remember: choose elements for meaning first. Use <span> or <div> only when no semantic element fits — we cover this deeply in Semantic HTML5.
Common mistakes
- Unclosed tags — always close, even for empty elements like
<p></p>. - Overlapping (not nested) tags —
<b><i>text</b></i>is invalid. - Typo in the tag name —
<headding>renders as plain invisible text because the browser does not recognise it. - Capitalising tags inconsistently — HTML is case-insensitive, but lowercase is the universal standard.
Best practices
- Indent every nesting level (2 or 4 spaces) so structure is visible at a glance.
- One element per line in markup-heavy sections.
- Validate early: paste your file into the W3C Validator (covered later in Validation & Debugging).
What's next?
Tags can carry extra information — links, images, IDs, classes. Learn how in HTML Attributes. Returning readers can also revisit document structure for the complete page skeleton.
Frequently Asked Questions
HTML (HyperText Markup Language) is the standard markup language that defines the structure and meaning of every web page. Learning HTML is the fastest way into web development: it is the foundation that CSS, JavaScript, and every framework build upon, and it directly affects SEO and accessibility.
Most beginners can build their first complete page in a day and become comfortable with the core tags within 1–2 weeks of daily practice. This 17-chapter series is designed to be completed in about 2–3 weeks at a relaxed pace, faster if you type out every example.
Only a plain text editor (VS Code is free and popular) and a web browser. No installation, no setup, no account — create a file called index.html, double-click it, and it opens in your browser.
HTML5 is the current generation of the HTML standard (published as the living standard by WHATWG). When people say "HTML5" they usually mean modern HTML: semantic elements like header, nav and article, native audio/video, canvas, and improved form input types — all covered in this tutorial.
No. HTML is a markup language — it describes content and structure but has no variables, loops, or conditionals. Those come with programming languages like JavaScript, which you would learn after HTML and CSS.
Right here: every chapter includes examples you can retype in your own index.html file, plus practice challenges. After this series, build small projects — a portfolio page, a recipe page, or a landing page for a local business — they exercise the same tags in real contexts.
Search engines crawl HTML first. Unique titles, a single clear h1, a logical heading hierarchy, descriptive alt text, valid markup, fast-loading responsive images, and a proper internal linking structure all come straight from HTML — see the HTML & SEO chapter for the full checklist.
Accessible HTML makes your site usable by everyone, including people who rely on screen readers or keyboards, and it is a legal requirement in many countries. The good news: proper labels, semantic elements, alt text, and keyboard-operable controls are mostly free HTML habits.
No — there are roughly 100 meaningful tags and you will naturally use about 30 of them regularly. Focus on understanding purpose and structure; editors and references (like MDN) handle the rest. This tutorial covers every tag beginners actually need.
CSS for visual design and layout, then JavaScript for interactivity, then a version control system (Git). With those three you can build complete websites; frameworks like React or Laravel Blade come after the fundamentals feel natural.