👨🏿‍🌾 😽 🛂 List of basic HTML tags 👤 📊 🧘🏾

If you decide to create a site, then without the html hypertext markup language you will not go far. Of course, there is still CSS, PHP and other scripting languages, without which a full-fledged site, as you used to see it, will not work. However, it is the main html tags that will allow you to lay the foundation for your site.

The main tags, without which anywhere

When you open any html document or web page, you see a huge number of different tags. However, if you look closely, most of them are repeated, since they describe the same elements. For example, the main html tags include tags such as the document type <! DOCTYPE html>, <html>, <head>, <body>, <title>, <img>, <p> and others.

Document Type and html document declaration

To indicate the type of the current document, use the <! DOCTYPE> element. The browser needs it to recognize how to interpret a particular web page. Depending on which version of html you are using, this element will look different. In HTML5, it will take the following value: <! DOCTYPE html>

After you have specified what type your document belongs to, you should use the <html> tag. Like most other tags, it is paired, that is, it has opening and closing tags. The difference between the two is that there is a slash "/" before the closing tag. Thus, the most basic html tag for creating a site will look like this:

<html>

...

</html>

In this case, the rest of the code will be located between the opening and closing tags, which will enclose the entire contents of the web page.

<head> tag

This tag is also the main html tag. It is written after <html>, and is also paired and contains mainly metadata of a web page. This data is not displayed in the visible part of the html page (with the exception of the <title> tag, which contains the page name), but is used by the browser to display the document correctly. Also, the information located in this tag is used by various search engines. Example:

<head>

Metadata

<title> Page Title </title>

</head>

<body> tag

The main tag for the html site, because it contains all the visible elements of the page - all text, all pictures and other information. In essence, like the <html> tag, it is a container for other tags. Example:

<body>

Visible web page content

</body>

Headings and paragraphs

All of the above tags are the main tags of the html language. However, in the language of hypertext markup, there are still a huge number of other elements. For example, paragraph and heading tags. They allow you to structure the text, break it into separate paragraphs and highlight. So, for paragraphs, the <p> tag is used, it is a pair tag, between the opening and closing elements of which there is some text. Example:

<p>

Paragraph text

</p>

In addition to paragraphs, headings can also contain text. However, they also change the appearance of the text contained inside, increasing it in size and highlighting in bold. There are 6 types of headings that vary in size. For example, the header <h1> is the largest, and the header <h6> is the smallest.

Using Images

No site can do without images, pictures and photographs. Indeed, without this, web pages would be a dry text, uninteresting for study. In order to embed any image on a site, the <img> tag is used in the hypertext markup language. It is important to note that this tag is not paired, so in the code it will be written as <img />.

Hyperlinks in the text

Often, in addition to text and various images, links are used on sites. They can redirect to a third-party resource or to another page of your site. To indicate the presence of a link, the <a> tag is used.

What are attributes?

We figured out some basic tags a bit. However, most tags also have attributes. They are registered in the opening element and consist of two parts. The first is the name of the attribute itself, the second is the value of this attribute, which is written after the "=" sign and is enclosed in quotation marks.

The main attributes of html tags

Many tags have attributes. However, for some tags, their presence is optional if you do not want to modify the elements in any way. For other tags, the presence of attributes is mandatory, such as, for example, the <a> tag (for creating hyperlinks) and the <img /> tag (for adding images to the page). The thing is that if we do not indicate the attributes and their values in these basic html tags, then we will not see them on the site page.

Attributes for the <a> tag

If you specify in the code the text enclosed in the <a> tag, then in addition to this text on the web page you will not see anything. The tag itself, in fact, only speaks of the intention to create a hyperlink, and in order to really create it, you need an attribute. This attribute will be href, and the value of this attribute will be a specific resource reference. Thus, if we want to create a link to the site fb.ru, it will look like this:

So all the text that is between the <a> tags is a hyperlink, and the value of the href attribute, enclosed in double quotes, will be the address that we will go to by clicking on the text.

Src attributes for <img />

The situation is similar with the <img /> tag. If we do not indicate the attribute and its value with it, then the images on the web page will not appear. As in the case with the <a> tag, the presence of the <img /> tag only means that we are going to insert a photo in our code. However, in order for this image to appear, you must specify the address of this image. For these purposes, you will need to use the src attribute, the value of which will be the address of the image located on a third-party resource, or on your computer.

Alt attribute for <img /> tag

In addition, the <img /> tag has another attribute. It is not considered mandatory, but recognized as recommended for use. This attribute is the alt alt text attribute. The value of this attribute will be the text corresponding to the description of the photo or image. This text will be displayed if for some reason the image fails to load. In addition, using this attribute will help visually impaired people who use screen readers. Thus, the <img /> tag along with the two attributes provided will look like this:

<img src = https: //img.fonwall.ru/o/f7/zakat-more-palmy-plyazh-q85n.jpg

alt = "image description" />

What other attributes exist?

There are a huge number of attributes; their list is as huge as the list of basic html tags. However, there is an attribute that is inherent in a number of tags. This is align. It can be used with the <img /> tag, as well as with the <p> tag. Its essence is that it sets the position of the image or text on the page. The most basic values for this attribute are right and left, which indicate left and right alignment (respectively). If you apply it to an image, the code will look like this: