5. Что такое теги в HTML и для чего они нужны

Кратко

Парные теги

- Парные теги состоят из открывающего и закрывающего тегов.

- Примеры парных тегов: <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

1. Сделайте так, чтобы три слова были на разных строчках при помощи тега <br>

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.