This content originally appeared on Envato Tuts+ Tutorials and was authored by Andy Leverenz
The <body> element in HTML is used to define the main content of an HTML document. A webpage’s visible content is typically contained within the <body> element.
The <body> element can be styled using CSS to change the appearance of the content contained within it. This is a great way to do a blanket reset or foundational styling of a web page.
Syntax
The <body> element typically follows the <head> element. They are “siblings”, and the two principal child elements of the <html> element.
Here’s the typical syntax:
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
<head>
|
4 |
<title>Page Title</title> |
5 |
</head>
|
6 |
<body>
|
7 |
<!-- Visible content goes here -->
|
8 |
</body>
|
9 |
</html>
|
Example
Here’s an example of a simple HTML document that uses the <body> element to define the main content of the page:
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
|
4 |
<head>
|
5 |
<title>My Page</title> |
6 |
</head>
|
7 |
|
8 |
<body>
|
9 |
<header>
|
10 |
<h1>Welcome to My Page</h1> |
11 |
<nav>
|
12 |
<ul>
|
13 |
<li>
|
14 |
<a href="#">Home</a> |
15 |
</li>
|
16 |
<li>
|
17 |
<a href="#">About Us</a> |
18 |
</li>
|
19 |
<li>
|
20 |
<a href="#">Contact</a> |
21 |
</li>
|
22 |
</ul>
|
23 |
</nav>
|
24 |
</header>
|
25 |
<main>
|
26 |
<h2>About Us</h2> |
27 |
<p>
|
28 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel enim vel nisl scelerisque convallis. Sed vel tellus vitae est sagittis eleifend. Duis euismod malesuada arcu id blandit. |
29 |
</p>
|
30 |
<h2>Contact Us</h2> |
31 |
<p>
|
32 |
123 Example St<br />Theville, XX 12345<br />Phone: 555-555-5555<br />Email: |
33 |
example@example.com |
34 |
</p>
|
35 |
</main>
|
36 |
<footer>
|
37 |
<p>© 2023 Some Company. All rights reserved.</p> |
38 |
</footer>
|
39 |
</body>
|
40 |
|
41 |
</html>
|
In this example, the <body> tag contains the page’s header, main content, and footer.
Deprecated Attributes
The HTML <body> element historically has several attributes for specifying additional information about the element.
-
bgcolor: specifies the background color of the page. -
text: specifies the default text color for the page. -
link: specifies the color of unvisited links on the page. -
vlink: specifies the color of visited links on the page. -
alink: specifies the color of active links on the page.
Content
The <body> element can contain a wide variety of content, including headings, paragraphs, lists, images, videos, and more. It is typically used to define the main content of a webpage.
Did You Know?
- The
<body>tag is required in every HTML document, as it contains the page’s visible content. - The content of the
<body>element can be changed dynamically using JavaScript. -
Set the
<body>tag’scontenteditableattribute totrueand you can edit its content directly in the browser. The perfect notepad! Check out the following example:
Learn More
This content originally appeared on Envato Tuts+ Tutorials and was authored by Andy Leverenz
Andy Leverenz | Sciencx (2023-05-08T09:11:16+00:00) HTML Element: body. Retrieved from https://www.scien.cx/2023/05/08/html-element-body/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.