HTML body tag
Example
A simple HTML document:
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Definition and Usage
The <body> tag defines the document's body.
The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
Note: There can only be one <body> element in an HTML document.
Global Attributes
The <body> tag also supports the Global Attributes in HTML.
Event Attributes
The <body> tag also supports the Event Attributes in HTML.
More Examples
Example
Add a background image to a document (with CSS):
<head>
<style>
body {
background-image: url(pi.png);
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p><a href="https://pinfinitys.com">Visit PI.com!</a></p>
</body>
Example
Set the background color of a document (with CSS):
<head>
<style>
body {
background-color: #E6E6FA;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p><a href="https://pinfinitys.com">Visit PI.com!</a></p>
</body>
Example
Set the color of text in a document (with CSS):
<head>
<style>
body {
color: green;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>This is some text.</p>
<p><a href="https://pinfinitys.com">Visit PI.com!</a></p>
</body>
</html>
Example
Set the color of unvisited links in a document (with CSS):
<head>
<style>
a:link {
color:#0000FF;
}
</style>
</head>
<body>
<p><a href="https://pinfinitys.com">Visit PI.com!</a></p>
</body>
</html>
Example
Set the color of active links in a document (with CSS):
<head>
<style>
a:active {
color:#00FF00;
}
</style>
</head>
<body>
<p><a href="https://pinfinitys.com">Visit PI.com!</a></p>
</body>
</html>
Example
Set the color of visited links in a document (with CSS):
<head>
<style>
a:visited {
color:#FF0000;
}
</style>
</head>
<body>
<p><a href="https://pinfinitys.com">Visit PI.com!</a></p>
</body>
</html>
Default CSS Settings
Most browsers will display the <body> element with the following default values:
Example
display: block;
margin: 8px;
}
body:focus {
outline: none;
}
Comments
Post a Comment