HTML Headings | HTML H1 Tag, H2 Tag - Tech Altum Tutorial

Trang chủ » H1 Vs H2 Html » HTML Headings | HTML H1 Tag, H2 Tag - Tech Altum Tutorial

Có thể bạn quan tâm

  • ← HTML Text
  • Block & Inline Elements →
HTML Tutorial rating by Jasmine ⭑ ⭑ ⭑ ⭑ ⭑ Average rating: 5.0, based on 69 reviews
  1. Home
  2. Frontend
  3. HTML
  4. HTML Headings

Heading Elements h1 - h6

HTML includes six heading elements. These headings are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.

Heading elements are used to write headings on a webpage, whereas the <p> tag is for plain text. All headings are bold and block-level elements.

The font size of headings gradually decreases from <h1> to <h6>. By default, <h1> is the largest (2em), <h2> is 1.5em, <h3> is 1.17em, <h4> is the same as a paragraph (1em), and <h5> (0.83em) and <h6> (0.67em) are smaller.

Why are headings important? Headings provide structure to your content, making it easier for readers to scan and understand. For search engines, proper heading hierarchy helps in indexing and ranking your pages. Screen readers use headings to navigate content, improving accessibility for users with disabilities.

  • HTML Headings
  • H1 Tag
  • H2 Tag
  • How to use heading in html

Headings in Html

  1. Heading 1 ( <h1>)
  2. Heading 2 ( <h2>)
  3. Heading 3 ( <h3>)
  4. Heading 4 ( <h4>)
  5. Heading 5 ( <h5>)
  6. Heading 6 ( <h6>)

Headings Example with code

How to write headings in HTML from h1 to h6, with a code example.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<h1> Heading 1 </h1> <h2> Heading 2 </h2> <h3> Heading 3 </h3> <h4> Heading 4 </h4> <h5> Heading 5 </h5> <h6> Heading 6 </h6>

HTML h1 tag <h1>

The H1 tag or <h1> is the main heading or level-one heading of a webpage. Search engines like Google, Yahoo, and Bing give maximum priority to the h1 element. As per SEO best practices, the h1 tag should be used only once per webpage. The default font size of an h1 element is 2em, and it's bold.

Heading 1

<h1> Heading 1 </h1>

Rules for h1 Tag

  1. Use proper headings. Do not use headings just to make text bold or large.
  2. Always start with <h1>, followed by <h2>, and so on, maintaining a logical hierarchy.
  3. Do not repeat the <h1> tag on the same page.
  4. Include relevant keywords in your h1 for better SEO, but keep it natural and readable.
  5. Ensure h1 is descriptive and reflects the main topic of the page.

HTML h2 tag <h2>

H2 tag or <h2> is the sub heading of h1 element. It is recommended to use headings in proper sequence for better search results and to avoid confusion.

Heading 2

<h2> Heading 2 </h2>

Correct Way to use h2

The <h2> tag is always used after an <h1>. The number of <h2> tags on a webpage can vary.

Heading 1

Heading 2

<h1> Heading 1 </h1> <h2> Heading 2 </h2>

HTML Headings Example

In the example below, we are building a webpage with title and h1 Frontend. In the body, we will start with h1 tag first, and then other headings.

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Frontend</title> </head> <body> <h1>Frontend</h1> <p>Description for Frontend Web Development</p> <h2>HTML</h2> <p>Description for HTML</p> <h3>HTML 4</h3> <p>Description for HTML4</p> <h3>HTML 5</h3> <p>Description for HTML5</p> <h2>CSS</h2> <p>Description for CSS</p> <h3>CSS 2</h3> <p>Description for css2</p> <h3>CSS 3</h3> <p>Description for css3</p> <h2>Javascript</h2> <p>Description for JavaScript</p> <h3>Javascript</h3> <p>Description for Javascript</p> <h3>JS ES6</h3> <p>Description for JS ES6 and above</p> </body> </html>

As per SEO guidelines, it is compulsory to define at least one <h1> and subsequent headings like <h2> on a webpage to structure your content.

Best Practices for HTML Headings

  • Maintain a logical hierarchy: h1 > h2 > h3, etc. Avoid skipping levels like h1 to h3 directly.
  • Use headings to outline your content structure, similar to a table of contents.
  • Keep headings concise and descriptive.
  • Avoid using headings for styling; use CSS for visual changes.
  • Ensure headings are unique and relevant to the section they introduce.
  • For accessibility, headings help screen readers navigate the page.

Styling HTML Headings with CSS

While headings have default styles, you can customize them using CSS for better visual appeal and consistency.

h1 { color: #333; font-size: 2.5em; margin-bottom: 0.5em; } h2 { color: #555; font-size: 2em; border-bottom: 1px solid #ccc; }

Remember, use CSS for styling instead of relying on default sizes to ensure responsive design.

  • ← HTML Text
  • Block & Inline Elements →

Từ khóa » H1 Vs H2 Html