The <h1> tag creates the main heading of a page. It's the most important heading and should appear only once per page. It defines the primary topic or title.

<h1>

The <h1> tag wraps the main title text. It's a block-level element that creates a large, bold heading. Browsers render it with the largest default font size among headings.

<h1>Welcome to My Website</h1>

Headings create a hierarchy: h1 is the main title, h2 is for major sections, h3 for subsections, and so on. You should use only one h1 per page for SEO and accessibility.

<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>

In the browser, the h1 appears as a large, bold heading. It helps screen readers understand page structure and search engines identify the main topic.

<h1>Welcome to My Website</h1>

Checkpoint: How many <h1> tags should you use per page?

<h1>Main Title</h1>

Correct! Use only one h1 per page. It represents the main topic and helps search engines and screen readers understand your page structure.

<h1>Welcome to My Website</h1>

Now it's your turn. Headings are essential for document structure, SEO, and accessibility. Complete the challenges below to master the H1 tag!

h1.html

1 / 7

📰

TutorThe <h1> tag creates the main heading of a page. It's the most important heading and should appear only once per page. It defines the primary topic or title.

⭐ 0 EXP

Heading Mastery

Unlock nodes by learning heading structure and semantics.

Concept 1: The H1 Tag

The <h1> tag creates the main heading of a page. It's the most important heading and should appear only once per page. It defines the primary topic or title.

System Check

How many <h1> tags should you use per page?

As many as neededOneTwo or threeNone

Community Holo-Net

Share Heading Structures

Created effective heading hierarchies? Share your code and best practices.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

HTML H1 Tag

Pascual Vila

Frontend Instructor

The <h1> tag creates the main heading of a page. It's the most important heading level and should appear only once per page to maintain proper document structure, SEO, and accessibility.

Main Heading

The <h1> element represents the primary topic or title of the page. It's a block-level element that browsers render with the largest default font size among all heading levels (h1-h6).

Heading Hierarchy

Headings create a document outline: <h1> is the main title, <h2> for major sections, <h3> for subsections, and so on. You should maintain a logical hierarchy without skipping levels (e.g., don't use h3 after h1 without h2).

SEO and Accessibility

Search engines use the h1 tag to understand the main topic of a page, making it crucial for SEO. Screen readers use headings to navigate pages, so proper heading structure improves accessibility. Use only one h1 per page for best results.

Best Practices

Always use only one <h1> per page.
Place it near the top of your content.
Make it descriptive and relevant to the page content.
Use CSS to style headings rather than choosing heading levels based on appearance.
Maintain a logical heading hierarchy throughout your document.

H1 Tag Glossary

<h1>: HTML element that creates the main heading of a page. Should appear only once per page for proper document structure, SEO, and accessibility.
Heading Hierarchy: The logical structure of headings from h1 (main title) through h6 (smallest subheading). Maintains document outline and improves navigation.
Block Element: An element that creates a new line and takes full width. <h1> is a block-level element.
Semantic HTML: HTML that uses elements for their meaning rather than appearance. Headings describe document structure, not just visual styling.
Document Outline: The hierarchical structure created by headings. Screen readers and search engines use this to understand page organization.

📖 INDEX