Необычный тег для html

Как и обещал, дам описание «хитрых» тегов HTML . Тем более, что сам довольно часто их использую.

«Хитрыми» я их обозвал сам. На самом деле это просто редко используемые, но весьма полезные теги HTML . Упреждая вопрос: «а какая разница, если все равно и тот и другой отображаются курсивом?» , отвечу сразу: это справедливо только относительно отображения в браузере. Для поискового робота, они имеют совершенно разную значимость. То же самое справедливо для текстовых и голосовых браузеров.

ABBR

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

По умолчанию, текст заключенный в контейнере подчеркивается пунктирной линией.

ACRONYM

Элемент указывает на то, что текст является акронимом. В отличие от аббревиатуры, акроним — это устоявшееся сокращение, которое применяется как самостоятельное слово.

По умолчанию, текст заключенный в контейнере подчеркивается пунктирной линией.

ADDRESS

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

По умолчанию текст внутри контейнера отображается курсивным начертанием.

BLOCKQUOTE

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

Улучшить водку можно единственным способом — увеличением объёма бутылки. Все остальные выкрутасы — опять же замануха для лохов, умеющих читать.
А. Кочергин

Улучшить водку можно единственным способом -- увеличением объёма бутылки. Все остальные выкрутасы -- опять же замануха для лохов, умеющих читать.
А. Кочергин

CITE

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

Как заметил известный афорист 🙂 Виктор Черномырдин Хуже водки лучше нет .

CODE

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

Браузеры обычно отображают содержимое контейнера как моноширинный текст уменьшенного размера.

Используя конструкцию @store = Store.find(params[:id]) , найдем магазин по его id в базе данных.

DEL

Тег используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны.

Браузеры обычно помечают текст в контейнере как перечеркнутый.

DFN

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

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

— сокращённое написание слова или группы слов.

Аббревиатура -- сокращённое написание слова или группы слов.

INS

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

Браузеры обычно помечают текст в контейнере как подчеркнутый.

KBD

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

Наберите rake db:migrate , чтобы обновить структуру БД

PRE

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

def index 
@store = Store.find(params[:id]) 
# найден магазин по его id в базе данных
end

def index 
@store = Store.find(params[:id]) 
# найден магазин по его id в базе данных
end

Q

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

Огня в ней больше, чем в объятом пламенем доме, а смотреть на нее в десять раз интереснее, чем на пожар. — Глен Кук

Огня в ней больше, чем в объятом пламенем доме, а смотреть на нее в десять раз интереснее, чем на пожар. - Глен Кук

SAMP

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

TT

Контейнер отображает текст моноширинным шрифтом. Этот тег относится к группе тегов физического форматирования.

VAR

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

Переменная @user содержит информацию о пользователе

Переменная @user содержит информацию о пользователе

XMP

Тег отображает содержимое контейнера «как есть» и шрифтом фиксированной ширины. Пока тег не закрыт, все теги внутри него отображаются как обычный текст.

Ссылка на домашнюю страницу блога

8 Комментариев :

Во! Отлично! Спасибо!
Теперь осталось настроить Типинатор на хоткеи и, главное, запомнить, какой соответствует какому тегу. 🙂
Очень, очень полезная инфа — аффтару зачот. 🙂

Спасибо за урок HTML-грамотности 🙂 хотя многие теги редко используются, но в свете данной статьи заставляет взглянуть на них по новому

Allpa, Сергей, спасибо за хорошие отзывы.
Я только что заметил, что вопрос о тегах ABBR и ACRONYM освещен не полностью. Вскоре напишу дополнение.

и насколько такие теги значимы для поисковиков? на что влияют?

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

Хотя в данной области все больше строится на предположениях и здравом смысле. И еще на допущении, что в Гугле и Яндексе работают далеко не идиоты. Уж точно не глупее большинства доморощенных сео-турбо-манимейкеров :).

