HTML Header Tags
This is a beginners guide to HTML header tags
Github repo
https://github.com/EntryLevelDeveloperTraining/html-workshop
Header Tags
In the last article we created our first HTML webpage. In this article we will go over how to create 6 header tags.
<!DOCTYPE html>
<html>
<head>
<title>Headers</title>
</head>
<body>
<h1>Entry Level Developer Training</h1>
<h2>This website is awesome</h2>
<h3>This is an article</h3>
<h4>This is a page header</h4>
<h5>Really small header</h5>
<h6>Even smaller header</h6>
</body>
</html>
This is really simple. Each header tag begins with the letter h and then followed by the number 1 through 6. 1 is the biggest header and 6 is the smallest header.
Usually you will use the h1 tag to show your website title or blog post article. Only 1 h1 header tag should be used on each webpage indicating the title of the webpage. You can then use h2 through h6 to show sub headers.
Then with CSS you can reset the default styling and setup how big you want each header to be with your own customized styles.
This is an h1 tag
This is an h2 tag
This is an h3 tag
This is an h4 tag
This is an h5 tag
This is an h6 tag
Conclusion
Header tags are useful to direct the person to the content of the page you want them to read first. By utilizing the size of the header tag you can style your website and flow to be a great user experience. In the next article we are going to discuss paragraph, bold, and italic tags.