Heading tags can be used for various reasons. The obvious reason is to create headings on your page. There are 6 different html heading tags. Once you learn CSS, you can format each heading with a different font. Sometimes you may want to use a heading tag to store a font that you frequently use throughout your website or application.
At the bottom of this page there is a code editor pre-loaded with the lesson's code.White space (margins) are automatically placed before and after headings. By default, the smaller the heading number, the bigger the font. So (by default) h1 is the biggest and h6 is the smallest. CSS can be used to alter size and basically every other part of the headings appearance.
<h1> Heading </h1>
➼ <h1> h1 start tag
➼ Heading This is where you write the actual heading or text
➼ </h1> h1 end tag
<body>
<h1>The Bug Invasion</h1>
<h2>Phase 1:</h2>
<p>The aliens finally landed and left their ships.
They look like really big bugs. We hope they are nicer than they look.</p>
<h3>Phase 2:</h3>
<p>The alien bugs begin to attack humanity.
It soon becomes clear that their technology is more advanced.</p>
<h4>Phase 3:</h4>
<p>The bugs have taken over Earth.</p>
<h5>Phase 4:</h5>
<p>A human resistance movement has begun.
Humans will use military straegy and web development to defeat the bugs!</p>
</body>
➼ <body> Body Element Starts
➼ <h1>The Bug Invasion</h1> Page Heading
➼ <h2>Phase 1:</h2> Paragraph Heading
➼ <p>The aliens finally landed and left their ships...</p> Paragraph
➼ <h3>Phase 2:</h3> Paragraph Heading
➼ <p>The alien bugs begin to attack humanity...</p> Paragraph
➼ <h4>Phase 3:</h4> Paragraph Heading
➼ <p>The bugs have taken over Earth.</p> Paragraph
➼ <h5>Phase 4:</h5> Paragraph Heading
➼ <p>A human resistance movement has begun...</p> Paragraph
➼ </body> Body Element Ends
Now, play with the headings in the code editor box below.