Нестандартные теги


Содержание
Илон Маск рекомендует:  Кс языки и грамматики

Теги HTML по типу

HTML 5

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

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

Тег — вставка аудиоролика в web-страницу.

Тег — создание bitmap изображения при помощи JavaScript.

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

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

Тег — размещение на странице информации, которую можно показать или скрыть.

Тег — контейнер для некоторого объектов (звуковых файлов, видеофайлов и т.д.).

Тег — собственное содержимое ( фотографии, иллюстрации, диаграммы и др.).

Тег — нижний колонтитул для web-страницы.

Тег — группирование заголовков веб-страницы или раздела.

Тег — генерация пары ключей для форм — закрытого и открытого.

Тег — помечает текст в документе как выделенный.

Тег — создание логически связанных списков.

Тег — вывод на экран данных в ранжированной области.

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

— вывод на экран оценки выполнения работы.

Тег — вывод текста в браузерах, которые не поддерживают тег .

Тег — аннотация сверху или снизу от текста, заключенного в контейнер .

Тег — аннотация сверху или снизу от заданного текста.

Тег — выводит на экран данные, формируя их в разделы.

Тег — видимый заголовок для элемента .

Тег — вставка на Web-страницу видеоролика.

Блочные элементы.

Тег — данные создателей web-страницы.

Тег — центрирование текста на странице.

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

Тег — построение форм заполняемых непосредственно пользователем.

Тег — конструкции для ведения диалога с пользователем.

Тег — создание логически связанных списков.

— разделение текста на абзацы.

— текст, заранее отформатированный.

Тег — создание маркированного (ненумерованного) списка.

Строчные элементы

Тег — символы, набранные в тексте, являются аббревиатурой.

Тег — сокращение, применяемое как самостоятельное слово.

Тег — написание текста жирным шрифтом.

Тег — базовый (основной для всей страницы) размер шрифта.

Тег — направление текста (справа налево или слева направо).

Тег — увеличение размер шрифта текста.

Тег
— принудительный переход на новую строку (перевод строки).

Тег — форматирование цитат и ссылок.

Тег — вывод фрагментов программ и форматирования текста программы.

Тег — выделение одинаковых по назначению (или смыслу) фрагментов текста.

Тег — тип, размер и цвет шрифта текста.

Тег — текст курсивным начертанием.

Тег — различные части формы, такие как флажки, переключатели, поля ввода.

Тег — выделение текста, который пользователь должен ввести с клавиатуры.

Тег — контейнер для других элементов формы.

Тег — выделение цитаты внутри абзаца или строки.

Тег — вывод текста зачеркнутым.

Тег — выделение диалога пользователя с компьютером.

Тег — уменьшение размера шрифта на единицу.

Тег — выделение фрагмента текста для его последующего форматирования.

Тег — зачеркнутое начертание текста.

Тег — выделение текста жирным начертанием.

Тег — создание эффекта нижнего индекса.

— создания на форме многострочных текстовых полей.

Тег — выделение переменной или параметра программы.

Универсальные элементы

Тег — помещение в web-страницу апплетов — программ, написанных на языке Java.

Тег — создаёт кнопки так же, как и элемент INPUT.

Тег — выделение текста, который был удалён.

Тег — выделение текста, который был добавлен в новый документ.

Илон Маск рекомендует:  Что такое код gmp_neg

Тег — размещение в HTML-документе встроенного объекта.

Нестандартные теги

Тег — размещение информации на странице в несколько колонок (столбцов).

Тег — текст в одной строке (без разрыва).

Тег — отображение на web-странице информации.

— создание текста с конструкциями HTML.

Тег — выделить (зарезервировать) на странице пустое пространство заданного размера.

Осуждаемые теги

Тег — помещение в web-страницу апплетов — программ, написанных на языке Java.

Тег — базовый (основной для всей страницы) размер шрифта.

Тег — центрирование текста на странице.

Тег — определение списка каталогов.

Тег — тип, размер и цвет шрифта текста.

Тег — конструкции для ведения диалога с пользователем.

Тег — вывод листинга программ или кода.

Тег — вывод текста зачеркнутым.

Тег — зачеркнутое начертание текста.

Тег — вывод текста на страницу «как есть».

Видео

Тег — текстовая дорожка для медийных элементов и .

Тег — вставка на Web-страницу видеоролика.

Документ

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

Тег — версия языка HTML и разновидность данной версии.

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

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

Тег — заключает в себе гипертекст, который определяет собственно Web-страницу.

Тег — нижний колонтитул для web-страницы.

Тег — формирование общей структуры документа.

Тег — документ, написанный на языке html.

Тег — связь между web-страницей и внешним документом.

Тег — дополнительная информация о веб-странице.

Тег — выводит на экран данные, формируя их в разделы.

Тег — определение стилей элементов веб-страницы.

Тег — вставка аудиоролика в web-страницу.

Тег — текстовая дорожка для медийных элементов и .

Изображения

Тег — активные области изображения, являющиеся ссылками.

Тег — создание bitmap изображения при помощи JavaScript.

Тег — ссылка на графический файл.

Объекты

Тег — помещение в web-страницу апплетов — программ, написанных на языке Java.

Тег — контейнер для некоторых объектов (звуковых файлов, видеофайлов и т.д.).

Тег — отображение на web-странице информации.

Тег — размещение в HTML-документе встроенного объекта.

WebComplex – самостоятельное создание сайтов

Все о самостоятельном создании сайта

10 не популярных, но полезных тегов html

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

Каждый тег ниже входит как в HTML 4.01, так и в нашумевший HTML5.

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

2. Теги таблиц – , ,

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

служит для обозначения заголовка таблицы.

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

содержит основную информацию в вашей таблице.

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

4. Заголовки

Конечно, заголoвками пользуются все. Но вспомните, когда вы использовали заголовок

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

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

Если вам нужно обратить внимание на предложение, либо вы просто создаете банальный блок цитат,

Это то, что Nettuts + используется для его цитаты стиля.

Нестандартные теги

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

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

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

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

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

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

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

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

Нестандартные теги

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

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

Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

Разработка веб-сайтов с помощью онлайн платформы Wrike

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

Почему WordPress лучше чем Joomla ?

Этот урок скорее всего будет психологическим, т.к. многие люди работают с WordPress и одновременно с Joomla, но не могут решится каким CMS пользоваться.

Про шаблоны WordPress

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

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Самые первые настройки после установки движка WordPress

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

10 стратегий эффективного продвижения статей в блогах на WordPress

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

HTML5

Добро пожаловать на сайт html-5.ru, посвящённому языку разметки HTML5. Здесь вы можете более подробно ознакомиться с новыми тегами и технологиями появившимися в HTML5.

Новые теги HTML5

Какие теги добавили в язык HTML5?

В язык HTML5 добавили множество новых тегов:

— теги семантически описывающие структуру страницы,
— теги описывающие новые технологии,
— теги обогащающие язык HTML.

Семантическое описание структуры страницы в HTML5

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

Семантика HTML5 на уровне структуры страницы

Рассмотрим список новых тегов HTML5, отвечающих за семантическое разделение структуры страницы:

— теги обрамляющие элементы дизайна верхней части сайта, так называемая «шапка страницы». Также теги header можно использовать как верхнюю часть тега section .

— теги обрамляющие основное меню на сайте.

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

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

Естественно, всё это пока находится лишь на уровне рекомендаций, и вы можете вставлять данные теги куда угодно, используя их вместо тегов

Семантика HTML5 на уровне текста

Рассмотрим список новых тегов HTML5, отвечающих за семантическое разделение текста страницы:

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

— теги предназначены для создания дат и/или времени в формате
ISO вида: YYYY-MM-DDThh:mm:ss , такой формат понятен компьютерным программам. Теги time могут обрамлять дату или текст, если тег обрамляет текст, то в него добавляют атрибут datetime , значением которого выступает дата и/или время в формате ISO.

— теги предназначены для хранения информации, которая либо скрыта, либо отображена (работает наподобие спойлера) .

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

Дополнительные теги языка HTML5

Список новых тегов HTML5, обогощающих язык:

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

— теги предназначены для вывода динамического индикатора шкалы (например шкалы загрузки файла), при котором результат измерения меняется в реальном времени.

— тег должен находиться между тегами menu , используется при создании сценариев на JavaScript.

— между этими тегами помещают тег command .

— теги предназначены для вывода работы скрипта.

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

— теги обрамляют описание какого-либо объекта (например изображения) , находятся между тегами figure . .

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

— теги предназначены для группировки заголовков h*

