HTML PROGRAMMING:HTML – Basic Tags
Mastering html – basic tags concepts and implementation.
Basic HTML tags are the most commonly used building blocks of a webpage. They help you define headings, paragraphs, line breaks, and content separators.
Understanding these tags properly is essential because you will use them on almost every web page you create.
Heading tags (<h1> to <h6>)
Heading tags define titles and subtitles on a page.
- <h1> represents the main heading of the page (usually used once).
- <h2> represents subheadings under <h1>.
- <h3> to <h6> represent deeper levels of subheadings.
Browsers automatically:
- Display headings in bold
- Increase font size for higher-level headings
- Add spacing above and below headings
Headings are important for:
- SEO: search engines use headings to understand page structure
- Accessibility: screen readers use headings to help users navigate content
Paragraph tag (<p>)
The <p> tag is used for normal text content.
Key points:
- Each paragraph should be wrapped inside its own <p> tag.
- Browsers automatically add spacing between paragraphs, improving readability.
Example:
<p>This is a paragraph.</p>
Line break tag (<br>)
The <br> tag inserts a line break without starting a new paragraph.
Important notes:
- <br> is an empty (void) tag.
- It should be used for line-based content like addresses, poems, or short messages.
- It should not be used repeatedly to create layout spacing.
Horizontal rule (<hr>)
The <hr> tag creates a horizontal divider between sections.
Key points:
- It visually separates content sections.
- It is also an empty tag.
- In modern HTML, <hr> represents a thematic break, not just a line.
Example use cases:
- Separating sections in articles
- Dividing header and footer content
Best practices
- Use heading tags in a logical order.
- Do not use headings just to increase font size.
- Avoid using multiple <br> tags for spacing.
- Use CSS for layout and spacing instead of HTML hacks.
Suggested image prompt
"Web page layout showing heading hierarchy (H1 to H3), paragraphs, a line break example, and a horizontal divider, each labeled with its HTML tag."
Interview-style questions from this topic
- What is the difference between <h1> and <h6>?
- Why should a page usually have only one <h1>?
- When is <br> appropriate and when should it be avoided?
- How is <hr> different from <br>?
- Why should headings not be used only for styling?
Hands-on Examples
Heading Tags Example
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>Main Page Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>
</body>
</html>This example demonstrates how headings should be used to represent the logical structure of content. <h1> defines the main topic, while <h2> and <h3> represent nested sections.