Headings & Paragraphs in HTML – Explained
1. Headings in HTML
- Headings define titles and sub-titles in a web page.
- HTML provides six levels of headings:
<h1>Main Heading</h1>
<h2>Subheading Level 2</h2>
<h3>Subheading Level 3</h3>
<h4>Subheading Level 4</h4>
<h5>Subheading Level 5</h5>
<h6>Subheading Level 6</h6>
Key Points:
<h1>is most important,<h6>is least important.- Used for content hierarchy (like a book’s chapter structure).
- Only one
<h1>is recommended per page (main title). - Helps SEO and accessibility tools understand page structure.
Example:
<h1>My Blog</h1>
<h2>Latest Articles</h2>
<h3>Technology</h3>
<p>AI is changing the world...</p>
<h3>Travel</h3>
<p>Exploring the mountains...</p>
2. Paragraphs in HTML
- A paragraph is represented by the
<p>tag. - Automatically adds space before and after the text.
<p>This is a paragraph of text in HTML.</p>
Features:
- Each
<p>starts on a new line. - Can contain text, inline elements (e.g.,
<a>,<strong>,<em>). - For a line break without starting a new paragraph, use
<br>.
Example with Paragraphs:
<p>HTML is the standard language for creating web pages.</p>
<p>It uses tags to structure content, such as headings, paragraphs, and images.</p>
3. Combining Headings & Paragraphs
<h1>Welcome to My Website</h1>
<p>This site contains tutorials on HTML, CSS, and JavaScript.</p>
<h2>HTML Basics</h2>
<p>HTML stands for HyperText Markup Language.</p>
4. Best Practices
- Use headings in logical order (
<h1>→<h2>→<h3>, etc.). - Avoid skipping heading levels for styling purposes.
- Don’t use headings just to make text bigger — use CSS for that.
