Lesson 3: Heading in HTML

how to create html header

Generally speaking, headings are written to show the title of the whole website. They can be customized to add style to the webpages.



An example of headings is the COMBOSHARE title text boldly written above this websites.
The reason why we put heading on webpages is to give all the pages in a website (as there could be a lot of them) the same feel and to serve as a reminder to readers the name of the website they are on. It is also common for website description to appear underneath it or even alongside it.

Headings are not only limited to the website title, but they are also used as post title as well as a subheading and minor headings in a post or a write up on a website or blog. How to add a heading to a web page. For you to add a heading to your web pages, you have to make use of the h-tags.

Headings are generally enclosed in the opening and closing h tags. And they are placed in the body segment of the web page

Note: Do not confuse headings with the elements inside the head section of the web page.

The head section contains mainly meta elements and not the header of your page while headings belong in the body section of the webpage.

For example
The header of this page is Comboshare. To write this in html we would place "comboshare" which is the element content into the opening and closing h-tags and the whole element will be placed inside the body segment of the web page.

Sample code: <html> <body> <h1> Comboshare</h1> </body> </html>
Results of the code:

html header
Don't worry about the color and the designs for now, we will talk more about color and designs later.

There are six different types of h tags.
They are h1, h2, h3, h4, h5 and h6. The h1 is the most important, followed by h2 and their importance decrease all the way down to h6, making h6 the less important of the heading tags.
h2 Sample codes:
<html> <body> <h2> Comboshare</h2> </body> </html> Result:
html header

h3 sample code
<html> <body> <h3> Comboshare</h3> </body> </html> Result: 
html header

h4 sample code
<html> <body> <h4> Comboshare</h4> </body> </html> Result: 
html header

h5 sample code
<html> <body> <h5> Comboshare</h5> </body> </html> Result: 
html header

h6 sample code
<html> <body> <h6> Comboshare</h6> </body> </html> Result:
html header


We only have heading h1 to h6.

So what happens if we write h7?

Let's try it and see

h7 sample code
<html> <body> <h7> Comboshare</h7> </body> </html> Result


 


Conclusion: well as you can see from the result obtained when h7-tag was used, the text changes back to normal text and remains the same even if you change to h8. So for headings in webpages, you can only make use of the h1 to h6 tags. To appreciate the difference in size, let’s have a preview of all the tags in the same code. Code: <html> <body> <h1> Comboshare heading 1</h1> <h2> Comboshare heading 2</h2> <h3> Comboshare heading 3</h3> <h4> Comboshare heading 4</h4> <h5> Comboshare heading 5</h5> <h6> Comboshare heading 6</h6> </body> </html> Result:

No comments:

Post a Comment

Contact Form

Name

Email *

Message *

Follow by Email

Popular Posts