— тег используется для генерации открытых/закрытых пар ключей, шифрования/расшифровки данных, создания/проверки цифровой подписи.

— теги обрамляют текст и аннотацию к нему.

— теги находятся между тегами ruby , предназначены для обрамления аннотации.

— теги предназначены для браузеров которые не поддерживают теги ruby .

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

Теги HTML5 описывающие новые технологии

В HTML5 появилась возможность использования множества технологий и API, которые являются частью языка HTML5, а не сторонними плагинами, вот некоторые из них:

— теги предназначены для воспроизведения видеофайлов, без использования сторонних программ (плагинов, расширений) .

— тег предназначен для указания пути к аудио/видео файлам, находится внутри тегов audio и video .

— теги предназначены для создания специальной области на сайте, в которой можно создавать векторные фигуры и с помощью языка программирования JavaScript, манипулировать ими. Canvas в будущем, должен заменить Flash-технологию (угу в теории…).

Статистика HTML-синтаксиса: какие теги самые популярные

Компания Google провела масштабное статистическое исследование различных аспектов HTML-синтаксиса на выборке из более чем 1 млрд. веб-страниц (code.google.com/webstats/index.html).

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

Согласно статистике Google Web Authoring Stats, средняя веб-страница в Сети содержит 19 элементов разного типа.

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

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

, .

После «href» и «target» самым популярным атрибутом является «border» для изображений и таблиц, затем «height» и «width» для изображений и различные параметры разметки таблиц.

Для элемента самыми популярными атрибутами являются «xmlns», «lang», «xml:lang» и «dir».

Анализ веб-страниц показывает, что очень часто в синтаксисе HTML встречаются ошибки. Это и бессмысленные, и странные атрибуты. Например, многие авторы включают в код страницы совершенно бессмысленный атрибут «revisit-after» для , вероятно, чтобы дать указание роботу поисковой системы. Но ни одна крупная поисковая система не поддерживает эту команду.

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

. Еще один интересный факт: в интернете огромное количество страниц, в которых упоминается элемент

и
, но отсутствует элемент
. То есть имеется таблица, но отсутствуют ячейки.

Интересна статистика по редакторам, загрязняющим HTML-код своими нестандартными тегами. Повсеместно в интернете встречаются следы GoLive — это огромное количество тегов

, а также , и .


Конечно, GoLive не одинок. Например, в Сети чаще встречается нестандартный тег из Microsoft Office, чем стандартный

. Кроме того, много элементов , и (следы Claris Homepage), а также «отпечатков» ставшего популярным в последнее время пакета для создания интернет-магазинов британской компании Actinic — это , , и . Здесь же и Macromedia со своими и , а также NetObjects Fusion, источник атрибутов .

Сбор данных проходил в декабре 2005 г. Для просмотра аналитического отчета в онлайне требуется браузер с поддержкой SVG и CSS, чтобы корректно отображать графики. Лучше всего использовать Firefox 1.5.

Как создать заголовок и мета-теги, которые понравятся поисковику? (Часть 1)

В этой статье я пошагово объясню, как создать заголовок и мета-теги, оптимизированные под поисковые машины. Статья состоит из двух частей. В первой мы познакомимся с элементом Title (заголовок).

Элемент TITLE (заголовок)

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

В html-коде страницы тег TITLE выглядят примерно так:

[TITLE]Цветочный магазин в Майами – прекрасные цветочные композиции на заказ.[/TITLE]

(Стоит отметить, что вместо квадратных скобок [] в html-коде страницы следует использовать стандартные <>).

Чтобы увидеть html-код любого сайта, выберите в панели браузера «Вид –> Исходный код» или щелкните в любом месте страницы правой кнопкой мыши и выберите «Показать исходный код».

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

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

В html-коде страницы пример мета-тега Description будет выглядеть так:

[META name=”description” content=”Цветочный магазин в Майами изготовит прекрасные букеты, украшения, цветочные композиции на любой случай, включая свадьбы, День Святого Валентина, вечеринки и корпоративные мероприятия. Доставка по Флориде”. ]

Увидеть содержимое мета-тега Description можно, открыв исходный код страницы.

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

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

[META name=”keywords” content=”цветы, розы, свадебные букеты, флористы, цветочные украшения, цветочные выставки, доставка цветов, подарки на День Святого Валентина, День Матери, корпоративные праздники, вечеринки, Майами, Флорида”]

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

