Body element
In our article on “Elements, Tags, Attributes and Values” we showed the theory behind a web page. Within this article and subsequent pages we’re going to show how you can put that theory into practice by using elements within a web page.
Here’s an example of how an HTML page may look with a number of new elements included within the <body> tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My first web page</title>
<meta name="description" content="Here's a description of this page" />
<meta name="keywords" content="my, first, webpage" />
<link type="text/css" rel="stylesheet" href="css/default.css" media="all" />
</head>
<body>
<h1>Page heading</h1>
<h2>Sub heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed placerat orci at elit pellentesque convallis viverra augue sagittis. Suspendisse potenti. Nam quis quam et nulla pulvinar sodales. Aenean eu molestie arcu.</p>
<p>Vestibulum volutpat odio vel elit auctor vulputate. <a href="#">Proin suscipit auctor</a> elit ut venenatis. Vivamus pellentesque consequat blandit. Cras tellus eros, venenatis sed bibendum vel, varius in diam. </p>
<p>Phasellus vehicula fermentum eros, in posuere lorem ultricies auctor. Vestibulum ligula nunc, fermentum a aliquam non, rhoncus non leo. Nullam gravida ipsum vel quam porttitor vel consequat eros rutrum. </p>
<p>Praesent volutpat hendrerit volutpat. Maecenas sodales dignissim ultrices.</p>
<ul>
<li>Unordered List item</li>
<li>Unordered List item</li>
<li>Unordered List item</li>
<li>Unordered List item</li>
</ul>
<ol>
<li>Ordered List item</li>
<li>Ordered List item</li>
<li>Ordered List item</li>
<li>Ordered List item</li>
</ol>
<img src="images/graphic.jpg" alt="Jelly Beans" />
</body>
</html>By default, everything that you place between the opening <body> and closing </body> tags will appear on the page when it is displayed in a web browser.
Over the next few pages we’re going to explain what each of these new tags do and when they should be used.
