Открывающие и закрывающие теги

Содержание

HTML элементы

Содержимое html-документа или веб-страницы определяется содержимым html элементов.

HTML элементы

HTML-элемент — это все, что находится между стартовым(открывающим) и конечным(закрывающим) тегами.

Открывающий тег Содержимое элемента Закрывающий тег
Это параграф
Это ссылка

Синтаксис элементов html

  • HTML элемент начинается с открывающего/стартового тега.
  • HTML элемент заканчивается закрывающим/конечным тегом.
  • Содержимое элемента — это все, что находится между открывающим и закрывающим тегами.
  • Некоторые элементы могут быть пустыми.
  • Пустые элементы состоят только из открывающего тега.
  • Большая часть html элементов может иметь атрибуты.

(Вы узнаете больше об атрибутах в следующих главах учебника.)

Вложенные элементы

Большая часть html элементов может быть вложена друг в друга. HTML документ состоит из вложенных элементов.

Основные HTML-теги

Тег — это специальное зарезервированное слово, заключённое в угловые скобки (например, ). Тег — основная составляющая HTML: им код начинается, им же заканчивается, внутри тегов заключается отображаемая на веб-странице информация. Записывать их рекомендуется в нижнем регистре, то есть обычными маленькими буквами: не , а .

Какими бывают теги?

Большинство HTML-тегов являются парными: есть открывающий (например, ) и закрывающий тег, который от открывающего отличает слеш (/) после первой угловой скобки (например, ). Всё, что находится внутри пары тегов, называется их содержимым.

Бывают и непарные (одиночные) теги, которые называются метками. Их, в отличие от парных тегов, не нужно закрывать, потому что они не работают с содержимым, а выполняют какую-то функцию сами по себе. Пример одиночного тега —
. Он устанавливает перенос текста на следующую строку.

Если проводить параллели с русским языком, то можно сказать, что парные теги — это кавычки или скобки, влияющие на свойства заключённого в них текста (попробуйте не закрыть кавычки вовремя), а одиночные теги (метки) — это знаки препинания (восклицательный, вопросительный или точка).

Любой тег состоит из:

  • Открывающей угловой скобки ( ).

Основные HTML-теги

Так как теги — основа языка разметки, не удивительно, что их довольно много. Рассмотрим основные, самые важные теги.

  • — одиночный тег, внутри которого размещается комментарий. Комментарий — это текст, который не обрабатывается браузером. Внутри тега можно писать, что угодно, даже другие теги — работать они не будут, на экране не отобразятся. Разработчики комментируют код либо чтобы другим веб-мастерам было проще в нём разобраться, либо чтобы спустя продолжительное время его быстро смогли понять они сами.
  • , , , , — теги, которые должны присутствовать в любом приличном HTML-документе (подробнее см. «Как создать сайт в Блокноте»).
  • — тег содержит вспомогательную информацию для браузеров и поисковиков. Внутри него можно прописать ключевые слова, описание страницы, кодировку документа, имя автора и т. д.

Как сделать, чтобы редактор автоматически закрывал тег и помещал курсор между открывающим и закрывающим тегом?

Недавно запарился на одной теме, вопрос ускорения работы.
В WebStorm IDE есть такая фишка — открываешь тег, он автоматически закрывается и курсор занимает положение между ними + теги переносятся с табуляцией таким образом, что после открытия тега и нажатия ENTER — можно писать, собственно, содержимое тега.
Перепробовал все эти редакторы:
VSCode, Sublime, Notepad++ , Atom, Brackets.
Подскажите пожалуйста, вот как можно такую фишку добавить в свой любимый Sublime??

Автоматическое закрытие тегов

Здравствуйте уважаемые веб-мастера.

Продолжим знакомиться с плагинами редактора Notepad++

Следующая удобнейшая примочка — это автоматическое добавление закрывающего тега.

Особенно эта опция необходима при работе с тегом div, когда в одном диве, располагается ещё десяток встроенных.

Проконтролировать каждую пару на наличие закрывающего тега, в таком случае, бывает весьма затруднительно.

Notepad++ может сделать это за Вас.

Реализует эту опцию плагин TextFX. Бывает, что он устанавливается по умолчанию, тогда перед меню «Опции», в Вашем редакторе будет присутствовать меню «TextFX».

Если его нет то нужно этот плагин добавить. Делается это так. В меню «Плагины» выбираем «Plugin Manager», затем «Show Plugin Manager».

В результате должно открыться вот такое окно.

В нем представлены доступные для загрузки плагины редактора.

Находим в списке «TextFX», ставим галочку.

И нажимаем «Install». Появиться окно уточнения, нажимаем «Да», затем окно учета контрольных записей, тоже «Да», после чего меню «TextFX», появиться на панели редактора в горизонтальном меню.

Открываем его и выбираем «TextFX Setting», и «Autoclose XHTML/XML ».

После этого, как только Вы напишете html тег, тут же рядом появится закрывающая пара.

Но есть один нюанс, который меня вначале не на шутку озадачил. Дело в том, что по укоренившейся привычке, я вначале ставил угловые скобки, и уже после, в них вписывал название тега.

При таком исполнении, закрывающая пара ни за что не хотела образовываться. Я уж решил, что плагин не работает.

Потом уж додумался, что писать нужно без выкрутасов: открывающая скобка, название, закрывающая скобка. И тут же по написании закрывающей скобки, появляется закрывающий тег.

Вот такое облегчение нелёгкого труда веб-мастера.

Теги HTML

Любой html документ состоит из дерева тегов, отвечающих за свой аспект отображения информации на веб странице. Большинство тегов парные и имеют открывающий и закрывающий тег. В редких случаях тег может быть не парным а одиночным.

Тег — это основная составляющая html документа, в тегах содержится вся информация выводимая пользователю браузером.

Все теги заключаются в угловые скобки . Большинство тегов, как уже было сказано парные, то есть имеют начальный и конечный теги, общая структура тега выглядит следующим образом внутри тега содержится необходимая информация

Главными частями HTML документа являются:

  1. Открывающий тег (Opening tag): Состоит из имени элемента , заключенного в открывающие и закрывающие угловые скобки. Открывающий тег указывает, где элемент начинается или начинает действовать.
  2. Закрывающий тег (Closing tag): Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается. Отсутствие закрывающего тега является одной из наиболее распространенных ошибок начинающих и может приводить к странным результатам.
  3. Контент (Content): Это контент элемента, который в большинстве случаев является просто текстом.
  4. Элемент(Element): Открывающий тег, закрывающий тег и контент вместе составляют элемент.

Каждый тег HTML доку мента имеет свой определенный набор атрибутов. Атрибуты содержат дополнительную информацию об элементе? которую не нужно показывать в итоговом контенте. Атрибут имеет имя атрибута и значение атрибута которое указывается через знак «=» после имени атрибута. Один тег в коде может иметь несколько атрибутов разделенных пробелом, некоторые атрибуты могут иметь несколько значений разделенных запятой или пробелом.

внутри тега содержится необходимая информация

Так же теги можно располагать внутри других тегов, такая структура называется вложенными элементами.

Я очень рад вас видеть!!»

В окне браузера мы увидим следующий результат

Я очень рад вас видеть.

При вложенности тегов главное соблюдать правильность закрытия тегов. В показанном выше примере мы в начале открыли тег

затем открыли тег , значит и закрывать необходимо в обратном порядке сначало тег затем тег

. В противном случае при неправильном закрытии тегов браузер будет самостоятельно выбирать какой вариант и как ему отобразить и результаты вывода информации в браузере будут неожиданноми и непредсказуемыми.

Некоторые из тегов не имеют контента, такие теги например необходимы для вставки изображения, вставки якорей и т.п. Такие элементы называют пустыми.

Служебные теги

Служебные теги — это элементы языка HTML, формирующие структуру документа (страницы). Они хранят различные скрипты, стили и метаданные, которые необходимы для поисковых роботов и браузеров.

К служебным тегам относят:

Тег html

Элемент html — это первый служебный тег, который пишет разработчик, создавая HTML-документ. Между открывающим и закрывающим тегами располагается вся информация о веб-странице.

Открывающий тег всегда стоит вторым после элемента, устанавливающего тип документа !DOCTYPE, и может содержать внутри себя атрибуты title, manifest, xmlns.

Закрывающий тег всегда стоит последним и не должен содержать внутри себя атрибутов.

Между открывающим html и закрывающим /html находятся теги head и body, которые отвечают за техническую и видимую информацию страницы соответственно.

Тег head

Элемент head — это служебный тег, который содержит в себе всю техническую информацию о веб-странице, а также задает ее заголовок. Эта информация не видна обычному пользователю (кроме title — заголовка окна веб-страницы), но помогает браузерам и поисковым системам работать с данными страницы.

Данная область пишется первой и является неким контейнером для метаданных html-документа. В ней могут содержаться такие элементы, как title, base, meta, link, style.

Внутри открывающего head может содержаться атрибут profile, который задает адрес профиля метаданных.

Тег title

Элемент title отвечает за заголовок страницы, который отображается в шапке браузера. Иными словами, title задает текст, который будет написан на самой вкладке браузера.

Данный тег пишется один раз и располагается в контейнере head. Его написание обязательно, так как браузер не может самостоятельно определить заголовок.

Тег meta

Служебный тег meta предназначен для хранения технической информации, которая используется браузерами и поисковыми роботами. Например, это могут быть ключевые слова, описание сайта, кодировка документа и др.

Элемент meta не имеет закрывающего тега. Он располагается в контейнере head и может содержать внутри себя несколько атрибутов одновременно:

  • charset. Указывает кодировку документа (страницы). Например, utf-8;
  • http-equiv. Данный атрибут формирует http-заголовок и определяет действия браузера. Название заголовка указывается в самом атрибуте http-equiv, а его значение — в атрибуте content. Примеры значений — content-security-policy (задает правила и политику сайта, защищает от атак с внедрением контента и т. д.), content-type (кодировка для документа), default-style (предпочитаемые стили), refresh (интервал обновления страницы в секундах);
  • name. Задает тип метатега. Используется в паре «имя=значение». Примеры значений — author (имя автора), description (описание веб-страницы), keywords (ключевые слова). Недопустимо одновременное использование name и http-equiv;
  • content. Устанавливает значение атрибутов name и http-equiv. Атрибут content может содержать не одно, а несколько значений, указанных через запятую или точку с запятой.

Тег style

Служебный тег style определяет стили элементов страницы. Например, стиль H1 (его размер, шрифт, цвет). Задается данный тег в контейнере head и может применяться неоднократно (для разных элементов).

Задав стиль в head, браузер использует его в body к соответствующему элементу.

  • media — позволяет определить устройство вывода, для которого задана таблица стилей. Для каждого устройства можно задать свой стиль;
  • type — задает синтаксис, который необходимо использовать для верной интерпретации таблиц стилей. По умолчанию значение равно «text/css».

Тег body

Элемент body — это служебный тег, содержащий в себе все данные, которые отображаются на веб-странице (текст, медиафайлы, таблицы и т. д.). Иными словами, body отвечает за отображение контента документа.

Внутри контейнера body используются все элементы, предназначенные для дизайна страницы. Но иногда там могут быть расположены и обработчики событий. Например, onload, который выполняется после того, как документ завершит загрузку.

Внутри открывающего тега body можно разместить атрибуты, задающие определенные значения параметров для всей веб-страницы целиком. Например, ее фон, цвет текста, цвет гиперссылок и т. д.

  • alink — цвет активных ссылок;
  • background — фон страницы (изображение, картинка, видео);
  • bgcolor — цвет фона (если это простая заливка);
  • bgproperties — свойства фона (прокручиваться вместе с контентом, оставаться неподвижным, прокручиваться в режиме Paralax и т. д.);
  • bottommargin, topmargin, rightmargin, leftmargin — отступы от соответствующих краев страницы до контента;
  • link — цвет ссылок;
  • scroll — отображение полос прокрутки;
  • text — цвет текста на странице;
  • vlink — цвет нажатых ссылок.

Кроме вышеописанных атрибутов в служебном теге body можно также использовать универсальные атрибуты и события.

Тег script

Элемент script — служебный тег, предназначенный для описания скриптов. Он может содержать в себе ссылку на саму программу или ее текст, написанный на другом языке. Данный тег позволяет HTML-документам работать с программами, написанными на языке JavaScript и др.

Один и тот же скрипт может храниться во внешнем файле и использоваться одновременно для нескольких страниц. Это позволяет выполнять его быстрее при последующих загрузках, так как при первой загрузке файл кэшируется.

Атрибуты для тега script:

  • async — позволяет загружать скрипт асинхронно;
  • defer — не дает скрипту начать работу до тех пор, пока страница не будет загружена полностью;
  • language — указывает язык программирования скрипта;
  • src — адрес внешнего файла;
  • type — определяет тип содержимого тега script.

Служебный тег script можно располагать в любом месте документа (как в контейнере head, так и в контейнере body).

Синонимы: нет
Все термины на букву «С»
Все термины в глоссарии

Фундаментальная уязвимость HTML при встраивании скриптов

Чтобы описать суть проблемы, мне нужно рассказать, как вообще устроен HTML. Вы наверняка в общих чертах представляли себе, но я все равно коротко пробегусь по основным моментам, которые понадобятся для понимания. Если кому-то не терпится, сразу переходите к сути.

HTML — это язык гипертекстовой разметки. Чтобы говорить на этом языке, нужно соблюдать его формат, иначе тот, кто читает написанное, не сможет вас понять. Например, в HTML у тегов есть атрибуты:

Тут [name] — это имя атрибута, а [value] — это его значение. В статье я буду использовать квадратные скобки вокруг кода, чтобы было понятно, где он начинается и заканчивается. После имени стои́т знак равенства, а после него — значение, заключенное в кавычки. Значение атрибута начинается сразу после первого символа кавычки и заканчивается сразу перед следующим символом кавычки, где бы он не находился. Это значит, что если вместо [value] вы запишете [OOO «Рога и копыта».] , то значение атрибута name будет [OOO ] , а еще у вашего элемента будет три других атрибута с именами: [рога] , [и] и [копыта».»] , но без значений.

Если это не то, чего вы ожидали, вам нужно как-то изменить значение атрибута, чтобы в нем не встречалась кавычка. Самое простое, что можно придумать — просто вырезать кавычки.

Тогда парсер HTML верно прочтет значение, но беда в том, что это будет другое значение. Вы хотели [OOO «Рога и копыта»] , а получили [OOO Рога и копыта.] . В каких-то случаях такое различие может быть критичным.

Чтобы вы могли указать в качестве значения любую строку, формат языка HTML предлагает возможность экранировать значения атрибутов. Вместо кавычки в строке значения вы можете записать последовательность символов [«] и парсер поймет, что в этом месте в исходной строке, которую вы хотите использовать в качестве значения атрибута, была кавычка. Такие последовательности называются HTML entities.

При этом, если в вашей исходной строке действительно была последовательность символов [«] , у вас все еще есть возможность записать её так, чтобы парсер не превратил её в кавычку — для этого надо заменить знак [&] на последовательность символов [&] , то есть вместо [«] вам нужно будет записать в сыром тексте ["] .

Получается, что преобразование из исходной строки в ту, которую мы запишем между двумя символами кавычек, является однозначным и обратимым. Благодаря этим преобразованиям можно записать и прочитать любую строку в качестве атрибута HTML-тега, не вдаваясь в суть её содержимого. Вы просто соблюдаете формат, и все работает.

Собственно, так работает большинство форматов, с которыми мы сталкиваемся: есть синтаксис, есть способ экранирования контента от этого синтаксиса и способ экранирования символов экранирования, если вдруг такая последовательность встречается в исходной строке. Большинство, но не…

Тег . Парсер HTML внутрь тега не заглядывает, для него это просто какой-то текст, который он потом отдает в парсер Javascript.

В свою очередь, Javascript — это самостоятельный язык с собственным синтаксисом, он, вообще говоря, никаким специальным образом не рассчитан на то, что будет встроен в HTML. В нем, как в любом другом языке, есть строковые литералы, в которых может быть что угодно. И, как вы уже должны были догадаться, может встретиться последовательность символов, означающая закрывающий тег .

Что тут должно происходить: переменной s должна присваиваться безобидная строка.

Что тут происходит на самом деле: Скрипт, в котором объявляется переменная s на самом деле заканчивается так: [var s = «surprise!] , что приводит к ошибке синтаксиса. Весь текст после него интерпретируется как чистый HTML и в него может быть внедрена любая разметка. В данном случае открывается новый тег ни в каком виде. А стандарт Javascript не запрещает такой последовательности быть где угодно в строковых литералах.

Получается парадоксальная ситуация: после встраивания валидного Javascript в валидный документ HTML абсолютно валидными средствами мы можем получить невалидный результат.

На мой взгляд это и является уязвимостью разметки HTML, приводящей к уязвимостям в реальных приложениях.

Как эксплуатируется уязвимость

Конечно, когда вы просто пишете какой-то код, трудно представить, что вы напишете в строке и не заметите проблем. Как минимум, подсветка синтаксиса даст вам знать, что тег закрылся раньше времени, как максимум, написанный вами код не запустится и вы будете долго искать, что произошло. Но это не является основной проблемой с этой уязвимостью. Проблема возникает там, где вы вставляете какой-то контент в Javascript, когда генерируете HTML. Вот частый кусок кода приложений на реакте с серверным рендерингом:

В initialState может появиться в любом месте, где данные поступают от пользователя или из других систем. JSON.stringify не будет менять такие строки при сериализации, потому что они полностью соответствуют формату JSON и Javascript, поэтому они просто попадут на страницу и позволят злоумышленнику выполнить произвольный Javascript в браузере пользователя.

Тут в строки с соответствующим экранированием записываются id пользователя и referer , который пришел на сервер. И, если в user.id вряд ли будет что-то кроме цифр, то в referer злоумышленник может запихнуть что угодно.

Но на закрывающем теге приколы не заканчиваются. Опасность представляет и открывающий тег

Что видит здоровый человек и большинство подсветок синтаксиса в этом коде? Два тега ниже, хе-хе). Если вы до этого не сталкивались с подобным, то можете подумать, что я сейчас шучу. К сожалению, нет. Вот скриншот DOM-дерева примера выше:

Самое неприятное, что в отличие от закрывающего тега , который в Javascript может встретиться только внутри строковых литералов, последовательности символов и

А вы точно спецификация?

Спецификация HTML, помимо того, что запрещает использование легальных последовательностей символов внутри тега «‘; console.log(script.outerHTML); >>> «

Как видите, строка с сериализованным элементом не будет распаршена в элемент, аналогичный исходному. Преобразование DOM-дерево → HTML-текст в общем случает не является однозначным и обратимым. Некоторые DOM-деревья просто нельзя представить в виде исходного HTML-текста.

Как избежать проблем?

Как вы уже поняли, способа безопасно вставить Javascript в HTML нет. Но есть способы сделать Javascript безопасным для вставки в HTML (почувствуйте разницу). Правда для этого нужно быть предельно внимательным всё время, пока вы пишете что-то внутри тега

Точно так же можно экранировать и отдельные строки.

Другой совет — не встраивайте в тег «>

Но, по-хорошему, конечно, если вы хотите нормально разрабатывать приложения, а не аккуратно ходить по минному полю, нужен надежный способ встраивания скриптов в HTML. Поэтому правильным решением считаю вообще отказаться от тега

Код внутри выглядит ужасно и непривычно. Но это код, который попадет в сам HTML. В шаблонизаторе, который вы используете, можно сделать простой фильтр, который будет вставлять тег и экранировать все его содержимое. Вот так может выглядеть код в шаблонизаторе Django:

Оптимизация для новичков: HTML-теги и атрибуты в SEO

Первый этап продвижения сайта — его внутренняя оптимизация, важнейшей составляющей которой считается работа с кодом. Поэтому каждый SEO-специалист должен знать основные теги и атрибуты языка HTML, уметь оптимизировать их.

Не все понимают, на чем нужно сфокусировать свое внимание в первую очередь и как правильно использовать тот или иной элемент. В этом посте мы расскажем о тегах и атрибутах, о которых важно помнить начинающему SEO-специалисту.

Теги и атрибуты как составные части языка HTML

Теги и атрибуты составляют основу HTML — языка гипертекстовой разметки. Последовательность тегов и их атрибутов задает структуру документа. Интерпретируя язык разметки, браузер «понимает», о чем страница и как должен отображаться ее контент (текст, картинки, видео).

Теги задают каркас страницы, атрибуты расширяют или модифицируют действия тегов. Они описываются внутри открывающего тега в виде коллекции «имя=»значение»». Например: .

Существует два типа тегов: парные и одиночные. Парные (или контейнерные) теги состоят из пары — открывающий и закрывающий тег . . Одиночные теги состоят лишь из одного открывающего тега. Например, тег .

Стандартно структура HTML-документа содержит такие элементы:

  • указывает на тип текущего документа. В нашем случае HTML;
  • тег отмечает границы документа, в нем содержатся обязательные теги и ;
  • тег — контейнер, в него помещается информация для браузеров и поисковых систем. Содержимое тега не отображается напрямую на веб-странице, за исключением тега , с помощью которого устанавливают заголовок вкладки браузера;
  • тег определяет видимую часть документа, которая отображается в окне браузера. К такой информации относится текст, изображения, результат работы скриптов и другое.

Сперва рассмотрим набор тегов, помещающихся в блоке . Они наиболее значимы для специалиста по поисковой оптимизации.

Что такое тег

Тег один из важнейших в поисковом продвижении, отвечает за наименование документа. Текст в этом теге — заголовок страницы в результатах поисковой выдачи, окна браузера и ссылки в закладках. помогает понять пользователям и поисковым роботам, о чем данная страница. Он влияет на ранжирование документа в поисковой выдаче.

Пример кода:

Где пользователь может увидеть ваш :

Зачем нужны метатеги

Помимо тега , в располагаются теги типа , которые предназначены для браузеров и поисковых систем. Корректное использование метатегов позволяет увеличить привлекательность сниппетов, управлять индексацией страниц. Также позволяет правильно отображать страницы сайта пользователям. Далее рассмотрим метатеги: description, robots, charset, viewport и keywords.

Meta description

Текст метатега description — это краткое описание контента страницы. Информация из этого тега напрямую не влияет на ранжирование страницы. При этом большинство поисковых систем использует содержимое метатега description при образовании сниппета. Цепляющий description, который к тому же отвечает на запрос пользователя, поможет привлечь человека на ваш сайт.

Пример кода:

Meta robots

Метатег robots служит для указания правил индексирования конкретных страниц сайта и позволяет следовать по гиперссылкам с данных страниц.

Пример кода:

Значение атрибута «name» указывает, что директива актуальна для всех роботов. Вы также можете закрыть доступ только одному из них. Для этого в атрибуте «name» следует указать нужного робота, например, основного робота Google — «googlebot» или Яндекса — «yandex».

Основные значения атрибута content:

  • index — страница доступна для индексации;
  • noindex — запрет добавления страницы в индекс;
  • follow — ссылки на странице доступны к индексации и открыты для передачи ссылочного веса;
  • nofollow — сигнализирует роботу о том, что переходить по ссылкам и передавать ссылочный вес запрещено;
  • all — инструкция, аналогичная «index, follow», противоположная настройка: «none».

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

Meta charset

Метатег с атрибутом «charset» указывает на тип кодировки документа. Он применяется для правильного отображения текста страницы браузером. Для операционной системы Windows и кириллицы используют значения атрибута «utf-8» или «windows-1251». Этот метатег следует размещать в самом начале блока до элементов, которые содержат текст, включая тег .

Пример кода:

Многие браузеры научились распознавать кодировку документа автоматически, но все же рекомендуется прописать короткую строку, чтобы избежать возможных проблем с выводом информации на странице.

Meta viewport

Метатег «viewport» сообщает браузеру, как следует обрабатывать размеры страницы, изменять ее масштаб под ширину экрана устройства, с которого выполнен переход. Meta viewport — один из пунктов внедрения адаптивного дизайна, когда для всех устройств используется один код с корректировкой по размеру экрана. Для корректного отображения контента сайта на любом устройстве, на всех страницах следует разместить следующий фрагмент кода:

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

Meta keywords

Правильно составленный метатег keywords должен содержать 5-7 ключевых слов, описывающих основное содержание страницы. Раньше он сильно влиял на ранжирование по заданным в нем ключевым словам, но утратил значимость из-за действий недобросовестных вебмастеров и постоянного развития поисковых систем. Тем не менее, для метатега keywords еще не все потеряно. Так, в отчете «Яндекс и Google: факторы ранжирования в 2020 году» от «Ашманов и партнеры» представлен вывод о влиянии метатега на продвижение в Google.

Пример кода:

В блоке также располагаются теги
, которые устанавливают связь данного документа с другими веб-страницами. Рассмотрим такие атрибуты тега «link»: «canonical», «next / prev», «alternate».

Атрибут canonical

Атрибут «rel=»canonical»» используют для решения вопросов с дублирующимся контентом: когда на сайте есть близкие или идентичные по содержанию страницы по разным url. Атрибут canonical указывает поисковым системам, какую из дублирующихся страниц индексировать и показывать в результатах поиска, при этом передавая ей ссылочный вес и другие характеристики дубликатов. Чтобы указать, какая из страниц каноническая, нужно в коде страницы-дубля разместить тег «link» с атрибутом «canonical», где в атрибуте «href» прописать адрес канонической страницы.

Пример кода:

Особенность canonical в том, что все дублирующиеся страницы остаются доступны для пользователей. Поэтому каноникализацию рекомендуется применять для страниц, которые нужны на сайте, но по определенным причинам являются дубликатами.

Атрибуты next / prev

Появление дублирующегося контента на сайте также может быть связано со страницами пагинации.

Примеры пагинации можно увидеть на страницах интернет-магазинов, где есть категории с большим количеством товаров. Поскольку львиная доля контента таких страниц одинаковая, поисковые системы могу воспринимать их как дубли. Решение проблемы: использовать тег «link» вместе с атрибутами «next» и «prev», которые указывают на то, что рассматриваемые документы — части серии и их следует анализировать в совокупности.

Пример кода:

  • на первой странице пагинации внедряем «link rel=»next»», указывая на следующую страницу серии:
  • на второй и последующих страницах пагинации внедряем «link rel=»next»» и «link rel=»prev»», указывая на следующую и предыдущую страницы в серии:
  • на последней странице пагинации внедряется «link rel=»prev»», указывая на предпоследнюю страницу в серии:

Учтите, что данные теги работают для Google, но не учитываются Яндексом. Подобрать оптимальный вариант вам поможет наша инструкция по оптимизации страниц пагинации .

Атрибут alternate

Атрибут «rel=»alternate»» используется, чтобы указывать альтернативные версии страниц сайта, например, указывает на разные языковые версии или мобильную версию сайта. С его помощью поисковые системы определяют, какую версию страницы показывать тому или иному пользователю в результатах поиска.

Указать роботам на наличие нескольких языковых версий можно, разместив на всех страницах сайта фрагмент кода:

  • вместо «xx» указываем код языка (в формате ISO 639-1), «YY» — региона (ISO 3166-1 Alpha 2);
  • URL — абсолютный url альтернативной страницы.

Помните, что информация обо всех существующих версиях должна содержаться в коде каждой из них, то есть в коде каждой страницы должен содержаться собственный атрибут «rel=»alternate» hreflang=»xx-YY»», а также ссылки на все остальные версии.

Сообщить поисковым системам о мобильной версии сайта можно, используя атрибут «media». Как правило, версия для компьютеров размещается в домене www.example.com, а вариант сайта для мобильных устройств — в домене m.example.com.

Таким образом на обычной странице https://www.example.com/page-1 нужно добавить код:

На странице для мобильных устройств https://m.example.com/page-1 следует указать «canonical» на версию для компьютеров:

Оптимизация контента сайта

Видимый пользователю контент сайта помещается между тегами .

Открывающие и закрывающие теги

