SmartCodingTips

Head & Body in HTML

In an HTML document, the <head> and <body> elements are two essential building blocks. They organize the page into metadata and visible content, respectively.

The Head Element

The <head> section contains metadata and instructions for the browser, such as the page title, character encoding, stylesheets, and scripts. 


<head>
  <meta charset="UTF-8">
  <title>My Page</title>
  <link rel="stylesheet" href="styles.css">
</head>

The Body Element

The <body> section holds all the content that users see in the browser window, such as text, images, links, and buttons. 


<body>
  <h1>Welcome to My Website</h1>
  <p>This is the main content of the page.</p>
</body>

Why They Matter

  • <head> provides important data to the browser and search engines.
  • <body> delivers the actual content to the user.
  • Separating logic from content improves clarity and maintainability.

Conclusion

The <head> and <body> tags are fundamental to every HTML document. The head defines behind-the-scenes settings, while the body displays content to the user.