HTML Body

In the HTML Element lesson you’ve seen that every HTML document can be divided into two main sections. The first one is the head section which you’ve learned in HTML Head lesson. And, the second one is the body section. After the closing tag of the head section (which is </head>), body element is the very next element in the HTML document.

html document structure & body element

Attributes of body element

There is no required attributes or optional attributes for the body element. But, you can use global attributes (ex. id or class) in the body element when it is required. See the following example-

<!doctype html>
<html lang="en">
    <head>
        <title>Optional body element test</title>
    </head>
    <body id=”about-us” class=”general”>
        <p>If you don’t add html element, browser will do it for you.</p>
    </body>
</html>

In the above example, we used 2 global attributes in the body element. One is id attribute which uniquely identify this page, and the other one is class attribute which could classify this page with other pages. These attributes play important roles in writing CSS (Learn more about CSS on CSS for Beginners Course) and JavaScript (Learn more about JavaScript on JavaScript for Beginners Course).

body element contains the entire apparent part

The various types of content that we see in every web page such as texts, images, audios, videos, forms, etc in the main browser window are written inside body element. <body> tag indicates the beginning of the page’s content and </body> tag indicates the end. It acts as the container of all the page-content.

Different types of contents are written inside body element. Each type of content is written in each predefined element. Various content types could be-

  • Heading – This specify the titles or headings of a page. <h1>, <h2>, <h3>, <h4>, <h5>, <h6> elements are used to specify a heading. To learn more on headings, click HTML Headings.
  • Paragraphs – <p></p> tag pair is used to specify a paragraph. To learn more on paragraphs, click HTML Paragraphs.
  • Lists – List is a collection of similar items. To learn more on lists, click HTML Lists.
  • Links –  <a> tag is used to specify a link. To learn more on links, click HTML Links.
  • Tables – <table></table> tag pair is used to specify a table. To learn more on tables, click HTML Tables.
  • Forms – <form></form> tag pair is used indicate a form. To learn more on forms, click HTML Forms.
  • Iframes – <iframe></frame> tag pair is used to display content of different document in the current document. To learn more on iframes, click HTML Iframes.
  • And, many others

body element is optional

body element is the optional element in HTML document. That means if you write the web page without mentioning opening <body> and closing </body> tags and view the page in a browser, you’ll see the missing body element is added by the browser. See the following example-

<!doctype html>
<html lang="en">
    <head>
        <title>Optional body element test</title>
    </head>
        <p>If you don’t add html element, browser will do it for you.</p>
</html>

In the above example, we’ve not added body element. Running the page go to view source option in the browser (in firefox it is ctr+u), you’ll see the same HTML code that you see above but with the <body> </body> tags are included in the proper position.

  1. It is good practice and recommended to mention body element while you write your HTML codes.
  2. No more than one body element is allowed in every HTML document.
<< HTML Scripts : Previous Lesson Next Lesson : Semantic HTML >>