Part Three: Common HTML Body Elements
heading elements
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Heading elements, as their name suggests, are used to differentiate the heading of a page from the rest of the content. These are not to be confused between the previously mentioned head and header elements. Yes… there really are head, header and heading elements in HTML pages.
The most important heading element is the h1 element and least important is the h6 element. Every page should have an h1 element. Search engine spiders pay attention to the words used in the h1 element. h1 elements are important for SEO.
The p element
<p>…</p>
The p element is probably the handiest and most commonly used of all HTML elements.
Example: <p>Did you know? Speed skating dates back over a thousand years to Scandinavia and the Netherlands.</p>
The img (image) element
<img>
The img element provides a means for embedding an image in the document. In the example below, the img element provides a reference to the image file to display, and a text alternative should the image not be available, for whatever reason.
<img src=”speed-skater.jpg” alt=”speed skater with tight green spandex suit” class=”floatRight”>
In our example above, we have three Attributes and three Values (in quotes) to describe our image of a speed skater. We can and should also use width and height attributes.
NOTE: Our class attribute, in the example, doesn’t do anything all by itself. It needs the help of CSS.
Let’s see what we have so far:
<html lang=”en”>
<head>
<title>Page Title Goes Here</title>
<meta charset=”utf-8″>
<meta name=”description” content=”Describe your page here using sentences.“>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<p><img src=”speed-skater.jpg” alt=”speed skater with tight green spandex suit” class=”floatRight”> Did you know? Speed skating dates back over a thousand years to Scandinavia and the Netherlands.</p>
</body>
</html>
In our example, we added our p element and nested our img element inside. We closed our p element with an end tag </p>, but not our img element, since it is a VOID element.
NOTE: If we were to see our page in a browser, we would only see a paragraph and an image of a speed skater on the page (as long as there is a real image included with the web page).
Now let’s take a close look at some new HTML5 Elements that are supposed to help make a cleaner and more efficient World Wide Web.
Return to Top