HTML <body> Tag

We’ll talk about Html Tag body in this post, wishing it would satisfy the requirements for learning.

The HTML <body> tag represents the main content of an HTML document, and it contains all the visible content that is displayed in the web browser.

The <body> tag is a required tag in every HTML document, and it is placed immediately after the <head> tag. The content of the <body> tag is where you would typically place all of the HTML elements that make up the visible part of your web page, such as text, images, links, forms, and other HTML elements.

Uses:

Some common uses of the <body> tag include:

  • The <body> tag is where you would add all of the visible content on your web page, such as text, images, videos, and other media elements.
  • The <body> tag is also where you would create hyperlinks that allow users to navigate to other pages or websites.
  • If you need to collect user input on your web page, such as through a contact form or login form, you would typically add the form elements within the <body> tag.

The basic HTML document is as follows:

Example: 

<!DOCTYPE html> <html> <head> <title>Title of the html page.</title> </head><body> <h1>This is a heading 1</h1> <p>And this is a paragraph.</p> </body> </html>

Utilizing CSS, you can add a background image to a document:

Background Image Example:

<!DOCTYPE html> <html><body><p>Example:Execute</p> <style> body {background-image: url(mrx.png); } </style><h1>Test a document</h1> <p><a href="https://mrexamples.com">Open mrexamples.com!</a></p></body></html>

The following CSS code can be used to set the background color of a document:

Background Color Example:

<!DOCTYPE html> <html><body><p>Example:Execute</p> <style> body { background-color: lightgrey; } </style><h1>Background Color example</h1> <p><a href="https://mrexamples.com">Open mrexamples.com!</a></p></body></html>

The following CSS code sets the text color in a document:

Text Color Example

<!DOCTYPE html> <html><body><p>Example:Execute</p> <style> body { color: blue; } </style><h1>Text color example</h1> <p>This is paragraph text.</p> <p><a href="https://mrexamples.com">Open mrexamples.com!</a></p></body></html>

Unvisited links can be colored (using CSS) as follows:

Unvisited Links Color Example:

<!DOCTYPE html> <html><body><p>Example:Execute</p> <style> a:link { color:#000FFF; } </style><p><a href="https://mrexamples.com">mrexamples.com</a></p> <p><a href="https://mrexamples.com/html/">Tag Body</a></p></body></html>

To set the color of active links in a document (using CSS), follow these steps:

Active Link Color Example

<!DOCTYPE html> <html><body><p>Example:Execute</p> <style> a:active { color:#00FF00; } </style><p><a href="https://mrexamples.com">mrexamples.com</a></p> <p><a href="https://mrexamples.com/html/">Active link color</a></p></body></html>

Using CSS, you can change the color of visited links in a document:

Visited Links Color Example

<!DOCTYPE html> <html><body><p>Example:Execute</p> <style> a:visited {color:#FF0000;} </style><p><a href="https://mrexamples.com">mrexamples.com</a></p> <p><a href="https://mrexamples.com/html/">Visited Link Color</a></p></body></html>

Here is another example of the body tag with different tag inside it:

Example: 

<!DOCTYPE html> <html> <head> <title>Mr Examples</title> <style> body { background-color: lightblue; font-family: Arial, sans-serif; text-align: center; } h1 { color: darkblue; } </style> </head> <body> <h1>Welcome to my Mr Examples</h1> <p>This is the main content of my webpage.</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <p>Copyright 2023 Mr Examples</p> </body> </html>


Uses and Definition

The Tag body <body> specifies the body in a document.

HTML documents include all sorts of content in their bodies, such as headings, paragraphs, images, hyperlinks, tables, and lists.

Keep in Mind: HTML documents can only contain one <body> element per page.

CSS Default Settings

Thus many browsers will present the following default values for the Tag body <body> element:

body {
display: block;
margin: 8px;
}body:focus {
outline: none;
}

Browser Compatibility

Element
<body>YesYesYesYesYes

Global Attributes

The Tag body <body> also functions with the Global Attributes in HTML.


Event Attributes

The Event Attributes are also compatible with the <body> tag in HTML.<!–

Advertisement

–><!–

mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]

–>


Importance of <body> tag

Some of the key reasons why the <body> tag is so important are:

  • The <body> tag helps to structure the content of a web page, by providing a container for all the visible content on the page. This makes it easier to organize and arrange the content of the page, and ensures that the page is well-structured and easy to navigate.
  • The <body> tag is where all the main content of the web page is placed, such as text, images, videos, and other multimedia elements. This is the content that is seen by the user and is the reason why they are visiting the page in the first place.
  • The <body> tag is also important for accessibility, as it allows screen readers and other assistive technologies to identify the main content area of the page. This ensures that the content is accessible to all users, including those with disabilities.
  • The content placed within the <body> tag is also important for search engine optimization (SEO). Search engines use the content within the <body> tag to determine the relevance of the page for specific search queries, and to rank the page accordingly in search results.
Don’t forget to leave your feedback in a form a reaction below, as the source of appreciation or a suggestions to invoke improvement on this site.
We value your feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!
icon

Leave a Reply

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