Note that this site is in currently in version 1.0.0-alpha.   Some functionality may be limited.

4. Tags and Elements

Tags and elements are the structuring components of html webpages.

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 element 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>
<p>
    This is also a paragraph.
</p>

Elements which have an opening and closing tag can have other elements inside them. Inside the paragraph element below is a <strong> element, which emphasizes the included text by making it bold.

<p>
    When I came home from school, I saw he had <strong>stolen</strong> my chocolate pudding.
</p>

Other elements have self-closing tags as with the <img> (image) element below. These tags are also called void tags.

<img src="image.jpeg" />

These elements don’t require a separate closing tag. Closing tags aren’t needed because you wouldn’t add content inside these elements. For example, it doesn’t make sense to add any additional content inside an image. It is common practice to end void tags like the one above with a / to mark the end of it.

Below is HTML that adds alternative text to an image—or text that describes the image. This information added is an attribute—or something that modifies the default functionality of an element.

<img alt="This is an image" src="image.jpeg" />

Adding alternative text to an image, as was done in this example, is vitally important. That information makes the image more accessible to those viewing your site. For instance, users with poor vision who may not be able to see your image will still understand what it is and why it’s there if you provide alternative text describing it.

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. Each of these main elements will eventually hold many other elements, many of which will be the content of our website.

Challenges for lesson 4

Questions

Try again!

Which one of the following statements is correct:

(Select one of the following)

Terms Used in Lesson

Can you define the terms below? Hover over each of them to read a preview of the definitions.

Elements

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 …

See term page

Tag

Tags are used in HTML to apply elements. Tags are contained within < > symbols.

See term page

Workshop overall progress