Хештеги в инстаграме: что это такое, зачем они нужны и как работают

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

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

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

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

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

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

Некоторые HTML тэги состоят из из двух частей: открывающей и закрывающей, как в примере с <p>text</p>. Другие не содержит закрывающего тега, например:

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

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

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

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

На сайте имеется форма заявки:

Параметры отслеживания это функциональная надстройка в теле HTML страницы. На сайте имеется форма заявки:

Чтобы установить код отслеживания Яндекс метрики, мы можем добавить параметр отслеживания на тег формы или на кнопку отправки. При прочих равных, отслеживание отправки формы – наиболее точный вариант (ведь кто-то может нажать кнопку не заполнив данные, а нам нужна валидная отправка). Поэтому для Яндекс Метрики добавляем параметры onsubmit внутри тега form:

Синтаксис действия onsubmit можно посмотреть в справке Яндекса. Там же есть варианты добавления параметров на кнопку, ссылку или на выполнение события при перезагрузке страницы.

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

Также здесь нужен доступа к коду сайта, что не всегда есть у маркетолога. В таких случаях помогает компоновщик тегов Google, о котором чуть ниже.

Тэги ремаркетинга

Тег ремаркетинга — это уже не одно ключевое слово. В строгом смысле это даже не один html-тег, а целый кусок кода (как правило, на javascript).

Этот код генерируется системой контекстной рекламы, например Google Ads или Facebook Ads. Его нужно вставить определённое место в коде сайте, обычно до закрывающего тега </body> (видите, мы уже употребляем «тег» в разных значениях).

Когда на сайте установлен и корректно работает тег ремаркетинга, можно через систему аналитики — например, Яндекс Метрика или Google Analytics — получать отчёты о посещаемости и конверсиях из данных Рекламных систем. Маркетинговые тэги используются для составления аудитории посетителей сайта и для аналитики.

Отдельно по Google Ads скажу, что тег ремаркетинга можно взять из самой рекламной системы, а также сформировать цель (конверсию) и аудитории ремаркетинга внутри Google Analytics и связать их с Google Ads.

Это более профессиональный подход, потому что можно сделать более тонкую настройку аудиторий и ограничиться одним тегом Аналитикс. Однако, рекламщики народ мнительный и иногда — особенно при сложной имплементации конверсий на сайте / в приложении — они предпочитают вести рекламу и использовать «родной» тег отслеживания (если Google Ads — то и тег из Google Ads, а не из Google Analytics).

Как установить тэг от Facebook

Как установить тег ремаркетинга в Google Ads

Структура HTML страницы

Браузер читает HTML так, как читаете его вы: сверху вниз и слева направо.
Таким образом, HTML-документ начинается и заканчивается тем, чем должен начинаться и заканчиваться текст.
Во-первых необходимо сообщить браузеру, что вы будете «говорить» с ним на языке HTML.
Это делается Тегом (тут ничего нового). Так что, прежде чем напечатать что-либо, нужно поставить Тег «».
Как Вы помните это открывающий Тег, который должен иметь и закрывающий Тег после того, как вы закончите ввод HTML.
Поэтому, чтобы не забыть, поставьте закрывающий Тег «» на пару строк ниже и вводите весь текст документа между и .
Следующее, что необходимо, это «head» (голова или «шапка»), которая содержит служебную информацию о вашем документе, и «body» (тело), содержимое самого документа.
Поскольку HTML логичен, head ( и ) находятся выше body ( и ).
Давайте скажем пару слов о том, как собственно создать веб-страницу на практике.
Все очень просто, для этого понадобится текстовый редактор, желательно с подсветкой синтаксиса HTML (Sublime Text 2, Notepad++).

️Важно

Примечание: Главную страницу сайта принято называть (index.html, index.php,index.js).

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

1<html>

2<head>

3<title>Мой первый сайт</title>

4</head>

5<body>

6  Привет всем! А это мой первый сайт.

7</body>

8</html>

️Важно

Не забывайте про табуляцию, чтобы Ващ код был читаемым.

Что такое HTML-атрибуты ?

Теги это метки, указывающие браузеру, как нужно представлять ваш web-сайт.
(Например, информирует браузер, что нужно сделать перевод строки).
В некоторых Тегах вы можете вводить дополнительную информацию.
Такая дополнительная информация называется «атрибут».
Атрибуты всегда записываются внутри Тега, после них следует знак равенства и детали атрибута, заключённые в двойные кавычки.
Точка с запятой после атрибута служит для разделения команд разных стилей. Мы к этому ещё вернёмся.

1<h2style="background-color#ff0000;">Мой друг HTML</h2>

Вложенные Теги

Как вы заметили в разделе структура HTML-страницы, между открывающим и закрывающим Тегами могут быть и другие Теги.
Такие Теги называются вложенные.
А Тег, внутрь которого они вложены, называется родитель.

1<b><i>Это жирный курсив</i></b>

Alt атрибуты изображения

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

Альтернативный текст показывается посетителям, если какое-либо конкретное изображение не может быть загружено (или если отображение картинок отключено).
Атрибуты Alt обеспечивают контекст для роботов, потому что поисковые системы не могут «видеть» изображения.

На e-commerce сайтах изображения часто имеют решающее влияние на то, как посетитель взаимодействует со страницей

Поисковики так же прямо заявляют о важности этого тега

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

Даже Мюллер писал у себя в Твиттере, что продуманное альтернативное описание изображения необычайно важно, если вы хотите занять высокое место в Google Картинках. Однако не забывайте о релевантности. Не только alt-текст, заголовки и подписи должны соответствовать изображению, но и сама картинка должна размещаться в тематическом контенте

Не только alt-текст, заголовки и подписи должны соответствовать изображению, но и сама картинка должна размещаться в тематическом контенте

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

Оптимизация alt тега img для изображений

Сделайте всё возможное, чтобы оптимизировать свои самые важные изображения (картинки товаров, инфографику, инструкции), которые могут получить хорошие позиции в поиске Google Images.
Добавьте alt-текст на страницах, где не так много другого контента (кроме картинок).
Делайте тег alt для изображений понятным и достаточно информативным, разумно используйте ключевые слова и убедитесь, что они естественным образом вписываются в содержание страниц.

Группа значений атрибута NAME

«keywords» (ключевые слова)

Keywords поисковые системы используют для того, чтобы определить релевантность страницы тому или иному запросу. При формировании данного значения необходимо использовать только те слова, которые обязательно встречаются в самом документе. Использование тех слов, которых нет на странице, не рекомендуется. Ключевые слова нужно добавлять по одному, через запятую, в единственном числе. Рекомендованное количество слов в «keywords» — не более десяти. Кроме того, выявлено, что разбивка этого значения на несколько строк влияет на оценку ссылки поисковыми машинами. Некоторые поисковые системы не индексируют сайты, в которых в значении «keywords» повторяется одно и то же слово для увеличения позиции в списке результатов.

Если раньше «keywords» имел определённую роль в ранжировании сайта, то в последнее время поисковые системы относятся к нему нейтрально.

HTML-код с «keywords»:

«description» (описание страницы)

Description используется при создании краткого описания конкретной страницы Вашего сайта. Практически все поисковые системы учитывают его при индексации, а также при создании аннотации в выдаче по запросу. При отсутствии «description» поисковые системы выдают в аннотации первую строку документа или отрывок, содержащий ключевые слова. Отображается после ссылки при поиске страниц в поисковике, поэтому желательно не просто указывать краткое описание документа, но сделать его содержание привлекательным рекламным сообщением.

Таким образом, правильный description обязательно должен содержать ключевое слово, коротко и точно описывать то, о чём данная веб-страница. «Description» вместе с «title» образуют очень важную пару значений, от которых зависит то, перейдёт пользователь из поисковой выдачи на веб-страницу или нет! Поэтому «description» и «title» нужно прописывать для каждой веб-страницы!

HTML-код с «description»:

«Author» и «Copyright»

Эти значения, как правило, не используются одновременно. Функция author и copyright — идентификация автора или принадлежности контента на странице. «Author» содержит имя автора веб-страницы, но в случае, если веб-сайт принадлежит какой-либо организации, целесообразнее использовать значение «Copyright».

HTML-код с «author»:

«Robots»

Robots — формирует информацию о гипертекстовых документах, которая поступает к роботам поисковых систем.

У «robots» могут быть следующие значения:

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

HTML-код с «robots»:

Элементы оформления[править]

Подведём чертуправить

Иногда вы что-то пишете, пишете, и вдруг чувствуете что нужно подвести черту.

Делается это просто как новая строка: <hr /> (horisontal ruler). Вообще-то в этом теге есть атрибуты, которые настраивают внешний вид, но их использование в новых стандартах нежелательно. Разрешены только общие атрибуты, такие как id, class, style и атрибуты событий, но это темы следующего раздела.

Картинкиправить

До этого момента мы прочитали очень много текста о тексте. Конечно — текст важнейшая часть любой страницы (если конечно это не страница какой-либо галереи), но сплошной текст штука довольно скучная. Иллюстрированный текст выглядит намного лучше. Для вставки в текст изображения используют тег <img>. Его атрибут src задаёт источник (source) — файл, в котором содержится картинка. Этот тег одинарный, поэтому закрывающий тег не нужен.

Иногда картинки не отображаются. Это происходит по разным причинам. Тем не менее, нужно чтобы пользователь и в таких случаях знал, что вы хотели ему показать. Для этого картинки имеют атрибут alt. Он задает текст, который отображается на месте картинки в тех случаях, когда сама картинка недоступна.

Также мы можем изменить размер картинки. Например, если мы имеем маленькое изображение, мы можем его растянуть. Правда тогда оно будет отображаться несколько размыто. Также можно изменять размеры изображения вместе с изменением размеров окна браузера. Для этого размеры указывают в процентах. Размеры задаются атрибутами width и height. Пример:

<!DOCTYPE html>
<html>
   <head>
      <title>
         Картинки
      </title>
      <meta charset="utf-8" />
   </head>
   <body>
      <img src="image.jpg" alt="Маленькая картинка" title="Маленькая картинка" width="100" height="100">
      <br/>
      <img src="image.jpg" alt="Велика картинка" title="Велика картинка" width="400" height="400">
      <br />
      <img src="image.jpg" alt="Широка картинка" title="Широка картинка" width="100%" height="400">
      <br/>
   </body>
</html>

Картинки могут быть помещены между тегами <a> и </a>, тогда щелчок по ним будет аналогичным щелчку по обычным ссылкам. Вокруг картинки появится синяя рамка. Но есть ещё более интересный способ сделать из картинки гиперссылку. Это карты.

Картыправить

Изображение можно разделить на области различной формы, каждая из которых может ссылаться в другое место. Для этого с помощью тега <map> задают карту. Атрибут id идентифицирует карту и используется для связи с картинкой. Чтобы картинку назначить в качестве карты, используется атрибут usemap (в котором мы должны записать id карты). Внутри тега карты содержатся теги областей, которые задаются тегами <area>. Опять же, этот тег одинарный, и хочет чтобы его правильно закрывали. Атрибут href задаёт адрес ссылки, атрибут nohref, если назначить ему значение true, исключает зону с карты. Атрибут shape задает форму области: rect — прямоугольная, circle — круг, и poly — для многоугольника.

<!DOCTYPE html>
<html>
   <head>
      <title>
         Карта планет
      </title>
      <meta>
   </head>
   <body>
      <img src="planets.gif" width="145" height="126" usemap="#planetmap">
      <map id="planetmap" name="planetmap">
         <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
         <area shape="circle" coords="90,58,3" alt="Mercury" href="mercury.htm" />
         <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
      </map>
   </body>
</html>

Ошибки при использовании облака тегов

Есть и недостатки такого способа размещения новых страниц на сайте. Особенно в том случае, когда на одной странице используется много тегов. Мы имеем в виду ОЧЕНЬ МНОГО тегов!

В примере облака из 2000-х – теги, вероятнее всего, были подобраны просто по критерию «чем больше, тем лучше». В свое время это работало, так как раньше и алгоритмы, и направленность работ SEO в целом были совершенно другие. Но увы, у многих людей до сих пор остается мнение, что «облако тегов» – это плохо.

Случаи, когда это действительно так:

Пример. Возьмем запросы «купить блокнот для записей» и «купить блокнот». По содержанию кажется, что они разные, а добавленная фраза «для записей» – уникальна и поэтому может использоваться для создания новой точки входа по целому запросу.

Результаты выдачи:

Яндекс

Что мы видим: выдача по двум запросам показывает одни и те же страницы одних и тех же сайтов только в разном порядке. Это и означает «интент запроса».

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

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

насколько большим сделать облако тегов;
какое количество тегов нужно;
какие технологии использовать;
какие теги выбрать.

Ответы на основные вопросы по тегированию

Основной блок тегов должен располагаться на странице сверху перед матрицей товаров.

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

Пример № 1.

Пример № 2.

Пример № 3.

Пример № 4.

Какие запросы выбираются для тегов?

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

Чем отличается фильтр от тега?

Тег – это ВСЕГДА отдельная страница, как минимум, с уникальным URL и мета-тегами, а также учетом вхождения основного ключевого запроса по выбранному тегу.

На страницах тега могут быть теги?

Да, на страницах тегов можно размещать другие теги, если имеются подходящие.

Например, запрос «кофе в зернах темной обжарки» реализован на сайте, как тег. Пользователь перешел по запросу и ему в тегах для данной страницы можно предложить другой тег «кофе в зернах темной обжарки lavazza» как вариант дополнения брендом основного запроса.

Что такое Html теги

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

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

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

Теги – это простые инструменты разметки страницы. Когда браузер загружает вашу разметку, он по тегам понимает, в какой виде показывать такие элементы как текст, картинки, ролики и другие. Изначально html в одиночку отвечал за все это, но потом появились стили CSS, сильно упростившие процесс.

Пусть тегов много, но после появления CSS актуальных стало гораздо меньше. Как же пользоваться ими? Скажем, вам нужен абзац на странице. В таком случае необходимо окружить текст параграфа открывающей и закрывающей меткой «p» (латинская «p», а не русская «р»). Выглядеть такая строчка кода будет так:

Представление информации структурировано[править]

Спискиправить

Списки в HTML бывают трёх видов: упорядоченные (ordered list) <ol>, неупорядоченные (unordered list) <ul> , и списки определений (definition list) <dl> . Элементы двух первых списков задаются тегом <li> (list item). Элементом списка может быть любой текст, картинки, абзацы, а также другие списки. Например, упорядоченный список задают так:

<ol>
    <li> Раз </li>
    <li> Два </li>
    <li> Три </li>
</ol>

Выглядит это так:

Раз
Два
Три

Список определений не является списком элементов. Это список терминов и определений терминов. Список определений начинается с тега <dl>. Каждый термин списка определений начинается с тега <dt>. Каждое определение списка начинается с тега <dd>:

<dl>
    <dt>элемент 1</dt>
    <dd>описание элемента 1</dd>
    <dt>элемент 2</dt>
    <dd>описание элемента 2</dd>
</dl>

Таблицыправить

Таблицы удобно задавать с помощью HTML, так как в HTML можно делать вложенные элементы. Таблица также состоит из вложенных элементов. Таблица (<table>) состоит из строк (<tr> — table row), каждая из которых также состоит из ячеек (<td> — table data). А внутри ячейки может быть уже все что угодно. Даже еще одна таблица. Выглядит это так:

Строка 1 Столбец 1	Строка 1 Столбец 2	Строка 1 Столбец 3
Строка 2 Столбец 1	Строка 2 Столбец 2	Строка 2 Столбец 3
Строка 3 Столбец 1	Строка 3 Столбец 2	Строка 3 Столбец 3

<table border="1">
<tr> <td> Строка 1 Столбец 1 </td> <td> Строка 1 Столбец 2 </td> <td> Строка 1 Столбец 3 </td></tr>
<tr> <td> Строка 2 Столбец 1 </td> <td> Строка 2 Столбец 2 </td> <td> Строка 2 Столбец 3 </td></tr>
<tr> <td> Строка 3 Столбец 1 </td> <td> Строка 3 Столбец 2 </td> <td> Строка 3 Столбец 3 </td></tr>
</table>

По умолчанию таблицы отображаются без границ. То есть границы невидимы. Это иногда полезно, но иногда мы хотим, чтобы границы были видны. Для этого задают значение атрибута border. Он задаёт толщину границ таблицы. (Правда только внешних). Если его значение ноль, то границы не отображаются.

Иногда надо назвать столбцы или строки, используют ячейку заголовка. Для этого вместо тега <td> пишут <th>. Выглядит это так:

	Столбец 1	Столбец 2
Строка 1	Строка 1 Столбец 1	Строка 1 Столбец 2
Строка 2	Строка 2 Столбец 1	Строка 2 Столбец 2

А пишется вот так:

<table border="1">
<tr><td></td> <th> Столбец 1 </th> <th> Столбец 2 </th> </tr>
<tr> <th> Строка 1 </th> <td> Строка 1 Столбец 1 </td> <td> Строка 1 Столбец 2 </td> </tr>
<tr> <th> Строка 2 </th> <td> Строка 2 Столбец 1 </td> <td> Строка 2 Столбец 2 </td> </tr>
</table>

Стоит заметить, что такой способ лучше чем писать содержимое ячейки в тегах <b> или <strong>. И не только потому, что так короче. А и потому, что потом можно будет применить к заголовкам таблицы отдельные стили.

Некоторые браузеры не отображают пустые ячейки (то есть не обводят их рамкой). Можете посмотреть что делает ваш, в предыдущем примере верхняя левая ячейка пуста. Чтобы обмануть браузер и заставить его отображать ячейку будто там что-то есть, мы можем положить туда невидимый символ -. Это символ несокрушимого пропуска (Non Breakable SPace). Назвали его несокрушимым оттого, что слова, разделённые таким пропуском, переносятся на следующую строку только вместе.

Ячейки таблицы можно объединять. Делается это с помощью атрибутов colspan и rowspan тега <td>. colspan указывает на сколько колонок будет данная ячейка, а rowspan — на сколько строк. Такой код:

<table border="1">
<tr><td colspan="2"> Строка 1 Столбец 1 растягивается на два вправо </td> <td> Строка 1 Столбец 3 </td></tr>
<tr><td> Строка 2 Столбец 1</td> <td rowspan="2"> Строка 2 Столбец 2 растягивается на 2 вниз </td> <td> Строка 2 Столбец 3 </td></tr>
<tr><td> Строка 3 Столбец 1 </td><td> Строка 3 Столбец 3 </td></tr>
</table>

Даёт такой результат:

Строка 1 Столбец 1 растягивается на два вправо	Строка 1 Столбец 3
Строка 2 Столбец 1	Строка 2 Столбец 2 растягивается на 2 вниз	Строка 2 Столбец 3
Строка 3 Столбец 1	Строка 3 Столбец 3

Кроме строк таблица может иметь заголовок. Тег <caption> предназначен для создания заголовка к таблице и может размещаться только в середине тега <TABLE>, причём сразу после открывающего тега. Такой заголовок представляет собой текст, который по умолчанию отображается перед таблицей и описывает её.

Также можно выделить строки таблицы в группы, с различным функциональным назначением и назначить им разные стили. Ой как мне не терпится уже дойти до стилей. Но по порядку. Можно выделить заголовочный часть <thead>, основную часть <tbody> и итог <tfoot>.

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

Как я и писал, существует великое множество тегов. Но где их всех найти? Вот для этой цели существует валидатор W3C W3C — World Wide Web Consorcium, а по-русски — консорциум всемирной паутины. Не совсем понятно, да? Это такое место, где разрабатывают веб-стандарты — (языки гипертекстовой разметки — их детище).

Кстати, Google PageRank у данного сайта равен 9, а Тематический индекс цитирования — 37000 (это все очень много, если кто не в курсе).

Вот и открывается страница со всеми тегами. Данные теги разработаны и приняты за стандарт консорциумом. Все, опять же, на английском. Сразу после слов «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-документов.

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

Например, вы можете указать на странице такое:

Эта разметка отлично работает, когда отображается на странице статьи, например, на этой странице. Но как быть, если вы перейдёте на страницу категорий, например, в раздел статей о разработке в нашем блоге? Разметка будет такой:

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

К сожалению, браузеры не поддерживают отображение структуры HTML5. Поэтому в данный момент причин для использования нет. Скринридер JAWS реализует алгоритм отображения структуры HTML5 в Internet Explorer, но эта функция не очень удачная.

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

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

Отображение заголовков в (слева) и без

Такие же результаты в Chrome, а также в других браузерах, которые используют Chromium, например, в бета-версии Edge для Mac и в Safari для Mac.

Значит ли это, что в можно смело использовать только заголовки первого порядка и ждать, что всё остальное за нас сделает браузер? Нет, так как при использовании меняется только визуальное представление заголовка. Если открыть инструменты разработчика, видно, что элемент выглядит как , но остается заголовком первого порядка.

Элемент выглядит как , но это

Сравните это с настоящим заголовком второго порядка из правой колонки.

Заголовок второго порядка

На иллюстрации выше видно, что дерево доступности получает корректные данные о порядке заголовка. Команда Mozilla писала об этом.

Для пользователей с особыми потребностями иерархия заголовков на странице играет важную роль. По данным исследования WebAIM, 86,1 % людей с ограниченными возможностями считают полезной практикой использование разноуровневых заголовков.

Поэтому лучшая практика — использовать заголовки — и игнорировать возможности .