Tags and attributes

Imagine building a house from scratch. You have bricks, windows, doors, and various decorations at your disposal. Each of these components plays a specific role in the construction and design of your home. Similarly, when building a webpage, HTML tags are your bricks and decorations, and learning to use them effectively is the first step in creating your website.

When a browser receives a HTML document, it analyzes the tags and uses them to form elements that we can see and interact with. The current HTML specification includes about 100 tags. Take a look at the complete list of all existing tags by MDN.

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.

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, let us consider the <p> tag. It represents a text paragraph:

<p>Hello, World!</p>

Here, <p> is a starting tag, Hello, World! 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.

Unpaired tags

Unpaired tags, also known as self-closing 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.

Nested tags

Tags can be nested within each other to combine formatting and structure:

<p>You have learned HTML <b>tags</b> <br>Congratulations!</p>

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

Copy the above nested tags snippet and paste it in the CodePen. The HTML line is rendered as:

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

HTML attributes

To extend the capabilities of individual tags and manage them easier, you 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:

<a href="https://hyperskill.org">The link</a>

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:

<img src="image.png"/>

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 you checking them out.

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!