Все о создании сайтов, блогов, раскрутке и продвижении в поисковых системах и заработке на своем проекте

  • Вы здесь :
  • MonetaVInternete.ru
  • / Создаем сайт с нуля / Основы HTML и CSS /
  • Что такое HTML-тэги и атрибуты, валидатор (val >

Что такое HTML-тэги и атрибуты, валидатор (val >

Здравствуйте, уважаемые читатели блога MonetaVInternete.ru! В прошлой статье мы разобрались, что такое HTML и XHTML, а также что такое тип документа и как браузеры определяют используемый язык с помощью тега-декларации . Тег то рассмотрели, а вот само понятие (термин) нет. В этой статье я расскажу, что такое тег, зачем он нужен и какие теги бывают. Как я и говорил в прошлой статье данной рубрики, мы создадим файл-страничку, над которой будем экспериментировать, опираясь на полученные знания. Но это в конце статьи, а пока разберемся с HTML-тегом.

Что такое HTML-тег, виды HTML-тегов, примеры написания

Это тег выделения текста жирным шрифтом. Теги имеют три вида:

  • Открывающий тег — тег, стоящий в начале. В рассмотренном выше примере тег является открывающим и стоит перед тем текстом, который нужно выделить.
  • Закрывающий тег — тег, стоящий в конце. Отличительной чертой служит слеш «/» перед символами в угловых скобках. Опять же обратимся к рассмотренному выше примеру. Тег является закрывающим и стоит после текста, который следует выделить жирным
  • Одиночные теги — теги, которые не имеют закрывающего тега. Примером может служить
    Вот пример открывающего и закрывающего тега:

Вся конструкция, включая текст, будет выглядеть следующим образом:

А вот так будет выглядеть этот текст, когда его обработает браузер и предоставит нам: Этот текст будет выделен жирным. Существует еще такое понятие, как контейнерные теги, но это просто обобщенное название открывающего и закрывающего тегов. Как я писал выше, помимо контейнерных есть еще и одиночные теги. Отличие заключается в том, что такие теги не нужно закрывать. Ярким и наиболее частым примером служит тег новой строки.

В основном, одиночные теги используются для вставки какого-либо элемента, например изображения или таблицы.

Что такое атрибуты,правила написания и зачем они нужны

Font — контейнерный тег, применяемый для форматирования текста. С помощью данного тега вы сможете и выделить текст жирным, и изменить размер, и расстояние между строк — в общем все, что можно делать с текстом. Рассмотрим пример с размером текста. Для начала заключим текст в тег Font.

Теперь немного про правила написания атрибутов. Атрибуты всегда пишутся в открывающем теге и после символов самого тега. Можно написать в одном теге несколько атрибутов в любом порядке. Атрибуты вы можете найти на сайте валидатора W3C (про который я напишу чуть ниже). Итак, вот пример тега font с атрибутом size:

Данный атрибут в теге font изменяет размер заключенного в теги Текста .
Если вы откроете исходный код страницы, то увидите, что место, где находится большое слово «Текста» имеет вид

Вы уже увидели как пишутся атрибуты. Ровно также они пишутся и в других тегах: сначала пишем сам атрибут (в данном случае size), затем ставим «=» и заключаем параметр атрибута в двойные кавычки. Параметры атрибутов вы сможете найти все на том же сайте консорциума всемирной паутины.

Что такое валидатор (validator) W3C, правила написания и список тегов

Возвращаемся к теме статьи. Нас интересуют стандарты языка HNTML 4.01. Переходим по ссылке HTML 4.01 Specification , после чего вверху видим вкладку elements , кликаем на нее. Вот и открывается страница со всеми тегами. Данные теги разработаны и приняты за стандарт консорциумом. Все, опять же, на английском. Сразу после слов «Index of Elements» мы видим легенду (значение букв в столбцах):

А сразу после легенды идет таблица самих тегов:

  • В первом столбце — Name — само название тега — то что должно стоять в угловых скобках ( ).
  • Второй столбец — Start Tag — наличие открывающего тега. В данном столбце вы можете увидеть букву «O», что значит «Optional», а в переводе с английского — Опционально. Данная буква присутствует только напротив тегов , , и
    и означает, что можно ставить открывающий тег, а можно не ставить — браузер сам все сделает.
  • Третий столбец — End Tag — наличие закрывающего тега. Напротив данного тега можно увидеть как букву «O», так и букву «F». Значение первой не изменилось. Вторая же буква — «F» — дословно с английского «запрещено» — означает, что закрывающий тег ставить запрещено, его просто не существует. Например, не существует тега , ибо нечего в нем закрывать.
  • Четвертый — Empty — означает, что тег является одиночным (пустым). Все теги, напротив которых стоит буква «E» в данном столбце, стоит еще и буква «F» в предыдущем столбце. Ведь у одиночных тегов не бывает закрывающих. Примером служит все тот же тег .
  • Пятый столбец — Depr. или Deprecated — с английского «не рекомендуемые». Если в данном столбце стоит буква «D» (которая расшифровывается точно также) значит, что данный тег не рекомендуется к использованию в HTML. Забегая немного вперед, сегодня для оформления как текста, так и внешнего вида всего сайта и HTML-документа используются каскадные таблицы стилей — CSS. Если коротко и просто, то создается один файл, в котором прописываются все параметры текста, которые можно вызвать определенными атрибутами тегов. Так вот, данная функция используется только на сайтах, потому что при рассылке новостей по почте или в RSS CSS не применим. И тут приходит на помощь эти самые теги. Большинство таких тегов, кстати, относятся к оформлению текста ( и являются примером)
  • Шестой столбец — DTD — может содержать либо букву «L», либо «F». Первая — «L»Loose DTD — означает, что тег, напротив которого стоит данная буква, может использоваться только в переходном типе документов ( — Transitional, про который я писал в предыдущей статье). Вторая — «F»Frameset DTD — означает, что тег может использоваться только в документе, типа FRAMESET ( — Frameset). Если же буква отсутствует, то тег можно использовать во всех типах документов.
  • И последний, седьмой столбец — Description — краткое описание тега, опять же на английском

Атрибуты же содержаться на той же страничке спецификации HTML 4.01, но уже во вкладке «attributes». Атрибутов намного больше, нежели тегов. И опять распишу все по пунктам.

  • Первая колонка — Name — как и в случае с тегами — название атрибута. Все на английском, но имея базовые знания можно догадаться, что делает тот или иной атрибут.
  • Вторая колонка — Related Elements — это перечень всех тегов, в которых используется какой-либо атрибут. Все теги со ссылками, поэтому сразу можно будет перейти к информации о теге.
  • Третья колонка — Type — это все возможные значения определенного атрибута. Например напротив выбранного нами атрибута size в теге Font стоит значение CDATA. Его мы рассмотрим позже, а если коротко, то это специальный набор вариантов размера (в данном случае). Ведь можно писать как пиксели, так и проценты
  • Четвертая колонка — Default — означает, обязателен ли атрибут в определенном теге. Например, в теге Img атрибут src обязателен, так как указывает на источник, из которого брать картинку.
  • 6, 7, и 8 колонки означают то же самое, что и в случае с тегами.

Все вышеописанное относится только к HTML версии 4.01. Про HTML 5 мы поговорим в другой статье, затронем и XHTML. А сейчас, как я и обещал, мы создадим страничку на языке HTML, над которой и будем экспериментировать.

Создание файла в формате html — HTML-документ

Прежде всего, разберемся что такое HTML-документ. А это, собственно, файл в формате HTML. И все интернет странички являются HTML- документами. Например, при попадании на сайт в адресной строке в конце можно увидеть после адреса «.html» или «.htm». Вот файл с таким расширением мы и создадим. Вообще, если хотите экспериментировать над сайтом, а не над страничкой, то лучше создать локальный сервер — Денвер (про который я все хочу написать).

Учитывая то, что я не рассказал даже о тегах, присутствующих на каждой страничке, то просто создадим файл с любым именем и расширением .html. Можно (и лучше всего) использовать Notepad++ , потому что в данном текстовом редакторе используется подсветка кода, что очень удобно при редактировании кода и сохранять файлы можно во множестве форматов. Также есть программы, в которых при наборе кода сразу появляется результат в обработанном виде

Итак, нам нужно просто открыть Notepad++ и сохранить файл с произвольным текстом (можно и пустой), но в формате .html. Для этого, как обычно, кликаете на надпись файл, затем «сохранить как » и ищем среди большого списка расширений «HyperText Markup Language file (расширения файлов)». Вот, собственно, и все. Первые строки в этот файл мы добавим уже в следующей статье из рубрики «Создаем сайт с нуля»

Тег что это простыми словами: метки, HTML тег, коды, хеши

Только и слышно вокруг: «добавьте тэг, исправьте тег, запишите в тэг». А речь об одном и том же теге? Что такое тег для маркетолога?

В данной статье мы рассмотрим html тэги, хэштеги, мета теги, тэги аналитики, теги отслеживания, а на закуску — базовые настройки Google Tag Manager.

1. Что такое HTML теги?

Тэг (англ. tag — метка) это понятие широко-компьютерное. В разных обстоятельствах может обозначать разные объекты.

HTML-теги это элементы компьютерной html верстки сайта. Каждый тег заключён в треугольные скобки, например

P — это буквенное обозначение тэга параграфа. Параграф используется для размещения на странице текстов. Сайты состоят из изображений, текстов, различных блоков, заголовков, форм с полями ввода, кнопок и ссылок.

Поэтому html тегов достаточно много. Их правописание (синтаксис) регулируется правилами W2C — организации, «управляющей» интернетом.

Все новейшие тэги относятся к HTML5, стандарту записи пришедшему на смену HTML3 (не путать с CSS3 — это также новейший стандарт для стилей сайтов).

Некоторые HTML тэги состоят из из двух частей: открывающей и закрывающей, как в примере с

. Другие не содержит закрывающего тега, например:

Тег картинки содержит только одну пару треугольник скобок. А что это тег именно картинки, мы определяем по первому слову после открывающей кавычки — img.

Через пробел внутри тэга (то есть между одной пары треугольник скобок) стоят атрибуты тегов, через знак равно указывается значение каждого атрибута. Бывают атрибуты специфические только для определенных тегов, а бывают общие для множества разных тегов.

1.1 Параметры отслеживания внутри HTML тегов

Маркетологу важно разобраться в синтаксисе таких тегов как ссылка , кнопка и форма

Илон Маск рекомендует:  Что такое код hw_api_reason >description
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL