Detailed explanation
The <head> and <body> elements organise an HTML document into two sections with different responsibilities. The <head> describes the document and provides information or resources that the browser uses to process it. The <body> holds the document’s main content, such as headings, paragraphs, images, links, forms, and tables. Both belong inside the root <html> element, with <head> before <body>. The key distinction is document information versus page content, not simply invisible versus visible elements.
Common <head> elements include <title>, <meta>, <link>, <style>, and <script>. The <title> sets the document title, usually displayed in the browser tab rather than inside the page. A <meta charset="UTF-8"> declaration specifies character encoding, while a viewport meta tag helps browsers size the layout viewport appropriately on mobile devices. A stylesheet link loads external CSS, and <style> embeds CSS directly. These elements are not rendered as ordinary page content, but they can strongly affect presentation, behaviour, and how search engines understand the page.
The <body> contains the content and structure that browsers normally present in the viewport. In the example, <h1>Visible content</h1> appears on the page, while “My Page” becomes the tab title and style.css supplies styling rules. However, saying that everything in <body> is visible is inaccurate: it can contain scripts, hidden elements, or content suppressed by CSS. Similarly, scripts are not restricted to <head>; they can also appear in <body>. Their placement and attributes affect when they download and execute.
Under the hood, the browser parses HTML into a Document Object Model, or DOM, containing both sections. It also processes styles and combines relevant document content with styling information to calculate layout and paint the page. For interviews, explain each section’s purpose, give two or three typical elements, and connect them to the example. Interviewers generally look for a clear structural distinction and awareness that head resources influence the rendered page even though they are not themselves ordinary visible content.
Key points to remember
- <head> contains document metadata and resource references; <body> contains the main page content.
- Both sections belong inside <html>, with <head> appearing before <body>.
- <title> defines the browser-tab title, while a body heading such as <h1> appears within the page.
- Stylesheets and metadata in <head> can affect rendering without appearing as page content.
- Not everything in <body> is visible, and <script> can appear in either section.
Common mistakes candidates make
- Confusing <head> with <header>, which represents introductory content within the page.
- Claiming that all body elements are visible or that head elements cannot influence the page’s appearance.
- Saying that scripts must always be placed in <head>.
Likely follow-up questions
What is the difference between <head> and <header>?
<head> contains document metadata and resource references. <header> is a semantic element used within page content for introductory material, such as a logo, heading, or navigation.
Should JavaScript be placed in <head> or at the end of <body>?
Either location is possible, but an ordinary classic script without async or defer can pause HTML parsing while it loads and executes. An external classic script in <head> with defer downloads alongside parsing and executes after parsing finishes; placing a script near the end of <body> lets earlier markup be parsed first.
Are <head> and <body> required in an HTML document?
In HTML syntax, their start and end tags can be omitted under specific conditions, and the parser still creates head and body elements in the DOM. Writing the tags explicitly is clearer for beginners and makes the document structure easier to maintain.
Interview tip: Start with metadata versus page content, explain the title and heading in the example, and finish with the caveat that body content is not always visible.