HTML – Basic Tags
Chapter 2 • Beginner
Basic HTML tags are the building blocks you will use on almost every page. They help you define headings, paragraphs, line breaks, and separators.
Heading tags (<h1> to <h6>)
Headings are used for titles and subtitles.
- <h1> is the main heading of the page (used only once in most cases)
- <h2> is a sub-heading under <h1>
- <h3> is a sub-heading under <h2>, and so on till <h6>
Browsers automatically:
- Make headings bold
- Increase font size for higher-level headings
- Add space above and below headings
Headings also help with:
- SEO (search engines use them to understand page structure)
- Accessibility (screen readers announce headings to users)
Paragraph tag (<p>)
The <p> tag is used for regular text content.
- Each paragraph should be wrapped in its own <p> tag.
- Browsers add some space above and below each paragraph by default.
Example:
- <p>This is a paragraph.</p>
Line break tag (<br>)
Sometimes you want to break a line without starting a new paragraph. For that, you use the <br> tag.
- <br> is an empty tag (no closing tag).
- It simply moves the text that comes after it to the next line.
Use it carefully. For layout and spacing you should prefer CSS, not many <br> tags.
Horizontal line (<hr>)
The <hr> tag draws a horizontal line (a divider).
- It is used to visually separate sections of content.
- It is also an empty tag.
Example:
- <hr> between two sections of content.
Best practices
- Use <h1> to <h6> in a logical order (don’t jump randomly from <h1> to <h5> without reason).
- Use headings for structure, not just for making text big.
- Don’t use multiple <br> tags to create large gaps. Use CSS for spacing.
Suggested image prompt
"Simple web page mockup showing a big H1 title, smaller H2 and H3 subtitles, paragraphs of text, a line break example, and a horizontal line, each labeled with their HTML tags."
Interview-style questions from this topic
- What is the difference between <h1> and <h6>?
- Why is the <h1> tag important for SEO?
- When should you use a <p> tag, and when should you not?
- What is the purpose of the <br> tag? When is it appropriate to use it?
- How is <hr> different from <br>?
- Why should layout not depend on multiple <br> tags?
Hands-on Examples
Heading Tags Example
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>This example shows all six heading levels. <h1> is the most important and visually largest heading, while <h6> is the least important and smallest. Use heading levels to represent the logical structure of your content, like chapters and subtopics.