A title or the bootstrap header is important to let your search engine know what your article is about and what information your articles contain. The copies or content in the bootstrap header communicates with a search engine and when a user searches with a particular set of keywords, your articles or blog shows up in the search result. In this Bootstrap Header article, we will cover the following topics:
- Introduction to Header
- <H1> Header tag
- <H2> Header tag
- <H3> Header tag
- <H4> Header tag
- <H5> Header tag
- <H6> Header tag
- The Bottom Line
- Summary
Introduction to Header
A document can contain multiple bootstrap header tags. These bootstrap tags are important for Search engine optimization. These bootstrap header tags start from <h1>, <h2>, and go all the way till <h6>. The <h1> and the <h2> tags are the most important tags for search engine optimization. The <h1> tag shows the text in the biggest font while the <h6> shows in the smallest font.
The bootstrap header is styled in the following ways:
H1 Header Tag
The <h1> bootstrap header tag is used to indicate the main heading of the article or the blog.
Example:
<h1> Welcome to Edureka </h1>
It is used to define the main heading.
Output:
H2 Header Tag
The <h2> bootstrap header tag is used to emphasize the title.
Example:
<h2> Learn Bootstrap Online! </h2>
It is used to highlight the subheadings.
Output:
The <H3> tag
The <h3> header tag is used to relate the other heading to each other.
For Example:
<h3> Welcome to Edureka! </h3>
Output:
<H4> Bootstrap Header Tag
The <h4> header tag signifies the level 4 heading. It appears a bit smaller compared to the <h3> tag.
Example:
<h3> Learn Bootstrap Online! </h3>
Output:
The <H5> Heading
The <h5> heading is usually used to describe the heading levels in the Table of Content section.
Example:
<h5> Welcome to Edureka! </h5>
Output:
The <H6> Heading
The <H6> header tag is the last type of heading tags. It is generally not used much other than in the table of contents section.
Example:
<h6> Learn Bootstrap Online! </h6>
Output:
The Bottom Line
Finally, to differentiate the bootstrap header sizes when compared with each other, they look something like this:
<h1>Welcome to Edureka! </h1> <h2>Learn Bootstrap Online! </h2> <h3>Welcome to Edureka! </h3> <h4>Learn Bootstrap Online!</h4> <h5>Welcome to Edureka!</h5> <h6>Learn Bootstrap Online!</h6>
Output:
Summary
- The header tags start from <h1> and go on till <h2>
- The <h1> is the most important while <h6> is the least
- Do not skip the heading levels while using the bootstrap header tags
- Do not use the header to simply make the text look bolder or change their size.
- All the tags are supposed to be inside the <body> tag
The browsers mentioned below support all the aforementioned tags:
- Google chrome
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Android
- Internet explorer
- Edge Mobile
- Opera
- Opera Mobile
- Safari Mobile
- Safari (WebKit)
With this, we have come to the end of this article. I hope you understood the different header tags.
Stay up-to-date with the latest Flutter features and best practices through our Flutter Course.
Check out our Full Stack Web Developer Masters Program which comes with instructor-led live training and real-life project experience. This training makes you proficient in skills to work with back-end and front-end web technologies. It includes training on Web Development, jQuery, Angular, NodeJS, ExpressJS, and MongoDB.
Got a question for us? Please mention it in the comments section of this blog and we will get back to you.