Мета-тег Keywords можно увидеть тажкже при просмотре html-кода страницы.

Создание собственных оптимизированных тегов

Теперь настало время заняться оптимизацией TITLE и мета-тегов для вашего собственного сайта. Начнем с тега TITLE главной страницы.

Создание тега TITLE

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

Теперь откройте текстовый файл в «Блокноте» или любом другом схожем текстовом редакторе. Допустим, наш исходный заголовок тот, который использован в приведенном выше примере:

[TITLE]Цветочный магазин в Майами – прекрасные цветочные композиции на заказ.[/TITLE]

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

— цветочные магазины Майами
— цветочные магазины Флориды
— свадебные букеты

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

Поэтому первоначальная комбинация слов может выглядеть так:

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

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

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

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

Цветочный магазин в Майами Флорида – свадебные букеты для вас.

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

Фактически полученное предложение покрывает следующий список комбинаций ключевых слов:

— цветочные магазины Майами
— цветочные магазины Флориды
— цветочные магазины в Майами
— цветочные магазины во Флориде
— цветочные магазины в Майами Флорида
— свадебные букеты
— свадебные букеты Майами
— свадебные букеты Флориды

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

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

В нашем случае предположим, что название магазина – «Радуга». Мы можем легко расположить его в нашем заголовке:

[TITLE]Радуга – цветочный магазин в Майами Флорида – свадебные букеты для вас.[/TITLE]

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

Содержимое тега TITLE также используется, когда пользователь заносит сайт в закладки (или избранное), поэтому добавление имени компании в заголовок имеет хорошие перспективы.

Во второй части статьи мы рассмотрим, как создать оптимизированные мета-теги Description и Keywords.

Расширяем возможности HTML за счёт создания собственных тегов

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

Что такое пользовательский HTML тег?

Когда нам нужно сделать текст “жирным”, то мы пользуемся HTML тегом . Если же нужно вывести список, то мы вероятнее всего воспользуемся тандемом

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

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

В идеале, решение должно выглядеть как собственный тег — между знаками <> , который будет понятен браузеру. Как и при работе с обычными HTML тегами у нас должна сохраниться возможность многократного использования тегов. Давайте посмотрим на реальный пример!

Пример #1: Создание HTML тега для Gravatar

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

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

Для создания и тестирования нашего собственного тега нужно выполнить несколько шагов:

  • Создать отдельную папку; назовём её gravatar-custom-tag .
  • Поместить HTML файл под названием index.html в папку gravatar-custom-tag . Тут и будет храниться наш HTML код.
  • Создать JS файл под названием codingdude-gravatar.js в папке gravatar-custom-tag . В нём напишем JavaScript код, обеспечивающий работу нашего тега.

Давайте отредактируем файл index.html и наполним его следующим содержимым:

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

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

Gravatar преобразует email в URL адрес PNG изображения. Преобразование осуществляется путём хеширования почтового адреса через алгоритм MD5. URL адрес Gravatar изображения будет выглядеть так: https://www.gravatar.com/avatar/EMAIL_MD5_HASH.png . Так что первое что нам нужно сделать — получить MD5 хеш. Для этого воспользуемся открытой библиотекой, которую подключим в файле index.html :

Теперь приступим к реализации нашего тега. Первая задача: написать код, который будет идентифицировать наш тег, а вторая — реализовать сам тега. Весь код поместим в файл codingdude-gravatar.js :

В коде можно увидеть функцию customTag() , которая ищет все экземпляры нашего тега (через параметр tagName ) и запускает функционал (через параметр fn ).

Вызов document.createElement(tagName) необходим для таких браузеров как IE, чтобы сообщить о наличии на странице пользовательских тегов. В противном случае свои теги с названием tagName попросту не сработают.

Параметр fn — это функция где будет происходить вся “магия”. В нашем случае fn — вызов функции codingdudeGravatar() . Данная функция в качестве аргумента принимает ссылку на наш тег. Если в нашем теге будет фигурировать атрибут email , то мы прогоним его через функцию md5() из открытой библиотеки. Результат будет использоваться для формирования URL изображения, которое мы вставим в элемент.

В конце происходит вызов функции customTag() с названием нашего тега. Подобная функция может применяться многократно; вам просто нужно реализовать функцию с функционалом.

