HTML Basics – Headings, Paragraphs & Images | TipsInLearning

Lesson 3 of 22

HTML Basics

You understand what HTML is and you have an editor set up. Now it's time to actually write some. This lesson covers the tags you'll use on literally every webpage you ever build — headings, paragraphs, line breaks, dividers, and images.

8 min read

Beginner

HTML Tags

In This Lesson

8 min read Beginner

The 4 Tags You'll Always Use
HTML Headings
Horizontal Line
Paragraphs & Breaks
HTML Images
Common Mistakes
Summary
FAQ

Progress0/22

This lesson is where things start clicking. Up to now it's been theory — what HTML is, what editor to use. Here you actually write tags and see what they do in a browser. The four tags in this lesson will appear in every single HTML file you write from here on.

The 4 Tags You'll Use on Every Page

Inside the <body> of your HTML file, these are the tags you reach for first. Not because they're the only ones — HTML has dozens — but because a page without a heading, some paragraphs, and maybe an image isn't much of a page at all.

Headings

6 levels. Think of them like a document outline — h1 is the page title, h2 is a section, h3 is a subsection.

<p>

Paragraph

Wraps text into a paragraph block. Browsers automatically add spacing between paragraphs.

Breaks & Dividers

<br> breaks a line. <hr> draws a horizontal line to separate sections visually.

<img>

Images

Embeds an image from a file or URL. Needs two attributes: src (where the image is) and alt (what it shows).

HTML Headings

HTML gives you 6 heading levels. <h1> is the biggest and most important — use it for the main title of the page. Then use <h2> through <h6> for sections and subsections, in order, the way you'd outline a document.

One h1 per page — this matters for SEO. Google looks at your <h1> to understand what the page is about. Having multiple h1 tags confuses it. One h1 at the top, then h2 for each section below it — that's the correct pattern.

🖥 How heading sizes actually look in the browser

Heading 1 — Main page title

Heading 2 — Section title

Heading 3 — Subsection

Heading 4 — Sub-subsection

Heading 5 — Minor heading

Heading 6 — Smallest, least used

Notice how the browser automatically makes h1 the largest and reduces size as the number goes up. You don't need CSS to do this — it's the default browser styling.

HTML — All 6 heading levels

<body>
  <h1>TipsInLearning — HTML Course</h1>
  <h2>Chapter 1: The Basics</h2>
  <h3>What are Headings?</h3>
  <h4>How browsers display them</h4>
  <h5>A note on accessibility</h5>
  <h6>The smallest heading level</h6>
</body>

HTML Horizontal Line (<hr>)

The <hr> tag draws a horizontal line across the page. It's a self-closing tag — just write <hr> with no closing tag. Use it when you want a visible break between two sections of content.

HTML — Horizontal rule example

<h1>Section One</h1>
<p>This is the first section.</p>

<hr>  <!-- just this — no closing tag needed -->

<h2>Section Two</h2>
<p>This is the second section.</p>

Browser Output

Section One

This is the first section.

Section Two

This is the second section.

🌐 The <hr> tag draws a thin grey line — clean visual separation between sections

Paragraphs & Line Breaks

The <p> tag wraps a block of text as a paragraph. The browser adds spacing above and below automatically — you get that separation between paragraphs for free without any CSS.

The <br> tag is different. It breaks the current line and continues on the next one, but stays inside the same paragraph. Like pressing Enter once instead of starting a new paragraph.

HTML — Paragraphs and line breaks

<p>
  HTML stands for HyperText Markup Language.<br>
  CSS controls how pages look.<br>
  JavaScript makes them interactive.
</p>

<p>This second paragraph gets its own spacing block automatically.</p>

Browser Output

HTML stands for HyperText Markup Language.
CSS controls how pages look.
JavaScript makes them interactive.

This second paragraph gets its own spacing block automatically.

🌐 <br> breaks within the same paragraph — <p> creates a full new block with margin

HTML Images

The <img> tag embeds an image. Like <hr> and <br>, it's self-closing — no closing tag. It needs two attributes to work properly: src tells the browser where the image is, and alt provides a text description.

