Посмотреть все уроки курса
Выбрать другой урок из курса
Поиск по сайту
Теория урока

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

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ

Кратко

Парные теги

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

- Примеры парных тегов: <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. На поисковую выдачу влияет так же использование тегов «маркированный список» и «нумерованный список». Ещё на поисковую выдачу влияет использование атрибутов titlealt. Да это только малая часть, на самом деле, есть 200 официальных пунктов от Google, которые влияют на выдачу в поисковике. Возможно, обо всех их я напишу.

В следующем уроке поговорим об одинарных тегах.

Похожие уроки Codebra

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
Пользовательские функции в PHPКурс по PHP
Первое знакомство с PythonЗнакомство с Python
Основные правила и знакомство с селекторамиСелекторы в CSS
Работа с файлами в PythonЗнакомство с Python
Первое знакомство с JavaScriptЗнакомство с JavaScript
Семейство шрифтов в CSSШрифт
Основы объектно-ориентированного программирования (ООП) в PythonЗнакомство с Python
Кортежи в PythonЗнакомство с Python
Внутреннее устройство и сортировка словаря в PythonЗнакомство с Python
Раздел «Знакомство с HTML»
1. УРОК: 1. Вводный урок по курсу HTML и CSS
2. УРОК: 2. Что такое язык HTML
3. УРОК: 3. Погружение в курс по HTML и CSS
4. УРОК: 4. Теги в HTML. Одинарные и парные теги
УРОК 5. 5. Что такое теги в HTML и для чего они нужны
Вы здесь
6. УРОК: 6. Одинарные теги в HTML
7. УРОК: 7. Парные теги в HTML
8. ПРАКТИКА: 10. Структура HTML-документа
9. УРОК: 11. Что означают теги HTML, HEAD, BODY
10. УРОК: 12. Первая строка всех сайтов - DOCTYPE
11. УРОК: 13. Исходный код веб-страницы
12. УРОК: 14. Заголовок в HTML - тег TITLE
13. УРОК: 16. Кодировка HTML-страницы и атрибуты тегов
14. УРОК: 17. Описание стилей CSS в HTML-документе
15. УРОК: 18. Подключение внешних файлов в HTML - стили CSS
16. ПРАКТИКА: 19. Что не хватает в структуре HTML-документа
17. ПРАКТИКА: 20. Опять чего-то не хватает в структуре HTML-страницы
18. УРОК: 22. Использование HTML метатегов (мета теги)
19. ПРАКТИКА: 23. Повторим метатеги в HTML
20. ПРАКТИКА: 24. Метатеги Facebook
21. ТЕСТ: 25. Тест по разделу «Знакомство с HTML»
Другие разделы
Раздел 2. Разметка текста в HTML
Раздел 3. Ссылки в HTML
Раздел 4. Изображения в HTML
Раздел 5. Таблицы в HTML
Раздел 6. Формы в HTML
Раздел 7. HTML5
Раздел 8. Остальное
Раздел 9. Знакомство с CSS
Раздел 10. Селекторы в CSS
Раздел 11. Структура и каскад
Раздел 12. Единицы измерения
Раздел 13. Шрифт
Раздел 14. Свойства текста
Раздел 15. Форматирование
Раздел 16. Отступы, рамки, поля
Раздел 17. Цвета и фон
Раздел 18. Позиционирование
Раздел 19. Верстка таблиц
Раздел 20. Списки
Раздел 21. Анимация
Раздел 22. Знакомство с Flexbox
Раздел 23. Практика с htmlbook.ru
Раздел 24. Элементы сайта
Впервые на сайте Codebra?

Извините за это всплывающее окно, меня они тоже раздражают.

Образовательный ресурс codebra.ru полностью посвящен программированию и компьютерной безопасности. Все курсы и уроки находятся на главной странице. Ради интереса можете посмотреть на содержимое курсов по Пентесту Active Directory, Python, HTML и CSS, JavaScript, C++ и другие, размещенные на главной странице.

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно