What is the difference between Head, Header and Heading in Html Files?

Head, header and head line are different from each other and should not be confused. In this article I am going to have a quick glance at each of them and share my understanding of these three different subjects.

Head

The HTML tag consists of two main elements:

· Head

· Body

The head element is placed between the html opening tag and the body element in the Html file. The head of a HTML document is a container for Meta data like the document title, charset, style and script links.

These data are important for browsers and search engines and the users who visit the site cannot see them.

In this part we will have a quick glance at some important codes that we can use in the head of Html together.

1- Charset:

The character encoding of a document is specified by this attribute. According to MDN website, you should remember, <Meta> elements which declare a character encoding must be located entirely within the first 1024 bytes of the document.

For determining charset for your Html document you should use this code:

<meta charset="utf-8">

?2- Http-equiv:

· By this code you can redirect your page to another page after the time which you declare in the code, for example by the code below, after 3 seconds, your html page will be redirected to the https://www.mozilla.org.

<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">        

· You can also use this code for refreshing your HTML page after a specific time, for example by the code bellow you can refresh your html page after 100 seconds.

<meta http-equiv="refresh" content="100">

3-?Viewport tag

View port Meta tag is useful for mobile devices. Data received by mobile devices renders in a virtual window, typically 980 pixels wide, and mobile devices adjust the width of the page according to the width of the device. Then users can zoom in or zoom out the web page on their mobile's screens.

By using this code you can make your HTML page responsive and tell a mobile browser to use the viewport width instead of the default 980 pixel as the width of the screen.

You can add a viewport Meta tag like the following:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

?In this tag, the "width=device-width" part, said the width of your html file in the mobile browsers should be equal to the width of the device view port and make your file for mobile devices responsive.

And, initial-scale=1.0 part, change the scale of the HTML page on the mobile screen and you can zoom in or zoom out the web page on the mobile screen.

?As we mentioned before some codes in the head of document use by search engines, here I want to introduce some of them:

4- Meta tags:

By Meta tags, you can describe the data of your page for search engines. Meta tags consist of two parts:

· Name: name specifies the type of meta elements like author, keyword, description …

· Content: content specifies the actual Meta content.

a. Author: By this code you indicate the name of the author or authors of the text:

<meta name="author" content="Vahid M">

<meta name="author" content="Vahid M, Amir M">

b. Description: By this code you can describe the html article for search engines.

<meta name="description" content="The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.">

When your website is found by Google or other search engines you can see this description on the search engine result page.

c. Keywords:

The Meta keyword tag is important for a site search within the site itself or for other applications within a website, but if you are still configuring this code for Google’s sake you really don’t need to do that. To understand the page keywords, Google inspects the entire HTML body.

<meta name="keywords" content="Html, Head, header, heading tag">

5- Title

The other tag which you should define in the head of your document is the title tag. The title and the headline are two separate things and should not be confused.

You put the headlines of your document in the html’s body and the user can see that in the browser but for the Title of the page you should define it in the head of the html document and the user cannot see the title of the file in the browser.

The text in the title tag displays in these locations:

- Title of the Browser window.

- In the browser book mark.

- The title tag is important for search engines and one of the factors that they check to understand the subject of html file is the title. Here you can see the title of the website in the SERP or search engine result page.

You can add the title of your document to the head of a html file by this code:

<title>Here you can write the title of your html page</title>

6- Applying CSS to Html file

You can determine your desired CSS codes in the head of your HTML document.

You can add your CSS code to a Html file by using link or write your desired CSS in the head of your document.

For adding a CSS code by link, you can use this code:

<link rel="stylesheet" href="my-css-file.css">

In this code you should define two attributes:

- Rel

- Href

Rel attribute indicates that it is the document's style sheet, and href, determines the path to the style sheet file:

7- Applying JavaScript code to Html file:

Adding a script element to your HTML document should be done at the Head of the HTML file.

It is recommended to use “defer” in the link. This will improve the speed of your web page.

You can use other methods to load JS files onto your page. for more information you can check “?Script loading strategies” page.

<script src="my-js-file.js" defer></script>

Header

The header of a HTML element represents introductory and navigational content.

In this part, you may have:

- One or more heading elements (H1 – H6)

- Logo or icon

- Authorship information

You usually have one header in your document but by adding new sections and articles to your document, you can increase the number of headers, but each section and article should have only one header, and you cannot place headers in the footer, another header and address part of your page.

?Page Header

<header>
? <h1>Main Page Title</h1>
? <img src="mdn-logo-sm.png" alt="MDN logo">
</header>        

Article Header

<article>
? <header>
??? <h2>The Planet Earth</h2>
??? <p>Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by Jane Smith</p>
? </header>
? <p>We live on a planet that's blue and green, with so many things still unseen.</p>
? <p><a >Continue reading....</a></p>
</article>        

?Headline

Users in web browsers can see a lot of titles in the text. Headlines and sub headlines of the text can be useful for you to break up the pages content and makes it easier for people to understand the structure of the page.

There are six kinds of headline in the HTML file. <H1><H2><H3><H4><H5><H6>

Visually Among headings, H1 has the biggest size and also it is the most important and H6 is the smallest and the least important.

But you should consider some points when you are using these tags in the body of your html file.

1- Avoid using heading elements for resizing your text. It is completely wrong, instead you can use CSS font size property.

2- It is very important to design an international system of hierarchy for your site. It is a key interface for navigating a site with a screen reader. It increases the consistency and semantic success of your site.

3- Avoid skipping heading levels when you are using heading. Start always from <h1> and follow by <h2> and so on.

4- It is recommended to use only one headline for your page. If you want to define multiple <H1> tags on your page, you should define different sections or articles for your page and after that you can have only one <h1> for each article or section in your page.

Conclusion

In HTML, , Head, Header and Heading all have totally different functions, so you should not be confused.

For search engines and browsers, HTML's head codes are important, and users cannot see them.

Header and Headings are placed in the Html body and users can see them in the browsers.

Page headers are at the top of websites, and site logos, navigation bars, and the top image of the page, most of the time, are related to the header of websites.

Finally, headings help writers organize articles for users. HTML files have 6 heading levels and most of the time we have only one <H1> on the page, so do not confuse this with the Title.

Title of HTML should be defined in the Head part and users cannot see it on the webpage. Titles are important for search engines and they display in SERP (search engine result page) and bookmarks and in the window's browser.