Don't skip the alt attribute. When an image fails to load, the alt text shows in its place. Screen readers read it aloud to visually impaired users. Google uses it to understand what's in your image. An <img> without alt is like a caption-less photo — the browser accepts it but you're missing important functionality.

HTML — Images with src and alt

<!-- Image file in same folder as your HTML -->
<img src="photo.jpg" alt="A photo of my project">

<!-- Image from the web, with set dimensions -->
<img src="https://tipsinlearning.blogspot.com/logo.png"
     alt="TipsInLearning logo"
     width="300"
     height="150">

<img> Attributes — What Each One Does

Attribute	What it does	Example
src	Path or URL of the image file. Without this, nothing shows.	src="photo.jpg"
alt	Text description shown when image can't load — also read by screen readers and indexed by Google.	alt="My photo"
width	Display width in pixels. If you set width only, height scales automatically.	width="300"
height	Display height in pixels. Set both width and height to avoid layout shift while page loads.	height="200"

Mistakes to Avoid in This Lesson

Using multiple <h1> tags on one page
Beginners sometimes use <h1> for everything that looks big. But <h1> has an SEO purpose — it tells Google what the page is about. Use it once, at the top. For everything else, use <h2>, <h3>, and so on in logical order.

Adding a closing tag to <br>, <hr>, and <img>
These are self-closing tags — they don't need a partner. Writing <br></br> or <img src="..."></img> won't break anything in most browsers, but it's wrong HTML and it tells Google your page has errors. Just write the single tag and move on.

Using <br> instead of <p> tags for paragraphs
A common beginner habit: writing all text in one block and hitting <br><br> between paragraphs to create spacing. This works visually but it's semantically wrong — search engines and screen readers see it as one big block of text, not separate paragraphs. Use <p> for actual paragraphs.

Quick Summary

1Use <h1> once per page for the main title. Use <h2>–<h6> for sections in order.

2<hr> draws a horizontal divider line. <br> breaks a line. Both are self-closing — no closing tag.

3Wrap actual paragraphs in <p> — don't fake them with double <br> tags.

4<img> always needs src (image location) and alt (description). Both attributes matter.

5The browser adds default spacing between headings and paragraphs — you don't need CSS for that yet.

Questions About HTML Basics

Things beginners get confused about when first using these tags:

Does the order of headings matter — can I skip from h1 to h4?

Visually the browser doesn't care. But for accessibility and SEO, skipping heading levels is bad practice. Screen readers navigate pages by heading structure — if you jump from h1 to h4, users relying on assistive technology get a confusing, broken outline. Go in order: h1, then h2, then h3. If you want something to look smaller, use CSS later — don't use a lower heading just for the visual size.

When should I use <br> and when should I use a new <p>?

A good rule: if two lines of text are part of the same thought — like lines in a poem, or an address — use <br>. If they're genuinely separate ideas that deserve their own block of space, use two <p> tags. The most common beginner mistake is using <br><br> everywhere instead of proper paragraph tags. Don't do that — it looks like a paragraph but isn't one.

My image isn't showing up — what's wrong?

Three things to check, in order. First: is the src path correct? If your image is in the same folder as your HTML file, src="photo.jpg" is correct. If it's in a folder called "images", it should be src="images/photo.jpg". Second: is the filename spelled exactly right, including the extension (.jpg vs .png vs .jpeg — these are different). Third: did you save the HTML file after adding the <img> tag and then refresh the browser?

Can I use <hr> to make decorative lines on my page?

Technically you can, but that's not really what it's for. <hr> is a semantic element — it signals a meaningful break in content, not just a visual one. For purely decorative lines, most developers use CSS borders on a <div> or similar element. That said, when you're learning, using <hr> for visual separation is completely fine. Just know the distinction exists.

Do I need to set width and height on every image?

Not strictly required, but recommended. Without width and height attributes, the browser doesn't know how much space to reserve for the image while it loads — so the rest of the page content jumps around as the image loads. This is called layout shift and Google's PageSpeed tools penalise it. Always set width and height on your images when you know the dimensions. If you want the image to be responsive (resize to fit the screen), you'll handle that with CSS later.

HTML Editors

Next Lesson

HTML Elements

HTML Basics Tutorial