5 полезных тегов HTML, которые пригодятся для оформления статей

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

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

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

Что такое HTML

Однажды я уже писала статью на тему, что такое HTML и стили. Можно прочитать здесь: Что такое HMTL, стили, и как ими пользоваться в WordPress, с расшифровкой значений.

Зачем вообще изучать HTML?

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

Во-вторых — это затягивает. Начав однажды экспериментировать с HTML и CSS ты просто не можешь остановиться.

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

А теперь приступим к самим тегам.

Тег <abbr> аббревиатура или акроним

Если в тексте вы используете аббревиатуру или акроним, то можете смело использовать тег <abbr>

Пример:

HTML — насчитывает около 120 тегов.

Наведите мышку на аббревиатуру HTML, и через секунду появится всплывающая подсказка, расшифровка. Здорово, правда?

Давайте посмотрим, как это выглядит в коде:

<abbr title="Hypertext Markup Language - Язык гипертекстовой разметки">HTML</abbr> - насчитывает около 120 тегов.

Здесь мы используем тег abbr и атрибут title. В атрибуте title нужно прописать расшифровку. Тег abbr двойной, поэтому не забываем его закрыть в конце аббревиатуры </abbr>

Тег <mark> для подсветки текста

Если вы хотите подсветить текст, как маркером, то тег <mark> легко выделит текст светло-желтым цветом.

Пример:

Это выделенный текст тегом mark

А вот так он выглядит в коде:

Это <mark>выделенный</mark> текст тегом mark

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

Тег <address> для выделения адреса

Этот тег пригодится для страницы Контакты, где мы указываем свое имя, адрес, Email, телефон, скайп.

Пример:

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

Вот так пример будет выглядеть в коде:

<address>
Анфиса Бреус
email: anfisabreus@gmail.com
тел: +7 (921) 9944447
skype: mlmproekt.ru
</address>

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

Тег address двойной. Не забываем закрывать.

Теги <ins> и <del>

Тег <del> зачеркивает текст, тег <ins> подчеркивает.

Раньше тег <del> был включен в редактор, но с какой-то версии wordpress его убрали. Однако мы можем его использовать вручную :).

Пример:

Мила любит ОБОЖАЕТ свою собаку.

Вот так пример будет выглядеть в коде:

Мила <del>любит</del> <ins>ОБОЖАЕТ</ins> свою собаку.

Оба тега двойные.

Тег пробела &nbsp;

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

Иногда форматируя текст нам нужно сделать дополнительный отступ или больше пробелов между словами, для этого используем тег &nbsp;.

Например:

FACEBOOK
  FACEBOOK

В первом примере между значком и словом Facebook один пробел

Во втором примере перед словом Facebook добавлен тег &nbsp;

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

<i class="fa fa-facebook-official"></i> FACEBOOK 
<i class="fa fa-facebook-official"></i> &nbsp; FACEBOOK

Вставьте тег &nbsp; столько раз сколько нужно. Один тег равен одному пробелу. Если нужно несколько пробелов, вставляем несколько тегов подряд.

И еще один тег в виде бонуса. Переноса строки <br />

Редактор WordPress небольшой и достаточно функциональный. Все что нужно в нем есть. Чтобы сделать перенос строки, абзац, достаточно просто нажать на кнопку Enter.

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

На этом все. Какой тег вам понравился больше всего?

Хотите изучать HTML тегов и CSS стилей? Вы применяете их в своих статьях или пользуетесь только редактором?

Создайте сайт с нами — легко и быстро!

С вопросами и за помощью обращайтесь в нашу службу поддержки 24/7

Нужен качественный хостинг для сайта на WordPress?
Рекомендую, проверенные годами, хостинг Timeweb:

а также, хостинг Beget: