HTML Head and Heading Elements at a Glance
| Tags | Description |
|---|---|
| <head> | A container for all head elements. For example, the container element for elements such as title, script, style, meta, link, etc. |
| <h1> – <h6> | HTML is used to write headings. |
< head> element
<head>Headings or titles have nothing to do with HTML elements.
<head>An element is a container for holding metadata. HTML metadata is information about an HTML document. Metadata is not displayed in the browser.
<head>The element is written <html>after the tag and before the tag:<body>
Examples
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML head element</title>
</head>
<body>
<p>The HTML head element contains meta data.</p>
<p>Meta data is data related to the HTML document.</p>
</body>
</html>
Output
The HTML head element contains meta data.
Meta data is data related to the HTML document.
HTML Heading
<h1><h6>Headings or titles are created in HTML using the <head> tag .
<h1>The most important heading is indicated by and <h6>the least important heading is indicated by.
Using CSS, you can change the font size of headings, just like other elements.
Examples
<!DOCTYPE html>
<html>
<head>
<title>HTML Headings</title>
</head>
<body>
<div id="ez-toc-container" class="ez-toc-v2_0_74 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction">
<div class="ez-toc-title-container">
<p class="ez-toc-title" style="cursor:inherit">Table of Contents</p>
<span class="ez-toc-title-toggle"><a href="#" class="ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle" aria-label="Toggle Table of Content"><span class="ez-toc-js-icon-con"><span class=""><span class="eztoc-hide" style="display:none;">Toggle</span><span class="ez-toc-icon-toggle-span"><svg style="fill: #999;color:#999" xmlns="http://www.w3.org/2000/svg" class="list-377408" width="20px" height="20px" viewBox="0 0 24 24" fill="none"><path d="M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z" fill="currentColor"></path></svg><svg style="fill: #999;color:#999" class="arrow-unsorted-368013" xmlns="http://www.w3.org/2000/svg" width="10px" height="10px" viewBox="0 0 24 24" version="1.2" baseProfile="tiny"><path d="M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z"/></svg></span></span></span></a></span></div>
<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class="ez-toc-link ez-toc-heading-1" href="#h1_is_the_most_important_heading" >h1 is the most important heading</a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-2" href="#h2_less_important_heading_than_h1" >h2, less important heading than h1</a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-3" href="#h3_less_important_heading_than_h2" >h3, less important heading than h2</a></li></ul></li></ul></li></ul></nav></div>
<h1><span class="ez-toc-section" id="h1_is_the_most_important_heading"></span>h1 is the most important heading<span class="ez-toc-section-end"></span></h1>
<h2><span class="ez-toc-section" id="h2_less_important_heading_than_h1"></span>h2, less important heading than h1<span class="ez-toc-section-end"></span></h2>
<h3><span class="ez-toc-section" id="h3_less_important_heading_than_h2"></span>h3, less important heading than h2<span class="ez-toc-section-end"></span></h3>
<h4>h4, less important heading than h3</h4>
<h5>h5, less important heading than h4</h5>
<h6>h6 is the least important heading</h6>
</body>
</html>
Output
The importance of headings
Search engines use headings to index the structure and content of your web pages.
The use of headings is very important to make the structure of the document elegant.
Note: Do not use heading elements to make text larger or bolder .
Chapter summary
- The HTML
<head>element contains other elements related to metadata. - Elements are used
<h1>to create headings in HTML documents .<h6>
