HTML Header Tags

H
andrewgbliss
9 months ago

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.


H
andrewgbliss
9 months ago