Tags and Attributes

A Tag is an element of the Hypertext Markup Language. These are the smallest building blocks that make up any web page. Each tag indicates an item: heading, list, text paragraph, image.

To separate tags from the document text, angle brackets are used, inside of which the tag name and attributes are contained.

<tag_name>...</tag_name>

The opening tag shows where an element begins, while the closing tag indicates where it ends. To make the closing tag, add a slash (/) before the tag name. Between the opening and closing tags, there is the content of the tag.

Tag examples.

<section>Section</section>
<p>Paragraph</p>
<a>Link</a>
<button>Button</button>

Comments

Comments are used to make an explanation or a note in the source code, to temporarily comment out a code section, etc.

<!-- This is a comment; its content will not be displayed on the page -->

<p>This is a text paragraph; it will be displayed on the page.</p>

<!--
  Comments can be multi-line.
  This is convenient for larger descriptions.
-->

Attributes

Attributes are additional tag settings that you can use to change the properties and behavior of an element. Each tag has optional and required attributes; there may be several of them or none at all.

Attributes are specified inside the opening tag, and their values are enclosed inside double quotes. Several attributes are separated by a space.

<a href="https://google.com" class="link">...</a>

<img src="cat.jpg" alt="cute cat" />

<input type="text" name="user_name" />

<button type="submit">...</button>

<p class="text">...</p>

Let's look at some of the attributes of the <a> tag.

<a href="http://google.com" target="_blank" title="Google Search Engine">
  Google.com
</a>

• href is the address of the web page that will be accessed when clicking on the link text.
• target indicates in which tab the page will open when clicking on the link.
• title adds a tooltip to the link text.

Let's look at some of the attributes of the <img> tag.

<img
  src="https://picsum.photos/640/480"
  alt="Arbitrary image from the generator"
/>

• src is the image URL.
• alt is an alternative text that will be shown if the image is not loading.

Paired tags

They consist of opening and closing tags that wrap around the content, enabling changes to its properties or display, and grouping by meaning. Other tags can be nested inside paired tags, like a nesting doll.

<!-- Article with a heading and paragraph -->
<article>
  <h1>Paired tags in a nutshell</h1>
  <p>
    Most of the tags are paired. Their content is enclosed between the opening
    and closing tags.
  </p>
</article>

Single tags

They consist only of an opening tag, do not contain any text content and get their content or behavior from their attributes. They are used to change document properties, link files, etc.

<!-- Charset metadata -->
<meta charset="utf-8" />

<!-- Input field -->
<input type="text" />

<!-- Image -->
<img src="cat.jpg" alt="cool cat" />

Note

In previous HTML standards, single tags always had a slash / before the closing bracket. For example <img /> or <input />. In the modern standard, this is optional and does not affect anything.

Tag nesting

While adhering to some rules, tags can be nested within each other. When nesting, follow the closing order according to the nesting doll principle.

<tag1>
  <tag2>
    <tag4>...</tag4>
    <tag5>...</tag5>
  </tag2>
  <tag3>
    <tag6>...</tag6>
  </tag3>
</tag1>

Here is valid markup of a paragraph with a link and highlighted text, and that of a list of advantages with a description.

<p><a href="squoosh.app">Squoosh</a> - image <em>optimization</em> service.</p>

<p>Advantages</p>
<ul>
  <li>Runs in web browsers</li>
  <li>Does not overload the system</li>
  <li>User-friendly interface</li>
</ul>

This version is flawed (lines are highlighted).

<!-- The tag closing order is not respected -->
<p><a href="squoosh.app">Squoosh</a> - image <em></a>optimization</p> service.</em>

<!-- Tag nesting rules are not followed -->
<ul>
  <p>Advantages</p>
  <li>Runs in web browsers</li>
  <li>Does not overload the system</li>
  <li>User-friendly interface</li>
</ul>