Headings and Paragraphs
These two tags make up the majority of text on the web. Almost every page you have ever read is mostly headings and paragraphs.
Headings — <h1> to <h6>
HTML gives you six levels of heading. <h1> is the biggest. <h6> is the smallest.
<h1>This is the biggest heading</h1>
<h2>A little smaller</h2>
<h3>Smaller still</h3>
<h4>Getting quite small</h4>
<h5>Very small</h5>
<h6>The smallest heading</h6>
Add all six to your first.html and see how they look. The difference in size is obvious.
How to use headings properly
Think of headings like the outline of a document:
<h1>— the main title of the page. Usually just one per page.<h2>— section headings<h3>— sub-sections under those- And so on
A page for a Python project might look like this:
<h1>My Python Calculator</h1>
<h2>What it does</h2>
<h2>How to use it</h2>
<h2>What I learned</h2>
Paragraphs — <p>
Any block of normal text goes in a <p> tag. Each <p> is its own separate paragraph — the browser automatically adds space between them.
<p>Python was the first language I learned. It runs on the backend.</p>
<p>Now I am learning HTML, which builds the frontend.</p>
Those two lines become two visually separated paragraphs in the browser — no extra spacing needed from you.
Putting them together
Here is a proper page layout using both:
<h1>My Frontend Journey</h1>
<h2>Where I started</h2>
<p>I spent several months learning Python. I built small programs, learned about variables, functions, and loops.</p>
<h2>What I am doing now</h2>
<p>I am now learning HTML so I can build real webpages. The plan is to eventually connect a Python backend to a proper frontend.</p>
Copy that into your first.html, save, and refresh. It will look like a real article.
Blank lines in your HTML do not matter
You can add empty lines between your tags to make the code easier to read — the browser ignores them completely. Only the tags affect what appears on screen.
Challenge
Build a small "About Me" page using only headings and paragraphs:
- One
<h1>with your name - At least two
<h2>sections — for example: "What I Know" and "What I'm Learning" - A
<p>under each<h2>with a sentence or two
Save and open it in your browser. You have just built a real About Me page.