×
(adsbygoogle = window.adsbygoogle || []).push({});

Headings Element in HTML | Tutorial.2

In the last chapter, we used the h1 and h2 elements to indicate headings for the Black Goose Bistro page. There are actually six levels of headings, from h1 to h6. When you add headings to content, the browser uses them to create a document outline for the page. Assistive reading devices such as screen readers use the document outline to help users quickly scan and navigate through a page. In addition, search engines look at heading levels as part of their algorithms (information in higher heading levels may be given more weight). For these reasons, it is a best practice to start with the Level 1 heading (h1) and work down in numerical order (see note), creating a logical document structure and outline.

<h1>…</h1>

<h2>…</h2>

<h3>…</h3>

<h4>…</h4>

<h5>…</h5>

<h6>…</h6>

Heading elements

This example shows the markup for four heading levels. Additional heading levels would be marked up in a similar manner.

<h1>Type Design</h1>

<h2>Serif Typefaces</h2>

<p>Serif typefaces have small slabs at the ends of letter strokes. In general, serif fonts can make large amounts of text easier to read.</p>

<h3>Baskerville</h3>

<h4>Description</h4> 

<p>Description of the Baskerville typeface.</p>


<h4>History</h4> 

<p>The history of the Baskerville typeface.</p>


<h3>Georgia</h3> 

<p>Description and history of the Georgia typeface.</p>


<h2>Sans-serif Typefaces</h2> 

<p>Sans-serif typefaces do not have slabs at the ends of strokes.</p> 

 

 

 

 

(adsbygoogle = window.adsbygoogle || []).push({});