На этот раз при загрузке файла index.html в браузере мы увидим Gravatar по заданному email-у:

Пример #2: HTML тег круговой диаграммы

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

Теперь давайте реализуем что-то посложнее: круговую диаграмму. Для этого нам понадобится:

  • Создадим папку самого проекта и назовём piechart-custom-tag .
  • Внутри папки piechart-custom-tag создадим HTML файл и назовём его index.html . Тут будет храниться весь HTML код.
  • JavaScript реализацию тега поместим в файл codingdude-piechart.js .

Пользовательские теги зачастую используются как контейнеры с определённым функционалом. В нашем случае тег будет называться и представлять собой контейнер с круговой диаграммой. Если вы пропустили мой урок Как рисовать диаграммы с использованием JavaScript и HTML5 Canvas, то можете взглянуть. Мы воспользуемся уже готовым кодом создания графика и поместим его в наш тег.

Поправим файл codingdude-piechart.js и поместим функции из упомянутого урока:

Теперь отредактируем файл index.html и напишем свой тег на месте которого появится диаграмма:

Ширину и высоту графика мы получим из атрибутов width и height . В атрибуте colors поместим список цветов, которыми будут окрашиваться доли.

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

Отредактируем файл codingdude-piechart.js и после функции графика вставляем следующий код:

Функций customTag() точно такая же как и в Примере #1. Реализация тега помещена в функцию PiechartTag() . В частности данная функция:

  • Создаёт элемент где будет отрисован график. Ширина и высота элемента canvas будет извлечена из атрибутов нашего пользовательского тега.
  • Ищет атрибут colors , преобразует его значение в массив цветов для элементов круговой диаграммы.
  • Последовательно подгружает элементы и помещает их в разметку графика. Текст, указанный в данных элементах будет отображён браузером. Мы этого не хотим, поэтому удалим элементы со страницы после того как извлечём из них значения.
  • В конце вызывает конструктор Piechart() с необходимыми параметрами и выполняет функцию draw() для отрисовки графика.

Если зайти на страницу index.html , то можно увидеть следующий круговой график:

Наша круговая диаграмма выглядит очень даже ничего. Изменение значений атрибутов приведёт к изменению вида графика. Эта же техника применялась для создания Библиотеки графических объектов и HTML графики на CodeCanyon.

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

В завершении

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

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

Нестандартные атрибуты HTML-тегов. Хорошая вещь? Плохо? Твои мысли?

HTML (или, может быть, просто XHTML?) относительно строг, когда речь идет о нестандартных атрибутах на тегах. Если они не являются частью спецификации, то ваш код считается несоответствующим.

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

В качестве альтернативы вы можете сохранить заголовок для всплывающего окна в скрытом элементе, например span:

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

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

Я большой поклонник предлагаемого решения HTML 5 ( data- префиксные атрибуты). Изменить: добавлю, что, вероятно, есть примеры использования пользовательских атрибутов. Например, данные, которые пользовательское приложение будет использовать, которые не имеют аналогов в стандартных атрибутах (например, настройка для обработчиков событий на основе чего-то, что не обязательно может быть выражено в имени класса или id).

Пользовательские атрибуты предоставляют удобный способ переноса дополнительных данных на клиентскую сторону. Dojo Инструментарий делает это регулярно, и он был указан (Развенчание Dojo Мифы о наборе инструментов):

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

Теги HTML по типу

HTML 5

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

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

Тег — вставка аудиоролика в web-страницу.

Тег — создание bitmap изображения при помощи JavaScript.

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

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

Тег — размещение на странице информации, которую можно показать или скрыть.

Тег — контейнер для некоторого объектов (звуковых файлов, видеофайлов и т.д.).

Тег — собственное содержимое ( фотографии, иллюстрации, диаграммы и др.).

Тег — нижний колонтитул для web-страницы.

Тег — группирование заголовков веб-страницы или раздела.

Тег — генерация пары ключей для форм — закрытого и открытого.

Тег — помечает текст в документе как выделенный.

Тег — создание логически связанных списков.

Тег — вывод на экран данных в ранжированной области.

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

— вывод на экран оценки выполнения работы.

Тег — вывод текста в браузерах, которые не поддерживают тег .

Тег — аннотация сверху или снизу от текста, заключенного в контейнер .

