1.14. Необязательные теги HTML5-разметки

В спецификации HTML5 некоторые правила разметки были ослаблены. В частности, использование элементов , и уже не является обязательным для разметки HTML5. Тем не менее браузер все равно считает, что они существуют, в чем можно убедиться, просмотрев разметку веб-страницы в Mоzilla Firebug или в Google Chrome Inspector.
Эти элементы всегда «подразумеваются», но если они будут использоваться в таблице CSS-стилей или в JavaScript-сценариях, то их надо прописывать в явном виде.
Также разрешается не использовать закрывающую обратную косую черту в элементах без содержимого, их список можно увидеть в нижеприведенной таблице.
1. Элемент
Начальный тег может быть опущен, если сразу за тегом не идет комментарий. Закрывающий тег также может быть опущен, если перед ним нет комментария.
Hello Welcome to this example.
2. Элемент
Начальный тег
может быть опущен, если элемент пуст, или если сразу после него идет другой HTML-элемент.Закрывающий тег может быть опущен, если он не следует сразу за пробелом или за комментарием.
Hello Welcome to this example.
3. Элемент
Начальный тег может быть опущен, если элемент пуст, или если первое, что внутри элемента не является пробелом или комментарием, за исключением случаев, когда первое, что идет за тегом являются элементы , , или .
Закрывающий тег может быть опущен, если перед ним нет комментария.
Hello Welcome to this example.
4. Элемент
5. Элементы и
Закрывающий тег
может быть опущен, если элемент
Закрывающий тег
может быть опущен, если элемент
6. Элемент
Закрывающий тег
может быть опущен, если
следует сразу за любым из перечисленных элементов:
address, article, aside, blockquote, dir, div, dl, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, menu, nav, ol, p, pre, section, table, ul , или если больше нет содержания в элементе, в который вложен тег
, или родительским элементом не является тег .
7. Элементы и
Закрывающий тег может быть опущен, если элемент
Закрывающий тег может быть опущен, если элемент
8. Элементы и
Закрывающий тег может быть опущен, если элемент
Закрывающий тегможет быть опущен, если элемент
9. Элемент
Начальный тег элемента может быть опущен, за элементом сразу идет элемент , и если перед элементом непосредственно не предшествует другой элемент , закрывающий тег которого был опущен. (Он не может быть опущен, если элемент пустой.)
10. Элементы , , , ,
Закрывающий тег
может быть опущен, если элемент
следует сразу за или .Закрывающий тег
может быть опущен, если после элемента
сразу следует или , или если больше нет содержания в родительском элементе.Закрывающий тег
может быть опущен, если элемент
следует сразу же за , или если больше нет содержания в родительском элементе. 37547 TEE Electric Powered Rail Car Train Functions (Abbreviated) FunctionControl UnitCentral Station Headlight✔✔ Interior Lights✔✔ Electric locomotive operating sounds✔✔ Engineer's cab lighting✔ Station Announcements - Swiss✔
Какой тег при создании страницы не является обязательным
Элемент предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера . К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.
Тег также применяется для определения цветов ссылок и текста на веб-странице. Подобная практика в HTML 4 осуждается и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору BODY . Тем не менее, большинство атрибутов до сих пор поддерживается разными браузерами.
Часто тег используется для размещения обработчика событий, например, onload, которое выполняется после того, как документ завершил загрузку в текущее окно или фрейм.
Открывающий и закрывающий теги на веб-странице не являются обязательными, однако хорошим стилем считается их использование, чтобы определить начало и конец HTML-документа.
Синтаксис
Атрибуты
alink Устанавливает цвет активной ссылки. background Задает фоновый рисунок на веб-странице. bgcolor Цвет фона веб-страницы. bgproperties Определяет, прокручивать фон совместно с текстом или нет. bottommargin Отступ от нижнего края окна браузера до контента. leftmargin Отступ по горизонтали от левого края окна браузера до контента. link Цвет ссылок на веб-странице. rightmargin Отступ от правого края окна браузера до контента. scroll Устанавливает, отображать полосы прокрутки или нет. text Цвет текста в документе. topmargin Отступ от верхнего края окна браузера до контента. vlink Цвет посещенных ссылок.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Открывающий и закрывающий теги не обязательны.
HTML5 IE Cr Op Sa Fx
Тег BODY Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Результат текущего примера показан на рис. 1. При использовании события onload тега выполняется скрипт, написанный на языке JavaScript, в данном случае он выводит сообщение, что документ загружен.

Рис. 1. Всплывающее окно в документе
Обязательные элементы и тэги в HTML.
Задание Добавьте обязательные тэги, о которых говорится в видео в свой HTML-файл.
Код, который можно скопировать.
Документ без названия
После того, как мы с вами создали первый HTML — документ, он у нас был совершенно пустой. Никаких элементов и никаких HTML — тэгов в нем у нас пока еще не было.
Для того, чтобы этот HTML-документ начал полноценно восприниматься браузером как новый HTML-документ и чтобы поисковые системы могли взаимодействовать с этим HTML-документом, нужно добавить туда несколько HTML-тэгов.
Чисто визуально, при добавлении этих обязательных тэгов, на веб-странице вы ничего не увидите, за исключением тэга title. Этот тэг немного повлияет на внешний вид документа. По сути, эти тэги являются просто обязательными тэгами, которые несут в себе некую служебную информацию для тех программ, которые будут взаимодействовать с этим HTML — документом.
Итак, что же это за обязательные тэги, которые должны присутствовать на любой HTML-странице?
В первую очередь — это тэг doctype.
Пишется он следующим образом:
Это служебный тэг, который нужен для того, чтобы сообщить браузеру, либо какой-то другой программе, которая будет взаимодействовать с этим HTML документом о том, что данный файл является именно HTML страницей, а не каким-то другим типом документа.
Кроме HTML-документов, браузеры могут взаимодействовать и с другими видами документов. Поэтому нужно именно уточнить, что тип документа, с которым он будет взаимодействовать, является именно HTML.
Далее идет парный тэг:
Это главный тэг, который содержит в себе все остальные тэги. Это самый главный родительский элемент, в котором хранятся все остальные тэги.
Далее, внутри этого парного тэга html, у нас находится тэг:
Он тоже является парным тэгом и содержит в себе различную служебную информацию, так называемые служебные заголовки. Здесь может располагаться информация о названии документа, о кодировке, как правило, в этой области подключаются различные скрипты, внешние стили оформления и внутренние стили оформления, которые будут отвечать за внешний вид документа. По сути, этот элемент head, отвечает за то, что он содержит некую служебную информацию, которая у нас не отображается на странице, но несет важную смысловую нагрузку о документе.
Внутри элемента head есть важный парный элемент title, который отвечает за заголовок веб-страницы, который будет отображаться в открытой вкладке браузера. Также элемент title выводится в результатах выдачи сайта в поисковых системах, например, Яндекс и Google.
Далее идет еще один очень важный элемент — элемент:
Это тоже парный тэг и в нем нужно располагать ту информацию, которая должна будет выводиться на самой веб-странице. Если посмотреть на веб-страницу, то это будет белая область экрана просмотра браузера.
Ну и последний важный и обязательный элемент, который нужно указать на веб-странице — это элемент:
Этот тэг отвечает за то, какая кодировка текстовых символов будет у документа. Если указать неверную кодировку, то у вас могут возникнуть проблемы с отображением символов текста в различных браузерах и операционных системах. Если этот тег не указать, символы могут отображаться не правильно.
Как правило, здесь указывается кодировка UTF-8. Это универсальная кодировка, которая стала вроде стандарта и с ее помощью вы можете использовать как латинские символы, так и кириллицу и все у вас будет отображаться хорошо.
Это основные тэги, которые обязательно должны присутствовать на веб-странице, на внешний вид страницы они мало влияют, но, тем не менее, они обязательно должны присутствовать на веб-странице, чтобы все работало правильно и хорошо.
Поэтому, можете прямо сейчас открыть свой HTML-документ и добавить все эти тэги в него и после этого мы можем переходить к дальнейшим работам.
Создайте свой первый html-документ с обязательными HTML-элементами и поделитесь ссылкой на него в комментариях.
Для многих эта задача может быть простой. Но, если вы этого никогда не делали, это простое задание может оказаться очень полезным.
Поверьте, что в будущем навык создания html-документов вам может очень пригодиться.

Дмитрий Ченгаев
Занимаюсь заказной веб-разработкой. Подписывайтесь на телеграм канал https://t.me/dchengaev 😉
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Мета-теги
Виды мета-тегов и их задачи, особенности заполнения и готовые шаблоны.
Последнее обновление: 29 августа 2023 года
Мета-теги — часть программного HTML-кода, заключенная между тегом
. (заголовок страницы). Эти атрибуты не являются обязательными: они не видны пользователю, но сообщают определенную информацию поисковой системе (описание, заголовок, ключевые слова и т.д.).Задачи meta-тегов
Мета-теги выполняют несколько важных функций:
- Влияют на то, как отображается и какую позицию занимает страница в индексе (выдаче).
- Помогают продвигать ресурс по наиболее соответствующим Вашей целевой аудитории запросам. Позволяют потенциальному посетителю увидеть в поисковой выдаче нужную информацию, делая описание максимально информативным.
- Фиксируют данные о странице, помогают правильно отобразить информацию, настроить индексацию (анализ сайта и внесение его в базу для последующего включения в выдачу).
Сейчас мета-теги не оказывают сильного влияния на SEO-продвижение сайтов , но по-прежнему учитываются при оценке поисковыми системами. При прочих равных условиях предпочтение отдается ресурсу с грамотно сформированными тегами.
Оставить заявку
Мета теги для SEO (поисковой) оптимизации
Сюда относятся три тега: title, description, keywords. Эти атрибуты сообщают поисковому роботу информацию о сайте, которая помогает грамотно определить тематику ресурса и ранжировать (сортировать) в выдаче. Потому составляя метатеги, вебмастера обязательно используют ключевые слова (слова и фразы, которые целевой пользователь вводит в строку поиска, чтобы найти нужный ресурс). Yайти их можно с помощью Yandex Wordstat.
Title
Заголовок страницы. В индексе это — крупная синяя ссылка на сайт, в браузерных вкладках — название.
Как заполнять
Атрибут должен содержать основные ключевые слова и конкурентные преимущества. Важно, чтобы пользователь сразу понял, что Вы предлагаете, и почему данный ресурс ему подойдет. Основная сложность — вместить нужную информацию в четко заданный поисковыми системами лимит символов. У Google максимум — 70 (12 слов), у Яндекс — 80 (15 слов).
Рассмотрим пример. Дано: ключевые слова «купить кресло», «купить кресло недорого», «купить удобное кресло»
Неудачный title: Купить кресло. Купить удобное кресло, купить кресло недорого
Удачный title: Как купить удобное кресло недорого с доставкой и получить скидку 15%?
В первом случае — переспам (переизбыток ключевых фраз), нечитабельное предложение с точки зрения пользователя. Второй вариант meta тега объединяет все нужные ключевики в логичной последовательности и указывает на конкурентное преимущество компании (скидку).
Description
Краткий «анонс» страницы в результатах поиска. Несколько коротких предложений, в которых используются ключевые слова (не все — наиболее значимые) конкретной страницы. Рекомендуемая длина meta тега — 160-200 символов.
Мета-теги Title и Description составляются отдельно для каждой страницы сайта, т.к. все разделы должны иметь собственный список ключевых фраз, соответствующий тематике и содержимому.
С помощью meta name description поисковым роботом описание страницы — сниппет. Он отображается в результатах поиска под title.
Если атрибут не заполнен либо сформирован не по правилам (значительно превышен лимит символов, переспам), то поисковый робот составляет описание автоматически, «собирая» его по кусочкам фраз на странице. Результат получается не сильно привлекательный и «продающий».
Как заполнять
Дано: магазин продажи книг; ключевые слова «интересная книга», «купить книгу»
Неудачный Description: Книги издавна являются одними из самых близких «друзей» человека. Интересная книга помогает скоротать время, дает полезные знания, раскрывает занимательные факты, пробуждает эмоции. Потому стоит задуматься о том, чтобы купить книгу в нашем магазине.
Удачный Description: Нужна интересная книга? В нашем магазине — широкий выбор тематик: от узкоспециальной литературы до мировых бестселлеров. У нас Вы можете купить книгу с доставкой в течение 1-5 дней в любой регион РФ. Первым покупателям — скидка 10%.
Первый вариант — не специально составленный meta-тег, а взятый со страницы кусок статьи. Возможно, пользователю интересно почитать литературный текст, но, обращаясь к поисковой системе, он предпочтет получить ответ на конкретный запрос о покупке. Потому мета-теги для сайта второго типа более привлекательны: они сразу дают понимание, какой ассортимент и преимущества предлагает магазин.
Keywords
Сообщает поисковому роботу ключевые слова, под которые «заточен» контент. Поисковый робот сверяет фразы в содержимом страницы с указанными в данном теге, а полученные результаты учитывает в дальнейшем при определении позиций ресурса.
Сейчас поисковики не придают данному атрибуту такой вес, как раньше. Но грамотное использование его не будет лишним.
Как заполнять
Используйте 3-6 ключевых слов/фраз через запятую. Чрезмерное употребление может расцениваться поисковиком как переспам. В список должны включаться только используемые на странице запросы, под которые оптимизирован текст, названия товаров и так далее.
Мета-теги технического характера
Это атрибуты внутренней оптимизации ресурса. Такие мета-теги настраивают информацию, которая отображается пользователю в браузере, и включают отдельные опции (к примеру, дают возможность закрыть для индексации отдельные разделы).
Наиболее распространенные технические мета-теги:
- Content-type. Включает данные о типе документа и кодировке. Влияет на то, насколько корректно страница будет отражаться в браузере. Особенно актуален при неверной настройке браузера или сервера. В такой ситуации документ будет показан на другой кодировке, и пользователь не сумеет ничего изменить даже попыткой переключить вручную.
- Content-language. Содержит информацию о языке контента (содержимого). Как и с предыдущим тегом, сейчас браузеры определяют язык автоматически. Но в случае неверных настроек данный тег будет полезен.
- Robots. Показывает поисковому роботу, какие страницы следует включать в индекс, а какие — нет. Данный тег предполагает ряд дополнительных атрибутов: index/noindex (можно/нельзя индексировать); follow/nofollow (учитывать/не учитывать гиперссылки); all/none (открыть/закрыть для индексации страницу и гиперссылки).
- Refresh. Позволяет задать время обновления страницы при загрузке либо переадресации пользователя в другой раздел. Тег полезен в случае обновления сайта: вместо страницы ошибки 404 или длительной загрузки перенаправляет пользователя в новый раздел.
- Meta Author и Copyright. Этими тегами можно прописать авторство графического и текстового содержимого страницы.
Все выше перечисленные мета-теги для сайта призваны, прежде всего, улучшить восприятие вашего ресурса поисковиком. Потому уделите внимание грамотному составлению атрибутов, отражайте только правдивую информацию.
Помните, что сейчас поисковики оценивают ресурсы, в первую очередь, по качеству контента, кода, структуры, юзабилити. Потому при составлении мета-тегов важно ставить себя на позицию пользователя: указывать данные, способные повлиять на восприятие и отображение страницы, преподносить полезную информацию последовательно, логично, с ключевыми выгодами для клиента.
Мета-теги — только часть (хотя и необходимая часть) технической оптимизации сайта. Чтобы проверить их, скорость загрузки сайта, все другие параметры, проведите полный поисковый аудит сайта.