HTML / HTML Headings and Paragraphs
Using Headings in HTML
This tutorial covers the correct usage of HTML headings, from <h1> to <h6>. You'll learn how to structure your content effectively and make it more accessible.
Section overview
5 resourcesCovers the use of headings and paragraphs to organize content effectively.
1. Introduction
This tutorial is designed to provide clear instructions on how to properly use HTML headings. HTML headings are an essential part of structuring your web content, making it easier for both users and search engines to understand the content on your page.
By the end of this tutorial, you'll have a solid understanding of:
- How to use HTML headings from
<h1>to<h6> - The importance of correct heading structure for accessibility and SEO
- Best practices for using HTML headings
Prerequisites: Basic understanding of HTML
2. Step-by-Step Guide
HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading, while <h6> defines the least important.
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
...
<h6>This is a Heading 6</h6>
Best practices and tips
- Use headings to structure your content.
- Each page should have one
<h1>tag, which is usually the title of the page or post. - Subsections should be defined with
<h2>, sub-subsections with<h3>, and so on. - Do not skip heading levels (i.e., from
<h1>directly to<h3>), as this can confuse users and search engines.
3. Code Examples
Example 1: Basic Heading Structure
<!DOCTYPE html>
<html>
<body>
<h1>Page Title</h1> <!-- This is the main heading of the page -->
<h2>Section 1</h2> <!-- This is a subsection -->
<h3>Subsection 1.1</h3> <!-- This is a sub-subsection -->
<p>Some text here...</p>
<h2>Section 2</h2> <!-- Another subsection -->
<p>Some text here...</p>
</body>
</html>
In this example, "Page Title" is the main heading of the page. "Section 1" and "Section 2" are subsections, and "Subsection 1.1" is a sub-subsection under "Section 1".
Example 2: Incorrect Heading Usage
<!DOCTYPE html>
<html>
<body>
<h1>Page Title</h1>
<h3>Section 1</h3> <!-- Incorrect - skipped heading level -->
<p>Some text here...</p>
<h2>Section 2</h2> <!-- Incorrect - inconsistent heading level -->
<p>Some text here...</p>
</body>
</html>
In this example, heading levels are skipped and used inconsistently, which can cause confusion.
4. Summary
In this tutorial, we have learned how to use HTML headings correctly. You now understand that headings are not just for styling text but play a crucial role in structuring your content and making it accessible and SEO-friendly.
For further learning, you may want to explore more about HTML content structuring and SEO best practices.
5. Practice Exercises
Exercise 1: Create a simple HTML page with a title and three sections, each with a title and some text.
Exercise 2: Create an HTML page with nested subsections. Use at least three different heading levels.
Exercise 3: Review an existing HTML page and identify any issues with the heading structure. Rewrite the headings to correct the issues.
For each exercise, remember the best practices: use only one <h1> per page, don't skip heading levels, and use headings to structure your content. Continue practicing to become more comfortable with these concepts.
Need Help Implementing This?
We build custom systems, plugins, and scalable infrastructure.
Related topics
Keep learning with adjacent tracks.
Popular tools
Helpful utilities for quick tasks.
Latest articles
Fresh insights from the CodiWiki team.
AI in Drug Discovery: Accelerating Medical Breakthroughs
In the rapidly evolving landscape of healthcare and pharmaceuticals, Artificial Intelligence (AI) in drug dis…
Read articleAI in Retail: Personalized Shopping and Inventory Management
In the rapidly evolving retail landscape, the integration of Artificial Intelligence (AI) is revolutionizing …
Read articleAI in Public Safety: Predictive Policing and Crime Prevention
In the realm of public safety, the integration of Artificial Intelligence (AI) stands as a beacon of innovati…
Read articleAI in Mental Health: Assisting with Therapy and Diagnostics
In the realm of mental health, the integration of Artificial Intelligence (AI) stands as a beacon of hope and…
Read articleAI in Legal Compliance: Ensuring Regulatory Adherence
In an era where technology continually reshapes the boundaries of industries, Artificial Intelligence (AI) in…
Read article