Можно ли использовать свои теги

Содержание статьи

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

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

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

Когда нам нужно сделать текст “жирным”, то мы пользуемся HTML тегом <b>. Если же нужно вывести список, то мы вероятнее всего воспользуемся тандемом <ul> и <li>. Браузеры используют разметку и таблицы стилей CSS, для того чтобы оформить внешний вид страницы, а в некоторых случаях и небольшой функционал.

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

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

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

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

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

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

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

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

<html>
<head>
<script type=»text/javascript» src=»codingdude-gravatar.js»></script>
</head>
<body>
This is my Gravatar picture:
<codingdude-gravatar email=»admin@coding-dude.com»></codingdude-gravatar>
</body>
</html>

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

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

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

<html>
<head>
<script type=»text/javascript» src=»https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.7.0/js/md5.min.js»></script>
<script type=»text/javascript» src=»codingdude-gravatar.js»></script>
</head>
<body>
This is my Gravatar picture: <codingdude-gravatar email=»admin@coding-dude.com» />
</body>
</html>

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

function customTag(tagName,fn){
document.createElement(tagName);
// поиск всех вхождений пользовательского тега в документе
var tagInstances = document.getElementsByTagName(tagName);
// для каждого тега запускаем функцию
for ( var i = 0; i < tagInstances.length; i++) {
fn(tagInstances[i]);
}
}

function codingdudeGravatar(element){
// отрисовка элемента
if (element.attributes.email){
// извлечение почтового адреса из атрибута email
var email = element.attributes.email.value;
var gravatar = «https://www.gravatar.com/avatar/»+md5(email)+».png»;
element.innerHTML = «<img src='»+gravatar+»‘>»;
}
}

customTag(«codingdude-gravatar»,codingdudeGravatar);

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

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

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

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

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

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

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

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

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

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

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

drawLine()
drawArc()
drawPieSlice()
Piechart()

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

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

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

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

// сюда нужно вставить функцию из прошлого урока
// Как рисовать диаграммы с использованием JavaScript и HTML5 Canvas
//…
function customTag(tagName,fn){
document.createElement(tagName);
// поиск всех вхождений пользовательского тега в документе
var tagInstances = document.getElementsByTagName(tagName);
// для каждого тега запускаем функцию
for ( var i = 0; i < tagInstances.length; i++) {
fn(tagInstances[i]);
}
}

function PiechartTag(element){
// add the canvas where to draw the piechart
var canvas = document.createElement(«canvas»);
// get the width and height from the custom tag attributes
canvas.width = element.attributes.width.value;
canvas.height = element.attributes.height.value;
element.appendChild(canvas);

// get the colors for the slices from the custom tag attribute
var colors = element.attributes.colors.value.split(«,»);

// load the chart data from the <codingdude-data> sub-tags
var chartData = {};
var chartDataElements = element.querySelectorAll(«codingdude-data»);
for (var i=0;i<chartDataElements.length;i++){
chartData[chartDataElements[i].attributes.category.value] = parseFloat(chartDataElements[i].textContent);
//remove the data sub-tags
chartDataElements[i].parentNode.removeChild(chartDataElements[i]);
}

// call the draw() function
new Piechart(
{
canvas:canvas,
data:chartData,
colors:colors
}
).draw();
}

customTag(«codingdude-piechart»,PiechartTag);

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

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

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

В завершении

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

Источник

Как правильно писать теги и хештеги на YouTube

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

Фото: pixabay.com

Разница между тегами и хештегами

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

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

Обратите внимание: при запросе по хештегам и по тегам выдача будет разной.

Работа с хештегами YouTube

Правила написания

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

Хештег всегда начинается с #, иначе поисковик не поймёт, с чем имеет дело.
Все слова пишутся слитно, без пробелов и знаков препинания.
Не стоит использовать более трёх слов. Если формулировка слишком длинная, запутаются и пользователи, и поисковики.

Требования к хештегам

Если вы не хотите, чтобы ваше видео заблокировали, не нарушайте рекомендации и запреты YouTube.

Хештеги должны соответствовать теме видео. Запрещается добавлять ложные сочетания, которые могут ввести пользователей в заблуждение.
Оптимальное количество маркеров к одной записи — три, но если этого недостаточно, можно добавить ещё, однако не более 15.
Нельзя применять в качестве хештегов обычные слова или повторяющиеся предложения.
Категорически запрещено использовать оскорбительные, нецензурные или грубые слова и словосочетания, пропагандировать дискриминацию и насилие, выставлять хештеги сексуального характера.

Добавление хештегов

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

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

Порядок добавления будет выглядеть таким образом:

Надо войти в раздел «Творческая студия».

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

3. В открывшемся окне под описанием видео добавляются хештеги.

Работа с тегами Youtube

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

Как добавить теги к видеоролику

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

Как добавить теги к каналу на YouTube

С каналом дело обстоит чуть сложнее. Для начала надо войти в настройки.

После нажатия на «Настройки» откроется окно, в котором следует выбрать «Канал».

Если кликнуть на «Канал», откроется окно, где во вкладке «Основная информация» есть место для ключевых слов. После добавления тегов необходимо нажать кнопку «Сохранить» в правом нижнем углу.

Где брать теги для видео YouTube

Проще всего подобрать теги, используя бесплатный сервис Яндекс Wordstat. Для этого достаточно ввести в поисковую строку слово или словосочетание по теме видео. Вы получите перечень фраз, которые можно использовать в качестве ключевиков. Цифры показывают, как много пользователей вводили этот запрос за последний месяц.

Кроме этого, есть и другие ресурсы, помогающие найти нужные теги. Вот список самых популярных:

VidIQ;
TubeBuddy;
Kparser;
Keyword Tool;
Prozavr.

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

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

Источник

Что такое теги простыми словами: его виды

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

Что такое тег

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

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

Для различных меток статей, записей в блоге или любых других элементов, которые служат для группировки элементов, помеченных одним и тем же тегом.
Для HTML-тегов. Это специальные символы разметки языка HTML, позволяющие формировать содержимое веб-сайтов. Они являются основной составляющей HTML, этим словом код начинается и им же заканчивается, а внутри же тега заключается все содержимое, которое отображается на интернет странице. На практике выглядеть это будет примерно так: <Открывающий_тег>Содержимое.

Что такое тег на телефоне

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

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

Для чего нужны теги

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

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

Что такое теги в ютубе

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

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

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

Мета-теги: что это такое

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

Мета теги находятся в области HTML документа. Вставить или прописать мета теги можно в любом порядке и количестве.

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

Что значит добавить тег

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

Тег – эта суть сообщения. У каждого такого сообщения есть несколько тем. Например, если вы пишете о том, что такое франшиза в бизнесе, рассказываете о том, как правильно вести бизнес с партнерами и о его особенностях, то тегами вашего поста могут быть «#бизнес», «#франшиза», «#бизнес_франшиза».

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

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

Тег h2: что это такое

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

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

Что такое теги в Инстраграме

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

Инстаграм — это активная и развивающаяся социальная сеть, с многомиллионной и разновозрастной аудиторией. В связи с этим одной из бизнес идей 2020 года является ведение бизнеса в инстаграм, поскольку превосходная площадка, подходящая для этого. Благодаря ведению бизнес-аккаунта в инстаграм многие предприниматели:

Увеличили объем продаж;
Осуществили анализ спроса посредством маркетингового исследования;
Разместили таргетированную рекламу;
Сделали компанию и продвигаемый ею бренд гораздо узнаваемой;

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

Источник