====== Основы HTML ======
**HTML (Hypertext Markup Language)** - это код, который используется для структурирования и отображения веб-страницы и её контента. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных. Как видно из названия, эта статья даст вам базовое понимание HTML и его функций.
===== Что такое HTML на самом деле? =====
HTML не является языком программирования; это язык разметки, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. HTML состоит из ряда [[software:development:ps_pycharm:html5:glossary:void_element|элементов]], которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определённым образом. Ограждающие теги могут сделать слово или изображение ссылкой на что-то ещё, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмём следующую строку контента:
<code>
Моя кошка очень раздражена
</code>
Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:
<code html>
<p>Моя кошка очень раздражена</p>
</code>

===== Анатомия HTML элемента =====
Давайте рассмотрим элемент абзаца более подробно.
{{:software:development:ps_pycharm:html5:lesson:grumpy-cat-small.png?|grumpy-cat-small}}

  - **Открывающий тег (Opening tag)**: Состоит из имени элемента (в данном случае, **<p>**), заключённого в открывающие и закрывающие угловые скобки. Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.
  - **Закрывающий тег (Closing tag)**: Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространённых ошибок начинающих и может приводить к странным результатам.
  - **Контент (Content)**: Это контент элемента, который в данном случае является просто текстом.
  - **Элемент(Element)**: Открывающий тег, закрывающий тег и контент вместе составляют элемент.

Элементы также могут иметь атрибуты, которые выглядят так:

{{:software:development:ps_pycharm:html5:lesson:anatomy_of_an_html_element.png?|anatomy_of_an_html_element.png}}

Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, **class - имя атрибута**, а **nase - значение атрибута**. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.

Атрибут всегда должен иметь:

  - Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).
  - Имя атрибута, за которым следует знак равенства.
  - Значение атрибута, заключённое с двух сторон в кавычки.

===== Вложенные элементы =====
Вы также можете располагать элементы внутри других элементов — это называется **вложением**. Если мы хотим заявить, что наша **кошка** очень раздражена, мы можем заключить слово "очень" в элемент <strong> , который указывает, что слово должно быть сильно акцентированно: