Flash cards
Review the key moves
What is the main idea behind HTML Headings?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
<h1>___ 1</h1>Put the learning moves in the order that makes the concept easiest to apply.
HTML headings are titles or subtitles that you want to display on a webpage.
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>Live preview
Note
Browsers automatically add some white space (a margin) before and after a heading.
Headings Are Important
Search engines use the headings to index the structure and content of your web pages.
Users often skim a page by its headings. It is important to use headings to show the document structure.
<h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3> , and so on.
For example
- <h1> - Page title
- <h2> - Section titles
- <h3> - Sub-sections
Example
<h1>Travel Guide</h1>
<h2>Europe</h2>
<h3>France</h3>
<h3>Italy</h3>
<h2>Asia</h2>
<h3>India</h3>
<h3>Thailand</h3>Live preview
Tip
Use only one <h1> per page - it represents the main topic or title.
Note
Use HTML headings for headings only. Don't use headings to make text BIG or bold .
Bigger Headings
Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property:
Example
<h1
style="font-size:60px;">Heading 1</h1>Live preview