Внимание! На этой странице вы найдете материал урока из архивного курса по HTML. Курс был написан в 2015, обновлен в 2024 году и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по HTML и на странице первого урока.
- Удалите все между тегами
<body> ... </body> - Создайте внутри тегов
<body> ... </body>парный тег<h1> - Напишите число между тегами
<h1> ... </h1>
HTML теги: одинарные и парные
- Одинарные теги не имеют закрывающего тега, например:
<br>,<img>. - Парные теги состоят из открывающего и закрывающего тега, образуя контейнер.
Одинарные теги
- Примеры:
<br>- перенос на новую строку,<hr>- разделительная линия,<img>- вставка изображения. - В ранних версиях HTML было правильно писать
<br/>,<img/>, но теперь это не актуально.
Парные теги
- Примеры:
<h1>Что такое дескрипторы в HTML?</h1>. - Содержимое контейнера находится между открывающим и закрывающим тегами.
- Важно правильно писать парные теги для избежания ошибок в валидности кода.
HTML5 и новые теги
- HTML5 является расширением HTML4, сохраняя все дескрипторы HTML4 и добавляя новые.
- В HTML5 появились теги для разбиения сайта на основные блоки: шапка, меню, подвал, сайдбар и контент.
Почему важно знать теги
- Поисковики проверяют HTML документы на валидность, ищут ключевые слова в дескрипторах.
- Знание тегов важно для верстки страниц и SEO.
Как выучить теги
- Специально учить теги не нужно, они запоминаются в процессе практики.
- Если что-то забыли, можно обратиться к интернету.
Думаю, вы поняли из чего состоит код HTML? Верно, из множества парных и одинарных тегов. В этом уроке разберемся подробнее с HTML тегами.
В языке HTML происходит деление тегов на одинарные (непарные) и парные теги. Итак, одинарные HTML теги состоят из одного тега, то есть, у них нет закрывающего тега. А парные дескрипторы состоят из двух частей, одна из которых указывает начало, другая - конец.
Одинарные теги HTML
Одинарные теги не имеют закрывающего тега. Например: <br>, <img>. В ранних версиях было правильно (согласно стандарта) писать: <br/>, <img/>, теперь такой стиль написания одинарных тегов не актуален. Как сказал А.П. Чехов: «Краткость - сестра таланта», всегда при написании кода необходимо руководствоваться этим правилом. Если можно сократить или упростить, то сделайте это. Поэтому не стоит лишний раз ставить слэш, разумеется, если вы заявили о том, что ваш HTML документ пятой версии. Про версии HTML было сказано ранее.
Самые используемые одинарные теги: <br> - перенос на новую строку, <hr> - разделительная линия, <img> - вставка изображения. Далее поговорим о парных тегах в HTML.
Парные теги HTML
Парных тегов намного больше. У парного дескриптора есть открывающий и закрывающий теги. Парный тег образует контейнер. Содержимое контейнера – это то, что находится между открывающим и закрывающим тегом.
Рассмотрим следующий пример:
<h1>Что такое дескрипторы в HTML?</h1>В нем <h1> - парный тег, а содержимым этого тега является текст Что такое теги в HTML?. Началом парного тега является <h1>, а концом </h1>. В данном случае слэш (косая черта) перед именем тега обязателен.
Главная проблема, с которой сталкиваются на начальных этапах, это путаница в написании парных тегов: неразбериха во вложенности.
Например, правильная запись:
<p><b>Жирный абзац</b></p>А в следующем примере есть ошибка вложенности:
<p><b>Жирный абзац</p></b>HTML документ с такой версткой считается невалидным. Валидный код - это код написанный в соответствии со стандартами, разработанными Консорциумом Всемирной Паутины (W3C).
Чтобы не путать вложенность, следуйте следующему алгоритму: создайте парные теги <p></p>, далее вложите в них другие <p><b></b></p>, и в конце напишите текст внутрь обоих тегов:
<p><b>Как правильно писать парные теги</b></p>Теперь немного поговорим о версиях.
Что нового в HTML5 в плане тегов?
Язык HTML5 является расширением HTML4, поэтому в нем сохранены все дескрипторы HTML4 и добавлены новые. В HTML5 появились специальные теги для разбиения сайта на основные блоки: шапка, меню, подвал, сайдбар и контент.
В 2024 году сравнивать HTML4 и HTML5 неактуально, но все равно оставлю этот абзац как часть истории.
Почему важно научиться пользоваться тегами?
Поисковики Yandex и Google трепетно относятся к верстке HTML документов, проверяя их на валидность. Ищут в них ключевые слова, заключенные в специальные дескрипторы и так далее. В этом разделе речь идет о верстке страниц на HTML, поэтому не будем углубляться в эту тему, которая относится к продвижению (SEO).
Как выучить все теги HTML?
Да, тегов большое множество, но специально учить их нет необходимости. Индейцы метко подметили: «Скажи мне – и я забуду, покажи мне – и я не смогу запомнить, привлеки меня к участию – и я пойму».
Пока вы будете практиковаться, что-то писать (верстать), парные и одинарные теги сами запомнятся. Со временем, конечно. А если что-то забыли, то всегда можно обратиться к интернету или сайту Codebra.
В следующем уроке продолжим изучение этой темы, но под другим углом.
Только спустя несколько лет заметил дублирование уроков (этот и следующий). Пожалуй, оставлю оба урока. Если что-то непонятно было вам в этом уроке, будет понятно в следующем.
Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу HTML.
