HTML ā Your First Webpage
beginner15 XP
Headings, Paragraphs & Text Formatting
Make your text bold, italic and organised with headings ā just like a real blog or news website!
Headings & Text ā Making Your Content Look Great! š°
Every newspaper, blog and website organises its text with headings and paragraphs. HTML gives you the exact same tools!
Headings: h1 to h6
HTML has 6 levels of headings ā from huge (h1) to tiny (h6):
HTML
<h1>I'm the biggest heading! (Page title)</h1>
<h2>I'm a section heading</h2>
<h3>I'm a sub-section heading</h3>
<h4>Getting smaller...</h4>
<h5>Even smaller</h5>
<h6>I'm the tiniest heading</h6>š Rule: Use only ONE <h1> per page ā it's the main title, like the headline on a newspaper front page!
Paragraphs
HTML
<p>This is a paragraph. Browsers automatically add
some space above and below paragraphs, making your
text easier to read.</p>
<p>This is a second paragraph. Notice the gap between them!</p>Making Text Bold & Italic
HTML
<p>Python is a <strong>really popular</strong> language.</p>
<p>The word <em>emphasis</em> is in italics.</p>
<p>You can <strong><em>combine both!</em></strong></p>| Tag | Effect | Example |
|-----|--------|---------|
| <strong> | Bold | Important words |
| <em> | Italic | Emphasis or titles |
| <br> | Line break | New line (no closing tag!) |
Line Breaks
HTML
<p>Roses are red,<br>
Violets are blue,<br>
HTML is awesome,<br>
And so are you! š¹</p>š Build a Mini Blog Post!
HTML
<!DOCTYPE html>
<html>
<head><title>My First Blog</title></head>
<body>
<h1>My Favourite Game š®</h1>
<p>My favourite game is <strong>Minecraft</strong>.</p>
<h2>Why I Love It</h2>
<p>You can build <em>anything</em> you imagine!</p>
</body>
</html>Save this and open it in a browser ā you've got a real blog post! š
Quick check
01/3
How many h1 headings should a webpage normally have?