Learn HTML – Part 3 – body Tag Explained (Visible Content Guide)

Learn HTML – Part 3 – body Tag – Displaying Visible Content

The HTML body tag contains all the visible content of a webpage. Everything you see on a website is placed inside the body tag.

Text, images, links, videos, lists, tables — all are written inside this section.


What is the body Tag?

The body tag is placed inside the html tag and comes after the head section.

Unlike the head tag, the content inside the body tag is visible to users.


Basic Structure

<!DOCTYPE html>
<html>
   <head>
      <title>My Page</title>
   </head>
   <body>
      <h1>Welcome</h1>
      <p>This is my first webpage.</p>
   </body>
</html>

Everything between <body> and </body> is displayed in the browser window.


What Can Be Placed Inside body?

  • Headings (h1 to h6)
  • Paragraphs (p)
  • Images (img)
  • Links (a)
  • Lists (ul, ol)
  • Tables (table)
  • Forms (form)

Example – Simple Web Page Content

<body>
   <h1>Learn HTML</h1>
   <p>HTML is the foundation of web development.</p>
   <a href="#">Read More</a>
</body>

Output:

Learn HTML

HTML is the foundation of web development.

Read More


body vs head – Key Difference

Featureheadbody
Visible to Users?NoYes
ContainsMetadataPage Content
SEO RoleMeta InformationContent Structure

Important Notes

  • Every HTML document must have one body tag.
  • It should come after the head tag.
  • All visible elements must be placed inside it.

If the body tag is missing, the webpage will not display content correctly.


Conclusion

The HTML body tag is where all visible webpage content is written.

It works together with the html and head tags to form the complete structure of a webpage.

What’s Next?

Now that you understand the body tag, the next step is learning about heading tags, which help structure content and improve readability on a webpage.

Next: Learn HTML – Part 4 – Heading Tags – h1 to h6 Explained →


Series: Learn HTML Series

Facebook
WhatsApp
Twitter
LinkedIn
Pinterest

Leave a Comment

Your email address will not be published. Required fields are marked *

Related Articles from the Series

learn-html-part-63-complete-html-project-thumbnail
Learn HTML – Part 63 – Complete HTML Project (Build a Web Page)
Learn HTML – Part 63 – Complete HTML Project In this final lesson, we will build a complete HTML webpage...
learn-html-part-62-time-tag-date-time-thumbnail
Learn HTML – Part 62 – time Tag – Date & Time
Learn HTML – Part 62 – time Tag – Date & Time The HTML time tag is used to represent dates and times...
learn-html-part-61-mark-tag-highlight-text-thumbnail
Learn HTML – Part 61 – mark Tag – Highlight Text
Learn HTML – Part 61 – mark Tag – Highlight Text The HTML mark tag is used to highlight text that is...
learn-html-part-60-figcaption-tag-figure-caption-thumbnail
Learn HTML – Part 60 – figcaption Tag – Figure Caption
Learn HTML – Part 60 – figcaption Tag – Figure Caption The HTML figcaption tag is used to define a caption...
learn-html-part-59-figure-tag-media-content-thumbnail
Learn HTML – Part 59 – figure Tag – Media Content
Learn HTML – Part 59 – figure Tag – Media Content The HTML figure tag is used to group media content...
learn-html-part-58-track-tag-video-subtitles-thumbnail
Learn HTML – Part 58 – track Tag – Video Subtitles
Learn HTML – Part 58 – track Tag – Video Subtitles The HTML track tag is used to add subtitles, captions,...
learn-html-part-57-source-tag-media-sources-thumbnail
Learn HTML – Part 57 – source Tag – Media Sources
Learn HTML – Part 57 – source Tag – Media Sources The HTML source tag is used to define multiple media...
learn-html-part-56-picture-tag-responsive-images-thumbnail
Learn HTML – Part 56 – picture Tag – Responsive Images
Learn HTML – Part 56 – picture Tag – Responsive Images The HTML picture tag is used to display responsive...
learn-html-part-55-dialog-tag-modal-dialog-thumbnail
Learn HTML – Part 55 – dialog Tag – Modal Dialog
Learn HTML – Part 55 – dialog Tag – Modal Dialog The HTML dialog tag is used to create modal or popup...
learn-html-part-54-summary-tag-details-caption-thumbnail
Learn HTML – Part 54 – summary Tag – Details Caption
Learn HTML – Part 54 – summary Tag – Details Caption The HTML summary tag is used to define a visible...
Scroll to Top