Весьма интересная статейка, только применимо ли это к вордпресс? Там то для поисковой оптимизации насколько я знаю применяются другие приемы?

Allpa, Сергей, дополнение следующим постом.
Олег, дополняю: по моим наблюдениям, выделенные «техническими» тегами «технические по контексту» запросы с этого блога хорошо выходят в поисковой выдаче.
mentax, «ты не путай теплое с мягким!» © 🙂 Вордпресс – это всего лишь “php-based engine” для блога. Все страницы выводятся в формате гипертекстовой разметки (HTML). К чему, собственно, эти теги и относятся.

Источник

Интересные HTML теги, о которых никто не знает

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

Атрибут tabindex

Этот тег определяет порядок перехода между полями формы по клавише «Tab»:

В этом примере по нажатию клавиши «Tab» мы пропускаем ссылку «Забыли пароль».

Тег

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

А знали ли вы, что этот тегиспользуется очень редко?

Нeразрывный пробел

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

Покупайте лучшую офисную бумагу у компании «Бумага Качество Инвест»!

В данном случае название фирмы перенесется на следующую строку вместе, а не раздельно.

Тег

Тег является «младшим братом» тега . Этот тег определяет текст на странице как ссылку. По-умолчанию, текст внутри этого тега выделяется курсивом, что легко меняется с помощью стилей.

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

Тег

Тег позволяет логически и визуально объединить элементы select-а:

Тег

Тег позволяет дать слову или группе слов всплывающую подсказку. Подсказка из атрибута title всплывает при наведении мыши на слово заключенное в тег :

Футбол очень популярен в мире.

Пример: Футбол очень популярен в мире.

Тег

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

г. Арзамас, ул. Гагарина, д. 47, кв. 54

Теги и

Эти теги позволяют семантически выделить, что было до изменения на сайте и что стало после. Текст, заключенный в тег зачеркивается, а заключенный в — подчеркивается:

Тег

Этот тег нужно(!) использовать во всех формах. С помощью этого тега задаются метки элементам формы. Иными словами, при клике мышью на текст в теге переводится фокус к соответствующему элементу формы, что существенно упрощает навигацию по форме. Например, этот тег просто незаменим в голосовалках:

 А Вы любите спать?
 Да 
 Нет 
 Я люблю есть

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

Тег

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

Тег

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

Атрибут rel

Этот атрибут можно ставить в любые теги (хотя W3C с этим не согласится), что очень полезно при обращении, например, через ява скрипт ко всем тегам с определенным атрибутом:

Тут, например, можно скриптом взять все ссылки с атрибутом rel=»show» и повесить на них функцию по показу большой картинки.

Источник

Необычные HTML-теги, с которыми стоит познакомиться

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Перевод статьи «Unusual HTML tags worth knowing».

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

Упорядочивание и придание смысла странице, а не только ее представлению, это семантический HTML. Элемент

содержит абзац и все знают, как он должен выглядеть.

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

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

: аббревиатуры

Этот элемент используется для указания расшифровки аббревиатур (см. пример ниже). С его помощью вы можете добавить расшифровку аббревиатуры, использованной в тексте (на случай, если читатель с ней не знаком), не загромождая сам текст. Для этого используется атрибут title.

: определения

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

, / или будут при этом считаться определением выделенного слова.

: контактная информация

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

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

: цитирование

Этот элемент используется для указания источника цитаты.

: удаленный текст

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

: многоуровневые заголовки

При помощи этого тега можно сгруппировать заголовки в документе (-). Таким образом подзаголовки не будут создавать отдельные, собственные разделы.

See the Pen example by Christopher Kade (@christopherkade) on CodePen.

Этот элемент был удален из спецификаций HTML5 (W3C), но он по-прежнему есть в WHATWG-версии HTML. Он частично реализован в большинстве браузеров, так что вряд ли исчезнет. Больше информации.

: вставленный текст

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

Заключение

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

Источник