Tags and Attributes

Theory

HTML documents consist of words that contain instructions on how to display a web page properly. These instructions are called tags. They indicate which block to display.

When a browser receives an HTML document, it analyzes the tags and uses them to form elements that we can see and interact with. In other words, tags are the bricks that build a web page. The current HTML specification includes about 100 tags. Take a look at the complete list of all existing tags by W3SchoolsEN.TheBest. It will take time to memorize them all!

Tag syntax is very simple. The name of an element is written between the < and > symbols. Tag names are case-insensitive, but it is considered good practice to write them in lowercase.

All tags in HTML are divided into two main types: paired and unpaired. Let's consider them both in more detail.

§1. Paired tags

Paired HTML tags consist of two instructions — an opening tag (also called a starting tag) that marks the beginning of a block, and a closing tag that looks the same but with an additional slash /.

As an example, we will consider the <p> tag. It represents a text paragraph:

Here, <p> is a starting tag, Some kind of a text is the content, and </p> is a closing tag.

The tags are basically containers where we can put (enclose) something. Paired HTML tags usually contain either other tags or some information, for instance, text.

§2. Unpaired tags

Unpaired tags have no content inside. They form graphic HTML elements or symbols on a page. So, unpaired HTML tags have only an opening tag.

Here is an example of an unpaired tag:

<hr>

A browser will draw a horizontal line once it detects this tag. Another example of an unpaired tag is <br> that defines a single line break.

§3. Nested tags

Tags can be also nested:

Here, <b> is used to bold a word.

This HTML line is rendered as:

You have learned HTML tags
Congratulations!

A nested tag must be closed before closing the initial one.

The outer tag is called a parent element, and the inner tag is a child element.

§4. Tag attributes

To extend the capabilities of individual tags and manage them easier, we can use attributes. Attributes are clarifications for the browser on how to display a tag.

Each HTML attribute consists of names and values. The following example shows the syntax of attributes:

Here, the <a> tag means a link, href is the name of an attribute, and "https://hyperskill.org" is the value. The attribute is assigned to a value with an equals sign =. HTML allows you to specify attribute values without quotes if they consist of one word. However, using quotes is a good practice. The value of an attribute can be enclosed in double or single quotes ("" or '').

Another important feature of the HTML attribute syntax is that an attribute must be written in the angle brackets:

In this example, an image is added to a web page with the unpaired <img> tag. A link to the file is specified in the src attribute. The value of the attribute is the reference to the desired image.

There are many attributes out there. It can be worth your while checking them out.

You can also view the complete guide to HTML tags.

§5. Conclusion

In this topic, we have covered several useful tags and some attributes. Tags provide information to the browser about the structure of a web page. Remember that the name of a tag is enclosed between < and > in lowercase. They are subdivided into opening and closing, paired and unpaired. Each subtype has its own purpose. Tag attributes also play a vital role. They refine tags and provide additional information about tags and help your browser. HTML comprises a good number of tags and attributes; some are common, some are not. But remember — practice makes perfect!

You can also view the Lesson on hyperskill.org.

Practical tasks and answers

Tasks and answer options are given. The correct option is highlighted in blue color.

№1. The name of a tag

Question: Fill the phrase. Tag names are case-insensitive, but it is considered good practice to write them in ...

Select one option from the list:

• uppercase
• lowercase or uppercase
• camelCase
• lowercase ✔
• uppercase and under_score
• under_score

Explanation. Tag names are case-insensitive, but it is considered good practice to write them in lowercase.

№2. Tags

Question: Select all opening tags.

Select one or more options from the list:

• <a> ✔
• <p> ✔
• </p>
• href="#"

№3. Good syntax

Question: Select the correctly written tag with the correct attribute:

Select one option from the list:

• <img src="image.jpg"></img>
• <img src"img.jpg"></img>
• <img src="img.jpg"> ✔
• <img src=image.jpg>

№4. Nested tags

Question: What code do you need to write to get a result like in the image below?

Hello, learner!
How is it going?

Select one option from the list:

• <p>Hello, <b>learner!<br>How is it going?</p></b>
• <p>Hello, <b>learner!<br>How is it going?</b></p>
• <p>Hello, <b>learner</b>!<br>How is it going?</p> ✔
• <p>Hello, <b>learner</b>! How is it going?</p>

№5. Paragraph of text

Question: Recall which tag is used to write paragraphs of text and display a text on a web page. Highlight some parts of the text in bold using the <b> tag. Finally, add a horizontal line to the page. Add only one paragraph with a text.

Write HTML and CSS code:

№6. h1 tag

Question: Include the following text I like to learn new things! in the paired header tag <h1> of the first level.

Enter a short text: <h1>I like to learn new things!</h1> ✔

№7. Drawing HTML elements

Question: What helps a browser understand which elements of a web page to render?

Select one option from the list:

• tags ✔
• attributes
• values
• properties

№8. Decoding the HTML img Element

Question: Consider the following HTML code snippet. Which statements are accurate regarding tags and attributes?

Select one or more options from the list:

• The 'src' attribute specifies the URL of an image, the 'alt' attribute provides alternative text, and the 'class' attribute assigns a CSS class to the element ✔
• The element is a self-closing tag with three attributes: src, alt, and class ✔
• The 'src' attribute assigns a CSS class, the 'alt' attribute specifies a link, and the 'class' attribute provides alternative text
• The element is an opening tag with three attributes: src, alt, and class
• The element is an opening tag without any attributes and should be followed by a closing tag