All topics › Unit 1 · HTML Fundamentals
Topic 3 · 3 of 43
HTML5 Fundamentals
All in one: the grammar of HTML, side by side
What this example compares
- Plain text vs markup: no tag vs
<h1>vs<p>vs<a>, and why<p>2 + 2</p>never shows 4 - HTML5 page parts:
<header>,<nav>,<main>,<article>,<section>,<aside>,<footer>vs plain<div> - HTML5 media and drawing:
<audio>vs<video>(with<source>) vs<svg>vs<canvas> - HTML5 form controls:
type="text","email","date","number","range","color"and built-in checking withrequired - The parts: tag vs content vs element vs attribute
- Paired vs void:
<p>,<textarea>vs<br>,<hr>,<img>,<input>,<wbr>(and<meta>,<link>in the head) - Writing a void element:
<br>vs<br />vs</br>, and the slash SVG requires - Nesting: properly nested vs overlapping vs a
<div>inside a<p> - Attributes:
class="my box"vsclass=my boxvs<P CLASS=Intro>vs</p class="x"> - Comments: the HTML comment vs
// note,/* note */,# note, and commenting out - Whitespace: ten spaces vs Enter vs
<br>vs<pre>vs - Character entities:
<,>,&,",©,®,™,₹vs typing the character - Standards vs quirks mode, browser vs validator: the doctype, a duplicate id, the validate–fix loop
- Worked example: the broken profile fragment vs the fixed one, and counting elements
Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.
Loading the example…
What you should see
You should see fourteen panels. Panel 1 shows the same words as plain text, a big heading and a paragraph, a link, and “2 + 2” left uncalculated. Panel 2 shows two mini pages that look identical: one built from semantic elements, one from divs. Panel 3 shows a sound player, a video, an orange circle and an empty dashed canvas, and panel 4 shows six different controls made by one <input> tag. In panel 7 the first three boxes all show Asha and Rahul on two lines, even the invalid </br>. In panel 8 the overlapping tags look exactly like the correct ones, and the last box shows an empty paragraph box the browser made for you. In panel 9 only the quoted class="my box" gets both the yellow and the border. In panel 10 the comment is hidden but // note, /* note */ and # note appear as text. In panel 12 the typed <p> splits its sentence in two. In panel 14 the broken fragment shows its last lines as one big heading. There is no JavaScript on this page, so nothing is printed to a Console.
Quick check: in panel 7, Asha<br>Rahul and Asha</br>Rahul look exactly the same. Which one is correct, and why does the other one still “work”?
<br> is correct. br is a void element, so it has nothing to close and </br> is invalid. It still shows a line break only because the browser quietly repairs it into a <br>. The validator does not forgive this: it reports the line as an error.