About elements
Elements are the basic building blocks of the HTML page. Each element represents something on the page, such as a paragraph or an image, or even a defined area on the page, such as a box.
The HTML code for each element begins with an 'opening' tag and finishes with a 'closing' tag. The opening tag consists of a pair of angle brackets enclosing the name (or abbreviated name) of the element. The closing tag is the same, but with a forward slash before the element name.
<element name> </element name>
The tags for nearly all the other elements follow the same pattern (there are a few exceptions without a closing tag), with the closing tag differing only by having a slash. While there are many types of element used in HTML, in practice a beginner can achieve a lot with just a small number of them. Shown below are a few common examples:
Paragraph element
For a paragraph element, the opening tag is <p> and the closing tag is </p>.
<p> (text goes in here) </p>
Heading elements
There are six heading elements, from h1 to h6, the most important to the least important. Using heading levels appropriately gives your document a logical structure; this helps browsers and assistive technologies to function properly.
<h1> (heading goes in here) </h1>
<h2> (heading goes in here) </h2>
<h3> (heading goes in here) </h3>
<h4> (heading goes in here) </h4>
<h5> (heading goes in here) </h5>
<h6> (heading goes in here) </h6>
You'll learn about some more common elements in the next lesson.
Block and inline elements
Each element is of the 'block' or 'inline' type. This affects how the element is displayed in relation to other elements.
- Block: The element will begin on a new line and by default use all the available width. The following element (of either type) will begin on a new line.
- Inline: The element takes up only as much horizontal space as it needs. An inline element that follows will be displayed alongside it.
You will find out more about block and inline elements when you learn about the 'Display' property in Lesson 21.
Attributes
Elements often have an 'attribute' in the opening tag. An attribute modifies the element in some way or provides it with some functionality. The name of the attribute is followed by the value, as shown below:
<p attribute="value"> (text goes in here) </p>