Tags and elements are the structuring components of a page.
Elements identify the different parts of a page, such as paragraphs, headings, titles, body text, images and more. Elements are demarcated by tags which enclose the content of an element (ex. <head>
and <head>
are tags that denote the head section of your page).
Tags demarcate elements in one of two ways. As with the paragraph element below, an element can have an opening and a closing tag, with the content in between.
<p>This is a paragraph.</p>
Elements which have an opening and closing tag can have other elements inside them.
<p>When I came home from school, I saw he had <strong>stolen</strong> my chocolate pudding.</p>
Note: The <strong>
tag indicates bolded text.
Other elements have self-closing tags as with the image element below. These tags are also called void tags These elements don't require a separate closing tag, and these tags don't require a closing tag because you wouldn't add an element into this element.
<img src="image.jpeg">
If you look back at the basic template in your index.html
file, you'll see that the main sections of your file have opening and closing tags. This is because each of these main elements contains a number of more specific elements, many of which we'll discuss today.