Тег — аннотация сверху или снизу от заданного текста.

Тег — выводит на экран данные, формируя их в разделы.

Тег — видимый заголовок для элемента .

Тег — вставка на Web-страницу видеоролика.

Блочные элементы.

Тег — данные создателей web-страницы.

Тег — центрирование текста на странице.

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

Тег — построение форм заполняемых непосредственно пользователем.

Тег — конструкции для ведения диалога с пользователем.

Тег — создание логически связанных списков.

— разделение текста на абзацы.

— текст, заранее отформатированный.

Тег — создание маркированного (ненумерованного) списка.

Строчные элементы

Тег — символы, набранные в тексте, являются аббревиатурой.

Тег — сокращение, применяемое как самостоятельное слово.

Тег — написание текста жирным шрифтом.

Тег — базовый (основной для всей страницы) размер шрифта.

Тег — направление текста (справа налево или слева направо).

Тег — увеличение размер шрифта текста.

Тег
— принудительный переход на новую строку (перевод строки).

Тег — форматирование цитат и ссылок.

Тег — вывод фрагментов программ и форматирования текста программы.

Тег — выделение одинаковых по назначению (или смыслу) фрагментов текста.

Тег — тип, размер и цвет шрифта текста.

Тег — текст курсивным начертанием.

Тег — различные части формы, такие как флажки, переключатели, поля ввода.

Тег — выделение текста, который пользователь должен ввести с клавиатуры.

Тег — контейнер для других элементов формы.

Тег — выделение цитаты внутри абзаца или строки.

Тег — вывод текста зачеркнутым.

Тег — выделение диалога пользователя с компьютером.

Тег — уменьшение размера шрифта на единицу.

Тег — выделение фрагмента текста для его последующего форматирования.

Тег — зачеркнутое начертание текста.

Тег — выделение текста жирным начертанием.

Тег — создание эффекта нижнего индекса.

— создания на форме многострочных текстовых полей.

Тег — выделение переменной или параметра программы.

Универсальные элементы

Тег — помещение в web-страницу апплетов — программ, написанных на языке Java.

Тег — создаёт кнопки так же, как и элемент INPUT.

Тег — выделение текста, который был удалён.

Тег — выделение текста, который был добавлен в новый документ.

Тег — размещение в HTML-документе встроенного объекта.

Нестандартные теги

Тег — размещение информации на странице в несколько колонок (столбцов).

Тег — текст в одной строке (без разрыва).

Тег — отображение на web-странице информации.

— создание текста с конструкциями HTML.

Тег — выделить (зарезервировать) на странице пустое пространство заданного размера.

Осуждаемые теги

Тег — помещение в web-страницу апплетов — программ, написанных на языке Java.

Тег — базовый (основной для всей страницы) размер шрифта.

Тег — центрирование текста на странице.

Тег — определение списка каталогов.

Тег — тип, размер и цвет шрифта текста.

Тег — конструкции для ведения диалога с пользователем.

Тег — вывод листинга программ или кода.

Тег — вывод текста зачеркнутым.

Тег — зачеркнутое начертание текста.

Тег — вывод текста на страницу «как есть».

Видео

Тег — текстовая дорожка для медийных элементов и .

Тег — вставка на Web-страницу видеоролика.

Документ

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

Тег — версия языка HTML и разновидность данной версии.

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

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

Тег — заключает в себе гипертекст, который определяет собственно Web-страницу.

Тег — нижний колонтитул для web-страницы.

Тег — формирование общей структуры документа.

Тег — документ, написанный на языке html.

Тег — связь между web-страницей и внешним документом.

Тег — дополнительная информация о веб-странице.

Тег — выводит на экран данные, формируя их в разделы.

Тег — определение стилей элементов веб-страницы.

Тег — вставка аудиоролика в web-страницу.

Тег — текстовая дорожка для медийных элементов и .

Изображения

Тег — активные области изображения, являющиеся ссылками.

Тег — создание bitmap изображения при помощи JavaScript.

Тег — ссылка на графический файл.

Объекты

Тег — помещение в web-страницу апплетов — программ, написанных на языке Java.

Тег — контейнер для некоторых объектов (звуковых файлов, видеофайлов и т.д.).

Тег — отображение на web-странице информации.

Тег — размещение в HTML-документе встроенного объекта.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL