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

  Автор:
  1438

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

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

В этой статье я расскажу про несколько очень редких 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, телефон, скайп.

Пример:

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

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

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

<address>
Анфиса Бреус
email: anfisabreus@gmail.com
тел: +7 (921) 9944444
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 стилей? Вы применяете их в своих статьях или пользуетесь только редактором?

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

   2 голоса
Средняя оценка: 5 из 5
Вы находите данную статью полезной или интересной? Поделитесь ею, пожалуйста, с другими - просто нажмите на кнопки ниже:
Самые Важные Оповещения Блога + Четкий Комплект Ценных Подарков ДЛЯ БЛОГЕРОВ И ФРИЛАНСЕРОВ
Оставьте свой комментарий:
5 комментариев
  1. Анфиса, благодарю за полезности.

    Вот и   использую частенько, а остальные даже не знала!

  2. Спасибо, Анфиса, да нужно иногда зачеркнуть текст. Я даже не знала, что это «тег» и его убрали, но можно всё это сделать вручную. Для меня это «высшая математика», но благодаря Вам всё становится просто и понятно.

  3. Не нашла в визуальном редакторе возможности оформления таблиц (может просто не заметила?). Пришлось применять HTML.
    И еще, если я вставляла видео файл из Ютуба просто в редакторе, то это видео в мобильной версии выходило за видимую область, поэтому устраняла проблему с помощью HTML.
    Очень хочу изучать тему HTML, и CSS стили тоже. И от понимания скриптов тоже бы не отказалась. =)

  4. Спасибо, Анфиса, как всегда очень полезная статья.
    А я не знал как в описании блога добавить дополнительный пробелы.
    Все просто, надо только знать за какую веревочку потянуть:)

  5. Иногда и в самом деле нужен дополнительный пробел или перенос строки, что бы все встало ровно и красиво, да и другие теги могут пригодится. Хорошо, когда знаешь, как это можно сделать. Спасибо, Анфиса!

на Блоге
в Фейсбук
в Вконтакте