A heading is like the title of a chapter in a book - big and bold, announcing what's coming - while a paragraph is the actual story text underneath it.
Headings (<h1> through <h6>) mark titles and section headers, biggest to smallest. Paragraphs (<p>) hold regular blocks of text. Together, they're how you organize a page's words instead of one giant unbroken wall of text.
<h1>Biggest heading</h1>
<h2>A smaller heading</h2>
<p>A paragraph of regular text.</p><h1>All About Dinosaurs</h1>
<p>Dinosaurs lived millions of years ago.</p>
<h2>My Favorite: T-Rex</h2>
<p>T-Rex had huge teeth and tiny arms.</p><h1> is the page's main title - the single biggest, most important heading. <h2> marks a smaller section title underneath it. Each <p> is its own separate paragraph of regular text.
<h1>My Soccer Team</h1>
<p>We practice every Saturday morning.</p>
<h2>Our Best Player</h2>
<p>Maya scored 12 goals this season!</p>Same pattern, totally different topic - one <h1> for the whole page's title, an <h2> for a smaller section underneath, and a <p> holding the actual text under each heading.
Mistake 1: using <h1> for every heading on the page - only the single main title should be <h1>; smaller section headings should step DOWN to <h2>, <h3>, and so on. Mistake 2: putting a whole paragraph of text directly inside <h1>/<h2> instead of a separate <p> - headings are for short titles, not long blocks of text. Mistake 3: assuming heading levels go on forever - <h1> through <h6> is the whole set; trying <h7> doesn't create an even smaller heading, it's just an unrecognized tag with no special styling at all.
In the app this lesson continues with the animated explanation, spoken aloud, and then the practice: Add a paragraph right after the heading that says "Welcome to my page!" The editor runs your child’s real code and checks the result, with their coding buddy reacting to what they wrote.
Try it free