Here's how our HTML file would be rendered when headings are applied in the content. In this case we used the heading 1 and the heading 2:Since we're talking about the paragraph element, know that the paragraph is the default element in HTML. This means that any content that does not have any distinguishable tag will automatically regarded by browsers as a paragraph. Therefore, if you don’t want any particular content to be regarded by the browser as paragraphs, then you have to apply some specific changes to them.
For example, you've written paragraph content and you want to give it a clear and distinguishable title. Surely you don't want to put it in between paragraph tags since it would just make it look like the rest of the paragraph. You can't move it outside of the paragraph tag since any content that doesn't have any distinguishable tag would automatically rendered as a paragraph by the browser.
In this case, what you want to do is nest and apply another modifying tag to the content that you wish to convert into a paragraph title. Note that the title that we're talking about here is not the HTML title within the head tag, but just a normal paragraph title in the body. We can do this with the help of the heading tag. Let's take a look at an example of this below:
1<!DOCTYPE html>
2<html>
3<head>
4<title>Learning HTML in 1 Day</title
5</head>
6<body>
7<h1>How to Learn HTML in 1 Day or Less</h1>
8<p>Understanding HTML does have its advantages</p>
9</body>
10</html>
Imagine how bland and monotonous it would be if all the contents of a website looked the same and had no structure whatsoever. Therefore, it is important to remember that when creating a nice and appealing website, always make sure that your content is structured properly. To do this, we must apply some headings.
Headings are tags that apply structure to website content. They do this by designating certain levels of importance to different parts of the content. In line seven of your previous example, You can see that we've applied a heading tag to the content “How to Learn HTML in 1 Day or Less”; specifically the heading 1 or <h1> tag..
Headings have six levels namely the h1, h2, h3, h4, h5, and h6. See an example of them below:
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>
As you can see from the example above, the level of boldness and font size decreases from h1 to h6. The h1 heading, which has a large font size and high level of boldness, is applied to contents that have the highest level of importance. Examples of these are Titles, Chapter Headings, etc. The h2 heading, which possesses a level of boldness and font size that are two points lower than the h1 heading, is mainly applied to content that have a secondary level of importance. Examples of these are subtitles, sub-headings, sub-points, etc.
Use of the rest of the headings as you see fit so long as you're able to create structurally sound content. Let's see another example of how headings are applied below:
1<!DOCTYPE html>
2<html>
3<head>
4<title>How to Survive During A Disaster</title>
5</head>
6<body>
7<h1>Things to Take Care of During A Disaster</h1>
8<h2>Securing Your Home</h2>
9<p>Secure your perimeter</p>
10<p>Secure your entry points</p>
11<p>Know how to defend from intruders</p>
12<h2>Procuring Supplies</h2>
13<p>Stock up on Water</p>
14<p>Stock up on Food</p>
15<p>Have appropriate clothing for every conditions</p>
16</body>
17</html>
To understand our example more clearly, it would be best if we can see how this HTML document would be rendered by the browser. To see how this is rendered, all you need do is save the file in HTML format (that's with a .html file extension) and open the file with the browser. It's that simple.
Here's how our HTML file would be rendered in the browser without using headings:
Here's how our HTML file would be rendered when headings are applied in the content. In this case we used the heading 1 and the heading 2:
Notice how our content appears bland and monotonous without the headings. There's no way to distinguish where the points of interest are in the content. After applying the headings however, you can clearly see from our second illustration that the main points of interest are clearly distinguished, there's a clear level of importance in the content, and it now has structure.
People who are new to HTML programming sometimes use headings the wrong way. For instance, they use headings to denote emphasis to a particular phrase or word in a content. They even go as far as use headings whenever they just want to increase the font size or boldness of a particular paragraph, sentence, or phrase in a content. Know that this is not how headings should be used and is considered bad coding practice.
Headings should only be used to apply structure in a content and not as a means to increase font sizes and boldness. Here's another reason why you should only use headings as originally intended: Search Engine Optimization or SEO. If you're not familiar with SEO, think of it as the Internet standard for ranking websites in search engine search results. It presents certain rules and guidelines on how to make sure your website gets sufficient traffic by ranking high in search engine results.
In web development circles, people would always be sharing search engine optimization tips for their websites. One particular tip that you'll most likely hear often is to limit the number of heading 1's that you have on a web page. Some would even go as far as tell you that there's a rule stating exactly that; when in fact there isn't.
As a matter of fact, Google—the main authority when it comes to search engines and SEO—says that you won't get penalized for making use of multiple h1 tags, or any kind of heading tag for that matter, on a web page. However, they are keeping a close watch on whether you're using multiple headings of the same kind logically. If you're not using multiple headings of the same kind in a webpage logically, you'll get penalized by having a low search result ranking, which will have a drastic effect on your website traffic.
Another thing to remember about headings is that you have to utilize them in order. If you used an h1 prior, you can't immediately follow that with an h3 or an h6. You have to make use of them in order. You're not allowed to skip. It is also a good idea to plan your website in advance and think of the kinds of content you want to put on your website. This way, you'll be able to develop a heading strategy that will indicate the level of importance of the various sections of your website, based on those content.
Based on what we've discussed so far about headings, let's have one last example below:
1<!DOCTYPE html>
2<html>
3<head>
4<title>Things to Consider When Buying A Bike</title>
5</head>
6<body>
7<h1>Bike Type</h1>
8<h2>Road Bike</h2>
9<p>Trek</p>
10<p>Cannondale</p>
11<p>Cervelo</p>
12<h2>Mountain Bike</h2>
13<p>Santa Cruz</p>
14<p>Commencal</p>
15<p>Niner</p>
16<h2>Track Bike</h2>
17<p>Japanese Keirin bikes</p>
18<p>Look bikes</p>
19<p>Pinarello</p>
20<h1>Frame Size</h1>
21<h2>Road Bike</h2>
22<h3>Men</h3>
23<p>4'10” - 5'0” = 47cm – 48cm frame size</p>
24<p>5'0” - 5'3” = 49cm – 50cm frame size</p>
25<p>5'3” - 5'6” = 51cm – 53cm frame size</p>
26<h3>Women</h3>
27<p>4'10” - 5'1” = 44cm – 46cm frame size</p>
28<p>5'1” - 5'3” = 47cm – 49cm frame size</p>
29<p>5'3” - 5'5” = 50cm – 52cm frame size</p>
30</body>
31</html>
Here's how it would be rendered in the browser:
