HTML - краткое описание. Функции Все об html описание и использование

Сегодня я расскажу вам про мета-тег Description и как его лучше всего применять.

Что такое meta Description?

Description – тег, в котором содержится описание к странице сайта. В отличие от тега meta keywords он отображается в поисковых системах. Формирование данного тега входит в чек-лист грамотного SEO-специалиста.


Правильно составленный Description оказывает влияние на CTR сниппета, что в свою очередь можеть сыграть немаловажную роль на релевантности страницы. Пользователи анализируют description и если данное предложение их заинтересует они перейдут на страницу вашего сайта.

Новое: Как сформировать идеальный сниппет с примерами

Синтаксис html description



Как правильно составить Description?

Я выписал основные требования по формированию тега, которые вы должны соблюдать:

Тег встречается 1 раз на странице. Многие сайты не содержат description. Как правило они просто не оптимизированы. А так, конечно, тег может встречаться только один раз на сайте.

Соответствие Description тематике страницы . Как и в случае с Title важно понимать, что вводя определенный запрос пользователь хочет видеть нужную ему информацию. Также описание description выводится в социальных сетях при копировании ссылки.

Уникальные описания в дескрипшн. У каждой страницы должны быть свои meta tag description без повторений и шаблонов. Ни в коем случае не стоит копировать тег Title.

Длина мета-тега description. Оптимальная длина от 150 символов до 200 символов. Старайтесь укладываться в этот интервал. Приблизительно у поисковых систем Яндекс и Google равное количество слов в предложениях около 15-20.

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

Упоминание преимуществ но ограничено . Важно, чтобы данные преимущества встречались на самой странице. Как экспериментировать не стоит, но стоит обратить внимание на небольшие преимущества, которые вы можете встретить в description:

Упоминание про доставку

Если дело касается товара, в принципе это актуально и грех не указать данное преимущество.

Например:

“Бесплатная доставка по Москве”

Цифры также важны. Числовая информация закладывается в голове у человека. Рассмотрим пример:

Компания по компьютерной помощи:

“Выезд специалиста в любой район Москвы в течении 1 часа”



Но есть еще предупреждение, как не стоит писать description.

Примеры плохих мета описаний Description :
  • Наполнение мета-описаний временной, служебной информацией, например: «Не забыть добавить здесь текст»;
  • Устаревшие описания. Например, цены на сайте изменились, описываемый документ теперь расположен по другому адресу, а описания при этом прежние;
  • Размещение важной информации в конце текста. Старайтесь располагать наиболее важную информацию и фразы в начале мета-описаний.

В зависимости от вашего запроса Яндекс формирует сниппет + учитывает текст на сайте. Соответственно, если вы вводите запрос, но его нет в description Яндекс потягивает текст с того места на сайте, где чаще всего встречается данный запрос.

Для начала хочу вам показать мнение бывшего работника Google Matt Cutts.


Вкратце Мэт советует не использовать повторяющиеся описания страниц (description), чтобы хорошо ранжироваться в Google.

Что еще полезное можно подчеркнуть из справки в Google про description:

Цитирую:

Включайте в описание сайта четко классифицированные факты:

Мета-описания необязательно писать в форме предложений. Включите в описания структурированные данные о странице. Например, мета-описание новости или статьи в блоге может содержать имя автора, дату публикации, тему статьи. Это обеспечит потенциального посетителя страницы ценной информацией, которая в противном случае не попала бы в описание. К примеру, страница какого-либо продукта обычно содержит много полезной информации, такой как цена, производитель, год производства. Но, так как эти данные разбросаны по странице, только мета-описание сможет представить их в читабельном виде. Рассмотрим следующее мета-описание книги про Гарри Поттера, пример взят с известного сайта:

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

  • Название книги дублируется в заголовке страницы;
  • Некоторые данные в описании также продублированы (Дж. К. Роулинг, Мэри Грандпре перечислены два раза);
  • Нет четкого определения данных: кто такая Мэри Грандпре?
  • Отсутствие пробелов и злоупотребление двоеточиями затрудняет чтение.

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


Содержимое мета-тега «title»

Основное содержимое страницы

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

§ 3. Мета-тег «description» (описание страницы)

С ледующим важным мета-тегом является тег «description», в котором должно содержаться краткое описание страницы. Именно «краткое» и именно «описание страницы». Достаточно добавить одно-два небольших предложения, в которых указать о чём и для кого эта страница.

В ажной особенностью мета-тега «description» является то обстоятельство, что в случае его правильного заполнения поисковые системы именно на его основе формируют сниппет страницы в выдаче (краткое описание под ссылкой на страницу):

