HTML Tutorials

HTML - HTML Head & Body

HTML - Head & Body

1. Introduction

In HTML, the structure of a webpage is divided into two primary sections: the <head> and the <body>. These two sections serve distinct purposes, with the <head> containing metadata and resources related to the webpage, and the <body> containing the content that is visible to users. Understanding the roles of these sections is crucial for building well-structured HTML documents.

2. The HTML Head Section

The <head> element is a container for metadata about the HTML document. Metadata is information that is not displayed directly on the webpage but is essential for browsers, search engines, and other services that interact with the page. The <head> section typically includes elements such as the document's title, character encoding, external stylesheets, and scripts.

Common Elements in the Head Section

  • <meta>: Provides metadata like the character set, author, description, keywords, and other information that helps with SEO and document settings.
  • <title>: Sets the title of the webpage, which is displayed in the browser tab or title bar.
  • <link>: Defines relationships between the current document and external resources, such as linking to external stylesheets (CSS).
  • <style>: Embeds internal CSS styles within the HTML document.
  • <script>: Embeds or links to JavaScript files that provide interactivity and dynamic functionality on the webpage.

Example of a Head Section

<head>
    <meta charset="UTF-8">
    <meta name="description" content="A webpage about HTML">
    <title>HTML Basics</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
</head>

3. The HTML Body Section

The <body> element contains the content that is visible to the users on a webpage. This section holds all the elements such as text, images, links, forms, and multimedia that users interact with. Everything that appears on the screen, from headings and paragraphs to buttons and tables, is placed inside the <body> section.

Common Elements in the Body Section

  • <h1> to <h6>: Define headings, with <h1> being the most important (usually the title of the page or section) and <h6> the least.
  • <p>: Defines a paragraph of text.
  • <a>: Defines a hyperlink to navigate to other pages or external resources.
  • <img>: Embeds an image on the webpage.
  • <form>: Defines a form for user input, such as text fields, checkboxes, and submit buttons.
  • <div>: Defines a division or section of the page, used for grouping content or styling with CSS.
  • <span>: Defines a small section of text, typically used for styling parts of a larger block of text.

Example of a Body Section

<body>
    <h1>Welcome to My Webpage</h1>
    <p>This is a paragraph of text that provides information about HTML.</p>
    <a href="https://www.example.com">Click here</a> to visit another page.
    <img src="image.jpg" alt="An example image">
</body>

4. Differences Between Head and Body Sections

Aspect Head Section Body Section
Purpose Contains metadata, links to external resources, and scripts. Contains the content that is visible to the user on the webpage.
Visibility Not visible to the user in the browser window. Visible to the user in the browser window.
Examples <meta>, <title>, <link>, <script> <h1>, <p>, <img>, <div>

The <head> and <body> sections are essential components of every HTML document. The <head> section provides metadata, links, and scripts that define the webpage’s structure and behavior, while the <body> section contains the visible content that users interact with. Understanding the difference between these two sections and their roles in web development is fundamental to creating effective and well-structured web pages.

logo

HTML

Beginner 5 Hours

HTML - Head & Body

1. Introduction

In HTML, the structure of a webpage is divided into two primary sections: the <head> and the <body>. These two sections serve distinct purposes, with the <head> containing metadata and resources related to the webpage, and the <body> containing the content that is visible to users. Understanding the roles of these sections is crucial for building well-structured HTML documents.

2. The HTML Head Section

The <head> element is a container for metadata about the HTML document. Metadata is information that is not displayed directly on the webpage but is essential for browsers, search engines, and other services that interact with the page. The <head> section typically includes elements such as the document's title, character encoding, external stylesheets, and scripts.

Common Elements in the Head Section

  • <meta>: Provides metadata like the character set, author, description, keywords, and other information that helps with SEO and document settings.
  • <title>: Sets the title of the webpage, which is displayed in the browser tab or title bar.
  • <link>: Defines relationships between the current document and external resources, such as linking to external stylesheets (CSS).
  • <style>: Embeds internal CSS styles within the HTML document.
  • <script>: Embeds or links to JavaScript files that provide interactivity and dynamic functionality on the webpage.

Example of a Head Section

<head>
    <meta charset="UTF-8">
    <meta name="description" content="A webpage about HTML">
    <title>HTML Basics</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
</head>

3. The HTML Body Section

The <body> element contains the content that is visible to the users on a webpage. This section holds all the elements such as text, images, links, forms, and multimedia that users interact with. Everything that appears on the screen, from headings and paragraphs to buttons and tables, is placed inside the <body> section.

Common Elements in the Body Section

  • <h1> to <h6>: Define headings, with <h1> being the most important (usually the title of the page or section) and <h6> the least.
  • <p>: Defines a paragraph of text.
  • <a>: Defines a hyperlink to navigate to other pages or external resources.
  • <img>: Embeds an image on the webpage.
  • <form>: Defines a form for user input, such as text fields, checkboxes, and submit buttons.
  • <div>: Defines a division or section of the page, used for grouping content or styling with CSS.
  • <span>: Defines a small section of text, typically used for styling parts of a larger block of text.

Example of a Body Section

<body>
    <h1>Welcome to My Webpage</h1>
    <p>This is a paragraph of text that provides information about HTML.</p>
    <a href="https://www.example.com">Click here</a> to visit another page.
    <img src="image.jpg" alt="An example image">
</body>

4. Differences Between Head and Body Sections

Aspect Head Section Body Section
Purpose Contains metadata, links to external resources, and scripts. Contains the content that is visible to the user on the webpage.
Visibility Not visible to the user in the browser window. Visible to the user in the browser window.
Examples <meta>, <title>, <link>, <script> <h1>, <p>, <img>, <div>

The <head> and <body> sections are essential components of every HTML document. The <head> section provides metadata, links, and scripts that define the webpage’s structure and behavior, while the <body> section contains the visible content that users interact with. Understanding the difference between these two sections and their roles in web development is fundamental to creating effective and well-structured web pages.

Related Tutorials

Frequently Asked Questions for HTML

  • HTML stands for HyperText Markup Language.
  • It is used to create the structure of web pages and web applications.
  • HTML defines elements such as headings, paragraphs, links, images, and other content.

  • Block-level elements (like <div>, <p>, <h1>) start on a new line and take full width.
  • Inline elements (like <span>, <a>, <strong>) stay within the flow of the text.
  • Understanding this helps with layout and styling.

  • A basic HTML page includes a <!DOCTYPE html> declaration, followed by <html>, <head>, and <body>.
  • The <head> section contains metadata like the title and links to stylesheets.
  • The <body> section contains all the visible content of the webpage.

  • The <meta> tag provides metadata such as page description, keywords, and author.
  • It helps browsers and search engines understand the content of the page.
  • One common use is specifying the character encoding: <meta charset="UTF-8">.

  • Forms collect user input using the <form> tag.
  • Inside a form, use <input>, <textarea>, <select>, and <button>.
  • The action attribute specifies where to send the form data.

  • The <label> tag defines a label for an input element.
  • It improves accessibility and allows users to click the label to focus the input.
    Example: <label for="email">Email:</label><input id="email">.

Comments in HTML are written between <!-- and -->.

Example:
<!-- This is a comment -->.
Comments are not displayed on the webpage and are used for documentation.

HTML entities are used to display reserved or special characters.

For example, &lt; displays < and &amp; displays &.
Use them to avoid confusion with actual HTML syntax.