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

  Автор:
  11 комментариев
  8353

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

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

В этой статье я расскажу про несколько очень редких 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) 9944447
skype: mlmproekt.ru

Этот тег больше нужен для поисковиков, поскольку наши посетители не заменят разницы, оформлен адрес в тег 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:
Надежный проверенный годами хостинг для сайта на WordPress
а также, хостинг Beget:
Хостинг Beget

 

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

   5 голосов
Средняя оценка: 5 из 5
Если Вам понравилась статья и Вы нашли её полезной, поделитесь ею в соцсетях! Нажмите на кнопки ниже, чтобы сделать это прямо сейчас.

Анфиса Бреус

Анфиса Бреус - специалист по Wordpress с 2007 года. Создатель и разработчик шаблона "AB-Inspiration" для самостоятельной и профессиональной настройки сайтов на WordPress для бизнеса. Основатель клуба "Мастер WordPress" и автор эксклюзивных курсов по WordPress. Фрилансер. Спикер.

Оставьте свой комментарий:

Комментарии на Блог
11 комментариев
  1. Анфиса, благодарю за полезности.

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

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

  3. Нина Ермоленко

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

  4. Сергей

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

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

  6. Саша

    вместо   тег лучше использовать, иначе головной боли добавите вашему верстальщику/программисту

  7. Анфиса, благодарю за статью. Я тоже имею несколько сайтов и люблю экспериментировать с HTML. Например текстовые эффекты какие-нибудь, вроде вдавленного текста или текст с тенью. Все это очень интересно. Раньше думала, что это картинки с фотошопа, потом поняла что все это делается при помощи HTML кода и CSS cтиля.
    С ув. Екатерина
    Автор проекта «Империя Успеха»
    http://imperiauspeha.ru

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

  9. Спасибо, Анфиса, как всегда очень полезная статья.
    А я и не знал, что такие теги в HTML существуют.
    Теперь буду применять на практике! =)

  10. Елена Черных

    Доброго времени суток!
    Анфиса, благодарю за полезную информацию. Узнала для себя несколько новых тегов.
    Больше всего мне нравиться тег . Обычно использую встроенный редактор. И достаточно часто тег . А так не хватает встроенной кнопки выравнивание текста в редакторе…

    С уважением, Елена Черных.

  11. Наталья Мащенко

    Здравствуйте Анфиса!
    Очень интересная и познавательная статья!
    Мне всегда было интересно, как создаются «красивые» страницы в интернете.
    И в вашей статье я об этом узнала. Буду применять на практике.
    Спасибо за статью!
    Желаю Успехов!
    Наталья Мащенко.

Ваш адрес email не будет опубликован. Обязательные поля помечены *