How to use this constructor?
As the previous lesson explained, HTML is made out of tags, which look just like building blocks.
What is the structure of the tag?
// todo change
The tag consists of three main parts:
The tag name,
which is between the angle brackets < and >. For example, <html> is the tag name for the HTML element.
Example of tags are:
<p>This is a paragraph.</p>
<a href="https://example.com">This is a link</a>
<img src="image.jpg" alt="An image" />The tag name also closes the tag, which is done by adding a forward slash before the tag name. For example, </p> is the closing tag for the paragraph element. The closing tag has the same name as the opening tag, but with a forward slash before it. This indicates that the element has ended and no more content will be added to it.
The attributes section,
which is optional and is placed inside the opening tag. Attributes provide additional information about the element. For example, <html lang="en"> specifies that the language of the document is English.
Attributes are written as name-value pairs, separated by an equal sign. The value is enclosed in quotes. For example, lang="en" is an attribute that specifies the language of the document, and href="https://example.com" is an attribute that specifies the URL of the link. Multiple attributes can be added to the same tag, separated by spaces. For example, <img src="image.jpg" alt="An image" width="300" height="200"> has two attributes: src and alt, as well as width and height.
Example of attributes are:
<a href="https://example.com" target="_blank">This is a link</a>
<img src="image.jpg" alt="An image" width="300" height="200" />The inner content,
which is the text or other elements that are contained within the element. For example, <body>Hello, world!</body> contains the text “Hello, world!” inside the body element.
The inner content could be text, but could also be other elements. For example, <div><p>This is a paragraph.</p></div> contains a paragraph element inside a div element. The inner content can also be empty, which means that the element does not have any content. For example, <img src="image.jpg" alt="An image"/> is an image element that does not have any inner content.
<p>This is a paragraph.</p>
<div>
<p>This is a paragraph inside a div.</p>
</div>
<img src="image.jpg" alt="An image" />The most used tag in div, which is short for “division”. It is used to group elements together and apply styles or attributes to them. You can build your page using only div tags and it would not make any visual difference, but it would be very hard to read and understand. That is why we use other tags to make our code more readable and semantic, which will be discussed in the next lesson.
You might have noticed that some tags are self-closing, which means they do not have a closing tag. For example, the <img> tag is used to insert an image and does not have a closing tag. It is written as <img src="image.jpg" alt="An image">. Self-closing tags are also called “void elements” or “empty elements”. They do not have any inner content and do not require a closing tag. However, it is recommended to use a closing slash at the end of the tag, like this: <img src="image.jpg" alt="An image" />. This is not required, but it is a good practice to follow.
Questions
About the author
Vasil Kostadinov
Software developer, specializing in React, Next.js and Astro for the frontend, as well as in Supabase and Strapi for the backend. Creates content in all shapes & sizes in his free time.