Know your Heads in Coding

Head versus Heading versus Header

Pan

Published in

Code Temple

2 min readAug 3, 2019

Introduction

Two weeks of learning the HTML language, I find that the most confusing tags are <head>, <h1> through <h6> (headings), and <header>. These tags have the same first syllable and sound very similar, but they are completely different.

When I see the word heading in the HTML syntax, I instantly think of English class when I had to use the MLA writing format that required me to input information about the author, the title, and the date in the head of the paper. However, in coding, head, heading and header are fundamental elements that are broken down into more precise definitions.

It is very important that these tags are learned, and use in coding for the computer system to easily read and help organize the content of the web page.

A side note: Computer systems that read the website’s code are known as search engines. SEO, or search engine optimization, is important because it helps get more traffic to web pages because of the keywords in the head tag section.

Head

Head, heading and header tags are crucial elements in HTML language and structure. The <head> tag is important because it is a child node of the root element of the HTML document. <head> tag allows a coder to input information such as the name of the author, title, description, and key words as metadata.

<html>
  <head></head>
  <body></body>
</html>

Heading

The heading tags <h1> through <h6> are found inside the body tag element. For example, the title of the introduction section would be enclosed inside a heading tag. A body should always have a heading tag that grabs the reader’s attention with its bold style font. The heading for the body has six different font sizes with <h1> having the largest font size and <h6> having the smaller font size. Example of heading tags:

<html>
  <head></head>
  <body>
    <h1></h1> largest font size
    <h2></h2>
    <h3></h3>
    <h4></h4>
    <h5></h5>
    <h6></h6> smallest font size
  </body>
</html>

Header

Header is important because it is at the top of the body page. This is where coders can input the navigation tag <nav> which is used to provide links to other pages or contents of the web site. The header is also where coders can input the logo of the businesses.

Conclusion

In conclusion, head is a child node of the root HTML tag that declares the meta data information for better SEO. Header sections the upper content of the body, while headings are used to embolden the titles of the various sections.