Е сли поисковикам не нравится то, как заполнен мета-тег «description», то сниппет формируется из кусочков фраз (надёрганных со всей страницы), которые релевантны запросу.

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

H TML-код для создания мета-тега «description» будет следующим:

Содержимое мета-тега «description»">
Содержимое мета-тега «title»

Основное содержимое страницы

Т еперь перейдём к описанию основных технических мета-тегов из группы «HTTP-EQUIV» (HTTP-эквиваленты).

§ 4. Технические мета-теги

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

  • content-type - тип документа и его кодировка. Этот мета-тег нужен для правильного отображения символов браузером.
    Кодировок существует много. Большинство из них тебе даже никогда не встретится. Не говоря уже про то, что ты будешь их использовать сам. Современные браузеры определяют тип кодировки атоматически, но для большей уверенности можно указать его и самостоятельно. Если ты создаёшь html-документ в операционной системе Windows, языком которой является русский, то кодировка будет «windows-1251», а код для вставки мета-тега такой:

    Содержимое мета-тега «title»

    Основное содержимое страницы

  • content-language - указание языка документа. Значение этого необязательного мета-тега используется как поисковыми роботами, так и web-серверами. Код для вставки:

    Содержимое мета-тега «title»

    Основное содержимое страницы

  • refresh - время (в секундах), через которое произойдет автоматическая перезагрузка документа или переход на другую html-страницу с заданным адресом (url). Например, чтобы производить атоматическую перезагрузку документа каждые 30 секунд, нужно вставить этот мета-тег так:

    Содержимое мета-тега «title»

    Основное содержимое страницы

    А, чтобы, спустя 5 секунд, перейти на страницу по адресу http://www.сайт/, нужно записать так:

    Содержимое мета-тега «title»

    Основное содержимое страницы

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

    Код для вставки мета-тега «robots»:

    Содержимое мета-тега «title»

    Основное содержимое страницы

  • author и copyright - мета-теги, которые позволяют указать авторство и владельца контента на странице. HTML-код для вставки:

    Содержимое мета-тега «title»

    Основное содержимое страницы

§ 5. Заключение

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

Заголовок страницы

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

Н а этом раздел моего сайта окончательно закончен и дальше речь пойдёт о том, с чего начать раскрутку и продвижение своего сайта в Интернете. Там же парочка моих советов из личного опыта по оптимизации страниц сайта. Жми на «Дальше».

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

Как использовался HTML до появления CSS

Главное предназначение HTML (HyperText Markup Language – англ.) – структурирование информации на веб-страницах. Изначально этот язык был придуман именно для этих целей. Но по мере того как популярность Интернета стала возрастать, росло и желание пользователей как-то разнообразить и украсить свои сайты.

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

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

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

Для чего нужен HTML сейчас

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

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

Вот некоторые HTML-теги, которые можно (и нужно) смело заменять стилями CSS:

  • «украшающие», выравнивающие атрибуты к тегам (color , bgcolor , align и т. д.);
  • тег
(при использовании для макетирования веб-страницы);
  • тег .
  • HTML-теги для структурирования

    Для структурирования страниц используйте следующие теги:

    H1-H6 (heading) Теги h1-h6 предназначены для обозначения заголовков. С помощью этих тегов очень удобно разделять текст. Для лучшего понимания представьте себе книгу, в которой есть главы и подглавы. Название главы книги – это h1 , подглавы – h2 , части подглав – h3 и т. д. Расставлять теги заголовков лучше последовательно. P (paragraph) Тег

    Служит для обозначения абзацев текста. OL, UL (ordered list, unordered list) Теги ,

      – удобный инструмент для обозначения перечней (навигационные ссылки, пункты в тексте, последовательный список и т. д.). DL (definition list) Тег в связке с тегами , используется при создании списка определений, где – название определения (definition term), – описание определения (definition description). DIV (division) DIV – блочный элемент, который может использоваться для выделения фрагмента документа, а также для логического объединения нескольких элементов. С помощью CSS можно придать блоку необходимый вид и позиционирование, но сам по себе никак не меняет внешний вид документа. SPAN (span) Тег по своей роли похож на . Но – это блочный элемент, а – строчный. Например, если вам нужно поменять стиль одного слова внутри тега

      Вы «заворачиваете» это слово в тег , добавляете атрибут id или class с именем селектора, после чего в CSS назначаете ему необходимый стиль. Семантические теги HTML5 Чтобы более грамотно структурировать HTML-документ, используйте новые теги, которые помогают лучше описать содержимое. К примеру, как отличить шапку сайта, навигационное меню и футер от другого содержимого, если все они обозначены тегами ? На помощь приходят такие теги HTML5, как , , и другие. Они не влияют на внешний вид, но помогают ориентироваться браузерам, а также поисковым роботам, зашедшим на сайт.
      Скриншоты с примерами использования структурирующих тегов и CSS

      Элемент

      HTML существует не в одной версии, а в нескольких (HTML 4.01, HTML5, XHTML 1.0 и другие), поэтому для правильной интерпретации веб-страницы браузеру необходимо знать, какую из версий языка вы используете. Рекомендуется указывать doctype в самом начале страницы (первая строка кода). Если проигнорировать doctype либо допустить ошибку, браузер откроет веб-страницу в так называемом режиме совместимости, что может привести к некорректному отображению содержимого, в том числе и стилей. Наиболее простым вариантом описания типа документа является doctype для HTML5 (подходит для любого браузера и работает, даже если теги HTML5 не были использованы):

      Выводы

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

      HTML необходим для структурирования информации на веб-страницах и не используется для изменения внешнего вида документа.

      За дизайн веб-страниц отвечает CSS.

      Важно пользоваться структурирующими тегами, такими как ,

      , , , а также новыми тегами HTML5 для большей семантичности документа.

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

    для макетирования документа.

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

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

    Мэтт Каттс, руководитель службы анти-спама Google, ответил на вопрос пользователя о мета-теге Description в своем видео-обращении.

    Пользователь спросил: «Действительно ли необходимо, чтобы каждая страница веб-сайта содержала уникальный мета-тег Description ?».

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

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

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

    Что Мэтт, настоятельно рекомендует, так это - включать мета-тег Description на страницы, которые действительно имеют важное значение. Например, домашние страницы или страницы, которые имеют высокий коэффициент окупаемости инвестиций (ROI).

    ROI (Return on Investment) – коэффициент окупаемости инвестиций, или показатель рентабельности вложений, то есть процент прибыльности (при значении больше 100%) или убыточности (при значении меньше 100%) конкретной суммы вложения денежных средств в определенный проект .

    Формула для расчета ROI:

    ROI = ((B – A) / C) * 100%,

    • себестоимость продукта или услуги (А) – включает в себя абсолютно все затраты на покупку частей для продукции, доставку до склада, производство товара, зарплату работникам и т.д.;
    • доход (В) – конечная прибыль с продажи продукта или услуги;
    • сумма инвестиций (С) – суммарное количество денежных средств, которые выступали в роли вложения, например бюджет на контекстную рекламу .

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

    Подытоживая все сказанное Мэттом, можно сделать следующий вывод: вы должны не только избегать, но и исключить любую возможность наличия дублированного описания в мета-тегах Description на всех страницах своего сайта. Создавайте уникальные описания для некоторых, особо значимых страниц и пусть Google автоматически создает остальные.

    Вы можете прослушать полное видео-обращение Мэтта ниже (на английском языке):

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

    Характерные особенности мета-тега Description

    HTML Мета-тег Description применяют при создании краткого описания страницы, он используется поисковыми системами для индексации, а также при создании сниппета (аннотации) в выдаче по запросу.

    При отсутствии мета-тега Description , поисковые системы выдают в аннотации первую строку документа или отрывок, содержащий ключевые слова.

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

    Больше узнать о значении мета-тегов в проведении поисковой оптимизации сайта можно в статье "Почему следует использовать поисковую оптимизацию мета-тегов для продвижения сайтов ".

    Как и в случае с мета-тегом Keywords , старайтесь не повторять слова и фразы слишком часто, чтобы избежать наказания со стороны поисковиков. Более подробно познакомиться с мета-тегом Keywords вы можете в статье "Как правильно использовать html мета-тег keywords ".

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

    Ваша задача – создать такой мета-тег Description , который будет привлекательным как для роботов, так и для людей. Таким образом, как и в случае с тегом Title , важно, чтобы мета-тег Description был наполнен ключевыми словами и был привлекательным для людей. Поисковая оптимизация тега Title описана в статье "Kак правильно составить html тег title заголовка страницы сайта ".

    Правила для мeтa-тега Description более или менее те же, что и для тега Title . Однако содержание этого тега, как правило, будет объемнее, чем тега Title .

    Если вебмастер не уделил должного внимания заполнению мета-тега Description , то поисковая система сама формирует т.н. сниппет - краткое описание под ссылкой на страницу - из фрагментов предложений, соответствующих тематике запроса, со всей страницы.

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

    HTML-код мета-тега Description располагается в следующем месте:





    Содержимое мета - тега «title»< /title>
    < /head>
    Основное содержимое страницы< /body>
    < /html>

    Вот как, к примеру, бы мог выглядеть HTML-код мета-тега Description для ключевого слова “Туры в Одессу”:

    Обратите внимание, что в этом описании повторяется ключевое слово “Туры в Одессу”, а также указывается на очевидные выгоды: клиент будет иметь возможность отдыхать, не беспокоясь о деталях поездки - вы будете заботиться о них.

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

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

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

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

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

    Как только ваш сайт полностью проиндексирован Google , вы можете проверить случаи дубликата мета-тегов в Google Webmaster tools , например.

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

    Хорошо написанные и уникальные мета-теги Description на каждой странице вашего сайта будут способствовать увеличению количества кликов по вашей ссылке.

    Рекомендации от Google по использованию мета-тега Description

    МЕТА-ТЕГ Description

    Придумайте краткое описание для каждой страницы

    Метатег дает поисковой системе краткое описание содержимого страницы . Если в теге мы использовали одну фразу, то в мы уже можем написать пару предложений или небольшой параграф. В наборе инструментов для веб-мастеров Google есть удобный инструмент для анализа контента, который поможет вам подсказкой, если ваши метатеги слишком длинны/коротки или слишком часто повторяются (та же функция доступна для тегов ). Так же как и тег , метатег размещается внутри тега html-страницы.

    Значение метатега для оптимизации поиска

    Метатеги описания важны потому, что Google может использовать их при создании сниппетов к вашему сайту . Заметьте, мы говорим “может”, потому что Google может выбрать для сниппета другой подходящий текст с вашего сайта, если он более релевантен запросу пользователя. Так же Google может использовать описание вашего сайта из проекта Open Directory, если ваш сайт в него включен.

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

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

    ПРАКТИЧЕСКИЕ СОВЕТЫ

    Кратко и точно опишите содержание страницы

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

    • вставлять в тег описание, не соответствующее содержимому страницы;
    • использовать общие слова в описании, например “это моя страница” или “страница про открытки”;
    • наполнять тег ключевыми словами;
    • вставлять в тег полный текст страницы.

    Создайте уникальное описание для каждой страницы

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

    HTML-теги — основа языка HTML. Теги используются для разграничения начала и конца элементов в разметке.

    Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя тега.

    Все HTML-элементы делятся на пять типов:

    • пустые элементы — , ,
      , , , , , ,
      Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке может быть несколько тегов , так как в зависимости от используемых атрибутов они несут разную информацию. Индикатор измерения в заданном диапазоне. Раздел документа, содержащий навигационные ссылки по сайту. Определяет секцию, не поддерживающую сценарий (скрипт). Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег . Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная. Контейнер с заголовком для группы элементов . Определяет вариант/опцию для выбора в раскрывающемся списке , или . Поле для вывода результата вычисления, рассчитанного с помощью скрипта.

      Параграфы в тексте. Определяет параметры для плагинов, встраиваемых с помощью элемента . Элемент-контейнер, содержащий один элемент и ноль или несколько элементов . Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение. Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д. Индикатор выполнения задачи любого рода. Определяет краткую цитату. Контейнер для Восточно-Азиатских символов и их расшифровки. Определяет вложенный в него текст как базовый компонент аннотации. Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе , выводится уменьшенным шрифтом. Отмечает вложенный в него текст как дополнительную аннотацию. Выводит альтернативный текст в случае если браузер не поддерживает элемент . Отображает текст, не являющийся актуальным, перечеркнутым. Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом. Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src . Определяет логическую область (раздел) страницы, обычно с заголовком. Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в . Отображает текст шрифтом меньшего размера. Указывает местоположение и тип альтернативных медиаресурсов для элементов , , . Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов. Расставляет акценты в тексте, выделяя полужирным. Подключает встраиваемые таблицы стилей. Задает подстрочное написание символов, например, индекса элемента в химических формулах. Создаёт видимый заголовок для тега . Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка. Задает надстрочное написание символов.

      Таблица-шпаргалка с тегами

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

      Тег для создания таблицы.
      Определяет тело таблицы.
      Создает ячейку таблицы.
      Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом.
      Создает большие поля для ввода текста.
      Определяет нижний колонтитул таблицы.
      Создает заголовок ячейки таблицы.
      Определяет заголовок таблицы.
      Определяет дату/время.
      Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
      Создает строку таблицы.
      Добавляет субтитры для элементов и .
      Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
      Создает маркированный список.
      Выделяет переменные из программ, отображая их курсивом.
      Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
      Указывает браузеру возможное место разрыва длинной строки.