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