HTML элементы. Полный справочник тегов
You might get unexpected results if you omit the https:// or http:// part, called the protocol, at the beginning of the web address. After making a link, click it to make sure it is sending you where you wanted it to.
Html kodları
In this article, we will see the HTML Basics by understanding all the basic stuff of HTML coding. There are various tags that we must consider and include while starting to code in HTML. These tags help in the organization and basic formatting of elements in our script or web pages. These step-by-step procedures will guide you through the process of writing HTML.
Basic HTML Document: Below mentioned are the basic HTML tags that divide the whole document into various parts like head, body, etc.
- Every HTML document begins with a HTML document tag. Although this is not mandatory, it is a good convention to start the document with this below-mentioned tag. Please refer to the HTML Doctypes article for more information related to Doctypes.
The whole pattern of the code will look something like the below code example.
Example: This example illustrates the HTML basic structure.
| Тег | Описание |
|---|---|
| Определяет комментарий | |
| Определяет тип документа | |
| Определяет гиперссылку | |
| Определяет абревиатуру или акроним | |
| Не поддерживается в HTML5. Используйте вместо этого. Определяет акроним |
|
| Определяет контактную информацию автора / владельца документа | |
| Не поддерживается в HTML5. Используйте или вместо этого. Определяет встроенный аплет |
|
| Определяет область внутри карты изображения | |
| Определяет статью | |
| Определяет содержание, кроме содержания страницы (в стороне) | |
| Определяет звуковой контент | |
| Определяет жирный текст | |
| Указывает базовый URL-адрес / цель для всех относительных URL-адресов документа | |
| Не поддерживается в HTML5. Используйте CSS вместо этого. Отпределяет цвет, размер и шрифт по умолчанию для всего текста документа |
|
| Изолирует часть текста, который может быть отформатирован в другом направлении от иного текста за его пределами | |
| Переопределяет текущее направление текста | |
| Не поддерживается в HTML5. Используйте CSS вместо этого. Определяет увеличенный текст |
|
| Определяет раздел, который цитируется с другого источника | |
| Определяет тело документа | |
| Определяет разрыв строки | |
| Определяет кнопку, которую можно нажимать | |
| Используется для рисования на лету, с помощью сценариев (обычно на JavaScript) | |
| Определяет подпись к таблице | |
| Не поддерживается в HTML5. Используйте CSS вместо этого. Определяет центрирование текста |
|
| Определяет название произведения при цитировании из него | |
| Определяет фрагмент компьютерного кода | |
| Указывает свойства столбцов для каждого столбца в элементе | |
| Определяет группу с одного или нескольких столбцов в таблице для форматирования | |
| Связывает заданный контент с машиночитаемым переводом | |
| Определяет список предварительно определённых параметров управления вводом | |
| Определяет описание / значение термина в списке описания | |
| Определяет удалённый с документа текст | |
| Определяет дополнительные детали, которые пользователь может просматривать или прятать | |
| Задаёт термин, для которого будет дано определение (definition) | |
| Определяет диалоговый бокс или окно | |
| Не поддерживается в HTML5. Используйте вместо этого. Определяет список каталогов |
|
| Определяет раздел (блочный) в документе | |
| Определяет список описаний | |
| Определяет термин / имя в списке описания | |
| Определяет семантически подчёркнутый текст (empharized) | |
| Определяет контейнер для внешнего (не HTML) приложения | |
| Группы связанных элементов в форме | |
| Определяет заголовок для элемента | |
| Определяет автономное содержание | |
| Не поддерживается в HTML5. Используйте CSS вместо этого. Определяет шрифт, цвет и размер текста |
|
| Определяет нижний колонтитул (футер) для документа или раздела | |
| Определяет HTML форму для ввода пользователем | |
| Не поддерживается в HTML5. Определяет окно (фрейм) в наборе фреймов |
|
| Не поддерживается в HTML5. Определяет набор фреймов |
|
| to | Определяет HTML заголовки |
| Определяет информацию о документе | |
| Определяет заголовок для документа или раздела | |
| Определяет тематическую смену контента | |
| Определяет корень HTML-документа | |
| Определяет часть текста альтернативным голосом или настроением | |
| Определяет встроенный фрейм | |
| Определяет изображение | |
| Определяет элемент управления вводом | |
| Определяет текст, который был вставлен в документ | |
| Определяет ввод с клавиатуры | |
| Определяет метку для элемента | |
| Определяет заголовок для элемента | |
| Определяет элемент списка | |
| Определяет взаимосвязь между документом и внешним ресурсом (обычно используется для ссылки на внешние таблицы стилей) | |
| Определяет основное содержание документа | |
| Определяет карту изображения на стороне клиента | |
| Определяет помеченный (маркированный) / выделенный текст | |
| Определяет метаданные HTML документа | |
| Определяет скалярное измерение в пределах известного диапазона (датчик) | |
| Определяет навигационные ссылки (навигация по сайту) | |
| Не поддерживается в HTML5. Определяет альтернативное содержание для пользователей, которые не поддерживают фреймы |
|
| Определяет альтернативное содержание для пользователей, которые не поддерживают скрипты на стороне клиента | |
| Определяет встроенный объект | |
| Определяет упорядоченный (нумерованный) список | |
| Определяет группу соответствующих параметров в выпадающем списке (выпадающем меню) | |
| Определяет параметр в выпадающем списке | |
| Определяет результат расчёт (калькуляции) | |
| Определяет параграф (абзац) | |
| Определяет параметр для объекта | |
| Определяет контейнер для нескольких ресурсов изображения | |
| Определяет предварительно отформатированный текст | |
| Представляет ход выполнения задания | |
| Определяет короткую цитату | |
| Определяет, что показывать в браузерах, которые не поддерживают ruby аннотации | |
| Определяет пояснения / произношение символов (для восточноазиатской типографики) | |
| Определяет аннотацию ruby (для восточноазиатской типографики) | |
| Определяет текст, который больше не является правильным | |
| Определяет исходные данные с компьютерной программы | |
| Определяет скрипт на стороне клиента | |
| Определяет раздел (секцию) в документе | |
| Определяет выпадающий список | |
| Определяет меньший текст | |
| Определяет несколько медиа-ресурсов для медиа-элементов ( и ) | |
| Определяет раздел (строчный) в документе | |
| Не поддерживается в HTML5. Используйте или вместо этого. Определяет перечеркнутый текст |
|
| Определяет семантически важный текст | |
| Определяет информацию о стиле в документе | |
| Определяет подстрчный текст (нижний индекс) | |
| Определяет видимый заголовок для элемента | |
| Определяет надстрочный текст (верхний индекс) | |
| Определяет контейнер для графики SVG | |
| Определяет таблицу | |
| Группирует содержание тела в таблице | |
| Определяет клетку (ячейку) в таблице | |
| Определяет шаблон | |
| Определяет многострочный элемент управления вводом (текстовая область) | |
| Группирует содержание нижнего колонтитула в таблице | |
| Определяет ячейку заголовка в таблице | |
| Группирует содержание заголовка в таблице | |
| Определяет дату / время | |
| Определяет заголовок документа | |
| Определяет строку в таблице | |
| Определяет текстовые дорожки для медиа-элементов ( и ) | |
| Не поддерживается в HTML5. Используйте CSS вместо этого. Определяет текст телетайпа |
|
| Определяет текст, который должен быть стилистически отличным от обычного текста | |
| Определяет неупорядоченный (ненумерованный) список | |
| Определяет переменную | |
| Определяет видео или фильм | |
| Определяет возможный разрыв строки |
HTML basics
HTML (HyperText Markup Language) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. As the title suggests, this article will give you a basic understanding of HTML and its functions.
So what is HTML?
HTML is a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on. For example, take the following line of content:
My cat is very grumpy
If we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing it in paragraph tags:
p>My cat is very grumpyp> Anatomy of an HTML element
Let’s explore this paragraph element a bit further.
The main parts of our element are as follows:
- The opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets. This states where the element begins or starts to take effect — in this case where the paragraph begins.
- The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.
- The content: This is the content of the element, which in this case, is just text.
- The element: The opening tag, the closing tag, and the content together comprise the element.
Elements can also have attributes that look like the following:
Attributes contain extra information about the element that you don’t want to appear in the actual content. Here, class is the attribute name and editor-note is the attribute value. The class attribute allows you to give the element a non-unique identifier that can be used to target it (and any other elements with the same class value) with style information and other things. Some attributes have no value, such as required .
Attributes that set a value always have:
- A space between it and the element name (or the previous attribute, if the element already has one or more attributes).
- The attribute name followed by an equal sign.
- The attribute value wrapped by opening and closing quotation marks.
Note: Simple attribute values that don’t contain ASCII whitespace (or any of the characters ” ‘ ` = < >) can remain unquoted, but it is recommended that you quote all attribute values, as it makes the code more consistent and understandable.
Nesting elements
You can put elements inside other elements too — this is called nesting. If we wanted to state that our cat is very grumpy, we could wrap the word “very” in a element, which means that the word is to be strongly emphasized:
p>My cat is strong>verystrong> grumpy.p> You do however need to make sure that your elements are properly nested. In the example above, we opened the element first, then the element; therefore, we have to close the element first, then the element. The following is incorrect:
p>My cat is strong>very grumpy.p>strong> The elements have to open and close correctly so that they are clearly inside or outside one another. If they overlap as shown above, then your web browser will try to make the best guess at what you were trying to say, which can lead to unexpected results. So don’t do it!
Void elements
Some elements have no content and are called void elements. Take the element that we already have in our HTML page:
img src="images/firefox-icon.png" alt="My test image" /> This contains two attributes, but there is no closing tag and no inner content. This is because an image element doesn’t wrap content to affect it. Its purpose is to embed an image in the HTML page in the place it appears.
Anatomy of an HTML document
That wraps up the basics of individual HTML elements, but they aren’t handy on their own. Now we’ll look at how individual elements are combined to form an entire HTML page. Let’s revisit the code we put into our index.html example (which we first met in the Dealing with files article):
DOCTYPE html> html lang="en-US"> head> meta charset="utf-8" /> meta name="viewport" content="width=device-width" /> title>My test pagetitle> head> body> img src="images/firefox-icon.png" alt="My test image" /> body> html> Here, we have the following:
- — doctype. It is a required preamble. In the mists of time, when HTML was young (around 1991/92), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. However, these days, they don’t do much and are basically just needed to make sure your document behaves correctly. That’s all you need to know for now.
- — the element. This element wraps all the content on the entire page and is sometimes known as the root element. It also includes the lang attribute, setting the primary language of the document.
- — the element. This element acts as a container for all the stuff you want to include on the HTML page that isn’t the content you are showing to your page’s viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more.
- — This element sets the character set your document should use to UTF-8 which includes most characters from the vast majority of written languages. Essentially, it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later on.
- — This viewport element ensures the page renders at the width of viewport, preventing mobile browsers from rendering pages wider than the viewport and then shrinking them down.
- — the element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It is also used to describe the page when you bookmark/favorite it.
- — the element. This contains all the content that you want to show to web users when they visit your page, whether that’s text, images, videos, games, playable audio tracks, or whatever else.
Images
Let’s turn our attention to the element again:
img src="images/firefox-icon.png" alt="My test image" /> As we said before, it embeds an image into our page in the position it appears. It does this via the src (source) attribute, which contains the path to our image file.
We have also included an alt (alternative) attribute. In the alt attribute, you specify descriptive text for users who cannot see the image, possibly because of the following reasons:
- They are visually impaired. Users with significant visual impairments often use tools called screen readers to read out the alt text to them.
- Something has gone wrong causing the image not to display. For example, try deliberately changing the path inside your src attribute to make it incorrect. If you save and reload the page, you should see something like this in place of the image:
The keywords for alt text are “descriptive text”. The alt text you write should provide the reader with enough information to have a good idea of what the image conveys. In this example, our current text of “My test image” is no good at all. A much better alternative for our Firefox logo would be “The Firefox logo: a flaming fox surrounding the Earth.”
Try coming up with some better alt text for your image now.
Note: Find out more about accessibility in our accessibility learning module.
Marking up text
This section will cover some essential HTML elements you’ll use for marking up the text.
Headings
Heading elements allow you to specify that certain parts of your content are headings — or subheadings. In the same way that a book has the main title, chapter titles, and subtitles, an HTML document can too. HTML contains 6 heading levels, – , although you’ll commonly only use 3 to 4 at most:
h1>My main titleh1> h2>My top level headingh2> h3>My subheadingh3> h4>My sub-subheadingh4> Note: Anything in HTML between is an HTML comment. The browser ignores comments as it renders the code. In other words, they are not visible on the page – just in the code. HTML comments are a way for you to write helpful notes about your code or logic.
Now try adding a suitable title to your HTML page just above your element.
Note: You’ll see that your heading level 1 has an implicit style. Don’t use heading elements to make text bigger or bold, because they are used for accessibility and other reasons such as SEO. Try to create a meaningful sequence of headings on your pages, without skipping levels.
Paragraphs
p>This is a single paragraphp> Add your sample text (you should have it from What will your website look like?) into one or a few paragraphs, placed directly below your element.
Lists
A lot of the web’s content is lists and HTML has special elements for these. Marking up lists always consists of at least 2 elements. The most common list types are ordered and unordered lists:
- Unordered lists are for lists where the order of the items doesn’t matter, such as a shopping list. These are wrapped in a element.
- Ordered lists are for lists where the order of the items does matter, such as a recipe. These are wrapped in an element.
Each item inside the lists is put inside an (list item) element.
For example, if we wanted to turn the part of the following paragraph fragment into a list
p> At Mozilla, we're a global community of technologists, thinkers, and builders working together… p> We could modify the markup to this
p>At Mozilla, we're a global community ofp> ul> li>technologistsli> li>thinkersli> li>buildersli> ul> p>working together…p> Try adding an ordered or unordered list to your example page.
Links
Links are very important — they are what makes the web a web! To add a link, we need to use a simple element — — “a” being the short form for “anchor”. To make text within your paragraph into a link, follow these steps:
- Choose some text. We chose the text “Mozilla Manifesto”.
- Wrap the text in an element, as shown below:
a>Mozilla Manifestoa> a href="">Mozilla Manifestoa> a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifestoa> You might get unexpected results if you omit the https:// or http:// part, called the protocol, at the beginning of the web address. After making a link, click it to make sure it is sending you where you wanted it to.
Note: href might appear like a rather obscure choice for an attribute name at first. If you are having trouble remembering it, remember that it stands for hypertext reference.
Add a link to your page now, if you haven’t already done so.
Conclusion
If you have followed all the instructions in this article, you should end up with a page that looks like the one below (you can also view it here):
If you get stuck, you can always compare your work with our finished example code on GitHub.
Here, we have only really scratched the surface of HTML. To find out more, go to our Learning HTML topic.
- Previous
- Overview: Getting started with the web
- Next
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on Feb 23, 2023 by MDN contributors.
Your blueprint for a better internet.
Comments are closed, but trackbacks and pingbacks are open.