Learn HTML – Part 2 – head Tag Explained (Metadata Guide)

Learn HTML – Part 2 – head Tag – Defining Metadata

The HTML head tag contains metadata and important information about a webpage. It does not display content directly on the page.

The head section provides instructions to the browser and search engines.


What is the head Tag?

The head tag is placed inside the html tag and before the body tag.

It contains information such as:

  • Page title
  • Meta tags
  • Stylesheets
  • Scripts
  • Character encoding

Basic Structure

<!DOCTYPE html>
<html>
   <head>
      <title>My Web Page</title>
   </head>
   <body>
      Content goes here
   </body>
</html>

The content inside head is not visible on the webpage.


Important Elements Inside head

1. title Tag

The title tag defines the title shown in the browser tab.

<title>Learn HTML Tutorial</title>

2. meta Tag

The meta tag provides metadata like character encoding and description.

<meta charset="UTF-8">
<meta name="description" content="HTML tutorial for beginners">

3. link Tag

The link tag connects external stylesheets.

<link rel="stylesheet" href="style.css">

4. script Tag

The script tag connects or includes JavaScript files.

<script src="script.js"></script>

Why is the head Tag Important?

  • Defines the page title
  • Helps with SEO using meta tags
  • Loads CSS and JavaScript files
  • Defines character encoding
  • Improves browser compatibility

The head section controls how the page behaves — even though users cannot see it directly.


Quick Summary

Featurehead Tag
Visible on Page?No
ContainsMetadata, title, links, scripts
Important for SEO?Yes
LocationInside html, before body

Conclusion

The HTML head tag contains important metadata that helps browsers and search engines understand your webpage.

Even though its content is not visible to users, it plays a major role in SEO, styling, and functionality.

What’s Next?

Now that you understand the head tag, the next step is learning about the body tag, where all the visible content of a webpage is displayed.

Next: Learn HTML – Part 3 – body Tag – Displaying Visible Content →


Series: Learn HTML Series

Facebook
WhatsApp
Twitter
LinkedIn
Pinterest

Leave a Comment

Your email address will not be published. Required fields are marked *

Related Articles from the Series

learn-html-part-63-complete-html-project-thumbnail
Learn HTML – Part 63 – Complete HTML Project (Build a Web Page)
Learn HTML – Part 63 – Complete HTML Project In this final lesson, we will build a complete HTML webpage...
learn-html-part-62-time-tag-date-time-thumbnail
Learn HTML – Part 62 – time Tag – Date & Time
Learn HTML – Part 62 – time Tag – Date & Time The HTML time tag is used to represent dates and times...
learn-html-part-61-mark-tag-highlight-text-thumbnail
Learn HTML – Part 61 – mark Tag – Highlight Text
Learn HTML – Part 61 – mark Tag – Highlight Text The HTML mark tag is used to highlight text that is...
learn-html-part-60-figcaption-tag-figure-caption-thumbnail
Learn HTML – Part 60 – figcaption Tag – Figure Caption
Learn HTML – Part 60 – figcaption Tag – Figure Caption The HTML figcaption tag is used to define a caption...
learn-html-part-59-figure-tag-media-content-thumbnail
Learn HTML – Part 59 – figure Tag – Media Content
Learn HTML – Part 59 – figure Tag – Media Content The HTML figure tag is used to group media content...
learn-html-part-58-track-tag-video-subtitles-thumbnail
Learn HTML – Part 58 – track Tag – Video Subtitles
Learn HTML – Part 58 – track Tag – Video Subtitles The HTML track tag is used to add subtitles, captions,...
learn-html-part-57-source-tag-media-sources-thumbnail
Learn HTML – Part 57 – source Tag – Media Sources
Learn HTML – Part 57 – source Tag – Media Sources The HTML source tag is used to define multiple media...
learn-html-part-56-picture-tag-responsive-images-thumbnail
Learn HTML – Part 56 – picture Tag – Responsive Images
Learn HTML – Part 56 – picture Tag – Responsive Images The HTML picture tag is used to display responsive...
learn-html-part-55-dialog-tag-modal-dialog-thumbnail
Learn HTML – Part 55 – dialog Tag – Modal Dialog
Learn HTML – Part 55 – dialog Tag – Modal Dialog The HTML dialog tag is used to create modal or popup...
learn-html-part-54-summary-tag-details-caption-thumbnail
Learn HTML – Part 54 – summary Tag – Details Caption
Learn HTML – Part 54 – summary Tag – Details Caption The HTML summary tag is used to define a visible...
Scroll to Top