HTML Body Tag

One of the most important tags in HTML is the body tag. Each HTML document must include this tag. In this tutorial, you will study the HTML <body> tag.

What Is HTML <body> Tag?

The <body> tag in HTML defines the main content of an HTML document. It encloses all of the content displayed in the web browser when the page is loaded, including text, images, links, and other HTML elements.

  • The <body> tag is a container element that surrounds all the content visible to the user in the web browser, including headings, paragraphs, lists, images, and other tags.
  • The <body> tag should be placed inside the <html> tag after the <head> tag. The <head> tag defines metadata for the page, such as the title and any linked stylesheets or scripts. The <body> tag contains the page's actual content displayed to the user.
  • This <body> tag is always present or enclosed within the </html> tag.
  • A <body> tag consists of a start and an end tag.
  • The </body> end tag is the final ending of a webpage just before the </html> end tag.

Here is an example of how to use the <body> tag:

Example:

<html>
  <head>
    <title>Webpage Title</title>
  </head>
  <body>
    <h1>Welcome to My Webpage</h1>
    <p>This is the main content of this document.</p>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link n</a></li>
    </ul>
  </body>
</html>

In the above example, the <body> tag encloses a heading and paragraph elements, and the unordered list element, which forms the page's main content.

HTML <body> Tag Attributes

The <body> tag can also define the page's appearance, using style attributes such as bgcolor and text.

Example:

<body bgcolor="#ffffff" text="#000000">

This will set the page's background color to white and the text color to black. However, it is worth noting that style attributes are generally discouraged in modern HTML, as it is better to use separate CSS stylesheets to define the page's appearance.

The <body> tag in HTML can have several attributes used to determine the appearance and behavior of the page. Here are some of the most common attributes that can be used with the <body> tag:

  • bgcolor: This attribute is used to set the page's background color. It takes a color value in a named color (e.g., red) or a hexadecimal value (e.g., #ff0000).
  • text: This attribute is used to set the color of the text on the page. It takes a color value in either a named color or a hexadecimal value.
  • link: This attribute is used to set the color of unvisited links on the page. It takes a color value in either a named color or a hexadecimal value.
  • vlink: This attribute is used to set the color of visited links on the page. It takes a color value in either a named color or a hexadecimal value.
  • alink: This attribute is used to set the color of active links on the page. It takes a color value in either a named color or a hexadecimal value.
  • onload: This attribute is used to specify a JavaScript function that will be executed when the page finishes loading. It is often used to perform initialization tasks or to set up event handlers.
  • onunload: This attribute is used to specify a JavaScript function that will be executed when the user leaves the page. It is often used to perform cleanup tasks or save the page's state.
  • class: This attribute is used to assign a class name to the <body> element. The class name can be used in a CSS stylesheet to define the page's appearance.
  • id: This attribute is used to assign a unique identifier to the <body> element. The identifier can be used in a CSS stylesheet or a JavaScript script to refer to the element.

It is worth noting that many of these features are deprecated in HTML5 and should not be used in new web development projects. Instead, use CSS stylesheets and JavaScript to define the appearance and behavior of the page.

Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram