Содержание

что это и как применять

Положительная репутация в поисковых системах без помех от недоброжелателей возможна с Семантикой!

Узнайте стоимость

Получи нашу книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подпишись на рассылку и получи книгу в подарок!

Html-теги для текста – это теги, которые меняют оформление заключенного в них контента.

Эта идея пришла из печатных издательств. Редакторы на полях помечали, что является заголовком, как оформить список.

Так же и теги. Они указывают, какой стиль должен быть у элемента.

Теги и элементы

Каждый тег имеет вид:

<Название тега>

Элемент – это совокупность тега и его содержимого. Многие из них требуют закрывающего тега:

</Название тега>

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

д.
Примеры элементов:

  • <h2>Header</h2>
  • <div>Блок</div>
  • <i>курсив</i>

Некоторые элементы не требуют закрытия

  • <img src=”1.jpg”>
  • <hr>

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

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

Парадигма оформления современных сайтов

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

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

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

Валидация страницы

При продвижении сайта важную роль играет его валидность: «правильность» кода и соответствие его стандартам. Так как в настоящее время распространены два стандарта HTML – 4 и 5, то используются различные виды объявления типа документа:

  1. Strict. Не включает теги font, фреймы и пр. Это «строгий» набор правил для верстки на HTML 4.<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
  2. Transitional. Используется для сайтов, которые были написаны до появления новых стандартов. Разрешены устаревшие теги. <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
  3. HTML. Поддержка последнего стандарта.<!DOCTYPE HTML>

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

Проверить валидность сайта можно на официальном сайте W3C – организации, где создаются стандарты.

Теги форматирования текста html

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

Рассмотрим все элементы, которые позволяют оформить текстовую часть сайта.

  • <b>— Жирное выделение.
  • <basefont>— Установка цвета и шрифта по умолчанию для страницы. Не рекомендуется к использованию.
  • <big> — Увеличивает размер шрифта на одну условную единицу. Всего их семь. Стандартный не оформленный символ имеет размер 3. Вложение тегов будет увеличить на дополнительную единицу на каждом уровне. В CSS аналогом является свойство font-size.
  • <cite> — Логическая метка текста как цитаты или сноски. Символы оформляются курсивом, но это можно изменить в таблице стилей.

 

  • <code> — Вывод символов, которые помечаются как программный код. Оформляется моноширинным текстом уменьшенного размера (все символы имеют одинаковую ширину).
  • <dfn>— Необходимо заключать в этот тег первое упоминание термина в статье. Отображается курсивом во всех браузерах.
  •   <em>— Используется для привлечения внимания к фрагменту контента. Выделяется курсивом. Аналог CSS font-style.
  • <font> — Самый запрещенный тег для текста в современной разметке. Браузеры его еще поддерживают, так как многие встроенные редакторы используют его для указания размера и шрифта.
    Но при ручной верстке не рекомендуем применять такой способ форматирования. Лучше пользоваться свойствами CSS font-size и color – аналоги написания<font size=”Размер”color=”Цвет”>.
  • <h2>-<h6>— Логическое выделение структуры заголовков контента. Текст между открывающим и закрывающим тегами помечается жирным и имеет нестандартный размер. Главный заголовок h2 имеет самый большой шрифт, h6 — самый маленький.
  • <i> — Курсив. Не осуждается последним стандартом, но рекомендуется использовать font-style.
  • <kbd>— Обозначает моноширинным шрифтом имитацию напечатанного на клавиатуре текста.
  • <mark>— Логическое выделение контента. Дополнительно Chrome и FireFox подсвечивают его желтым фоном.
  • <p> — Абзац. Контент, помеченный этим тегом начинается с новой строки. Между ними ставится отступ. Не требует закрывающего тега, новый абзац начинается при появлении любого блочного элемента.
  • <pre>— Используется для оформления текста так, как он был указан при верстке. По умолчанию в HTML любое количество подряд идущих пробелов трансформируются в один, а обычные переносы не учитываются. Элемент pre учитывает положение символов.>
  • <q> — Выделение цитат, текст отображается в кавычках.
  • <samp>— Отображает символы как на результат выполнения программы на экран. Используется моноширинный шрифт.
  • <small>— Выполняет действия, обратные элементу big, уменьшая размер символов на условную единицу.
  • <strike> — Зачеркивает текст. Аналог сокращенного элемента. Не рекомендуется использовать. Аналог CSS text-decoration со значением line-through.
  • <strong>— Жирное начертание. Логически акцентирует текст.
  • <sub>— Показывает символ в нижнем индексе. Размещается ниже стандартной базовой линии, на которой располагаются символы, и имеет уменьшенный размер. В CSS используется vertical-align.
  • <sup>— Показывает символ в верхнем индексе. Размещается выше базовой линии стандартного текста и имеет уменьшенный размер. В CSS используется vertical-align.
  •  <sup>— Используется для подчеркивания текста. В HTML 5 запрещен, используется свойство CSS text-decoration со значением underline.
  •  <var> — При выводе кода компьютерной программы все переменные заключаются в этот тег. Выделяет их курсивом.
  • <xmp> — Показывает текст так, как он записан в коде страницы. Аналогично pre.

Специальные символы

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

Также в HTML 5 появились деньги, карточные масти и знаки гороскопа.

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

В дальнейшем такой подход поможет сэкономить время на изменении дизайна, а также повысить шансы на попадание в ТОП поисковых систем.

HTML – Фразовые теги для текста

Фразовые теги для текста были выделены для определенных целей, хотя они отображаются аналогично другим базовым тегам типа <b>, <i>, <pre> и <tt>, которые Вы видели в предыдущей главе. В этом уроке мы рассмотрим все важные в HTML теги для текста, поэтому давайте начнем.

Наклонный текст

Все, что расположено в теге <em>…</em>, отображается как наклонный текст. С помощью тега наклонного текста в HTML выделяют текст, на котором хотят акцентрировать внимание читателя.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример наклонного текста в HTML</title>
  </head>
  <body>
    <p>В следующем слове <em>применяется</em> наклонный шрифт. </p>
  </body>
</html>

Получим следующий результат:

Выделенный текст

Все, что расположено в теге <mark>…</mark>, выделяется желтым фоном. С помощью этого тега можно в HTML выделить текст, который нуждается во внимании читателя.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример выделенного текста в HTML</title>
  </head>
  <body>
    <p>Следующее слово <mark>выделено</mark> желтым фоном.</p>
  </body>
</html>

Получим следующий результат:

Жирный текст

Все, что расположено в теге <strong>…</strong>, отображается жирным текстом. С помощью этого тега можно в HTML выделить текст жирным шрифтом, тем самым указав на важные слова в тексте.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример жирного текста в HTML</title>
  </head>
  <body>
    <p>Следующее слово <strong>выделено</strong> жирным шрифтом. </p>
  </body>
</html>

Получим следующий результат:

Текст аббревиатура

Вы можете создавать аббревиатуры с помощью тега <abbr>…</abbr>, помещая в его текст. Если присутствует атрибут title, то он должен содержать полное описание и ничего больше.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример аббревиатуры в HTML</title>
  </head>
  <body>
    <p>Вы изучаете <abbr title = "HyperText Markup Language">HTML</abbr>.</p>
  </body>
</html>

Получим следующий результат:

Элемент сокращения

Элемент <acronym> позволяет указать, что текст заключенный между тегами <acronym>…</acronym>, является сокращением (аббревиатурой).

В настоящее время основные браузеры не меняют внешний вид содержимого элемента <acronym>.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример сокращения в HTML</title>
  </head>
  <body>
    <p>Вы изучаете <acronym>HTML</acronym>.</p>
  </body>
</html>

Получим следующий результат:

Направление текста

Тег <bdo> – используется для переопределения текущего направления текста и имеет двунаправленное переопределение. В предыдущем уроке мы рассматривали похожий атрибут dir, который позволяет указать браузеру направление потока текста.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример направления текста в HTML</title>
  </head>
  <body>
    <p>Текст слево направо.</p>
    <p><bdo dir = "rtl">Текст справа налево.</bdo></p>
  </body>
</html>

Получим следующий результат:

Специальные условия

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

Как правило, Вы должны использовать элемент <dfn> при первом вводе ключевого слова. Последние версии браузеров отображают содержимое элемента <dfn> курсивом.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример специального условия в HTML</title>
  </head>
  <body>
    <p>Следующее слово <dfn>специальное</dfn> условие.</p>
  </body>
</html>

Получим следующий результат:

Цитата в тексте

Если Вы хотите процитировать отрывок из другого источника, то должны поместить его между тегами <blockquote>…</blockquote>.

Текст внутри тега цитаты <blockquote> обычно имеет отступы от левого и правого краев окружающего текста и иногда использует курсивный шрифт.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример оформления цитаты в HTML</title>
  </head>
  <body>
    <p>Ниже представлен текст цитаты:</p>
    <blockquote>Этот текст заключен в тег цитаты. </blockquote>
  </body>
</html>

Получим следующий результат:

Короткие цитаты или двойный кавычки в HTML

Тег цитаты <q>…</q> используется, когда Вы хотите добавить в HTML двойную кавычку в предложение.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример двойных кавычек в HTML</title>
  </head>
  <body>
    <p>Следующий текст <q>помещен в двойные кавычки</q>.</p>
  </body>
</html>

Получим следующий результат:

Цитирование в HTML

Если Вы цитируете текст, то можете указать источник, размещающий его между открывающим тегом <cite> и закрывающим тегом </cite>.

Как правило, в публикации для печати содержимое тега цитирования <cite> отображается по-умолчанию курсивом.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример цитирования в HTML</title>
  </head>
  <body>
    <p>Следующий текст <cite>будет процитирован</cite>. </p>
  </body>
</html>

Получим следующий результат:

Программный код

Любой код программирования, который Вы хотите отобразить на веб-странице, должен быть помещен внутри тегов <code>…</code>. Обычно содержимое тега <code> представлено в моноширинном шрифте, как и программный код в большинстве книг по программированию.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример программного кода в HTML</title>
  </head>
  <body>
    <p>Узнайте программный код: <code>h2, h3, h4 { font-size: 20px; } </code>.</p>
  </body>
</html>

Получим следующий результат:

Клавиатурный текст

Когда Вы пишите о компьютерах и хотите сообщить читателю, что нужно нажать какую-либо клавишу, то можете использовать элемент <kbd>…</kbd>, чтобы указать, что следует нажать или вводить. Как правило, отображается моноширинным шрифтом.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример клавиатурного текста в HTML</title>
  </head>
  <body>
    <p>Нажмите сочетание клавиш <kbd>CTRL+F5</kbd>, чтобы обновить веб-страницу и очистить кеш.</p>
  </body>
</html>

Получим следующий результат:

Переменные программирования

Тег <var> указывает, что содержимое этого элемента является переменной, часто используется вместе с элементами <pre> и <code>.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример переменных в HTML</title>
  </head>
  <body>
    <p><code>document.write("<var>name</var>")</code></p>
  </body>
</html>

Получим следующий результат:

Результат программы

Тег <samp>. ..</samp> указывает, что содержимое этого элемента является результатом выполнения программы, приложения, скрипта и т.д. Опять же, он используется при оформлении программирования или кодирования.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример результата программы в HTML</title>
  </head>
  <body>
    <p>В результате программа выведит на экран сообщение <samp>Hello World!</samp></p>
  </body>
</html>

Получим следующий результат:

Текст адреса

Тег <address>…</address> используется для размещения адреса.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример текста адреса в HTML</title>
  </head>
  <body>
    <address>141411, г.Москва, ул.Пахучкина, д.8</address>
  </body>
</html>

Получим следующий результат:

Источник: HTML — Formatting.

Как отображать теги HTML в виде обычного текста в HTML · Практический совет для разработчиков

Вы можете отображать теги HTML как обычный текст в формате HTML на веб-сайте или веб-странице, заменив < на <  или &60;  и >   с  > или &62; для каждого тега HTML , который вы хотите видеть.

Обычно теги HTML не видны читателю в браузере. Они есть, но вы их не видите.

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

Пример
Итак, если вы хотите отобразить:

Это абзац

в браузере, вы пишете его как: <p> Это параграф </p> .

Как показать теги HTML: объекты HTML

В языке HTML есть несколько специальных символов; они являются зарезервированным персонажем. зарезервированных символа в HTML — это < , > , ” и ”. Браузер никогда не отобразит их, так как они имеют какое-то значение в HTML.

Объекты HTML — это фрагменты текста, используемые для отображения зарезервированных символов , невидимых символов (например, пробела) и других символов, не являющихся клавишными.

Объекты начинаются с «&», за которым следует «имя объекта» или «номер объекта» и заканчиваются знаком «;», т.е. &имя сущности; или &номер объекта;

Зарезервированные символы в HTML
Список объектов HTML

Просмотрите полные списки объектов HTML.

  1. Полный список объектов HTML с их номерами и именами.
  2. Справочная таблица персонажей.
  3. Список сущностей HTML

Как быстро заменить множество

< и > быстро

Самый быстрый способ заменить множество знаков <(меньше) и >(больше) — использовать онлайн-конвертер HTML-тегов в сущности. Вы копируете и вставляете свой HTML-код, конвертируете его и копируете полученный текст.

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

Чтобы использовать эту функцию, используйте «CTRL + H» или нажмите «НАЙТИ» в строке меню, а затем нажмите «Заменить». Добавьте символ, который вы хотите заменить, в поле поиска и объект, который вы хотите заменить, в поле замены.

Затем нажмите заменить или заменить все.

Надеюсь, теперь вы сможете отображать свой HTML-код в веб-браузере.

Как сохранить форматирование кода и отступы

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

 pre html).
 <пред>
  Здесь находится ваш HTML-код.
      И может быть отступ.

 тега HTML.
 Пример.
 Могу ли я использовать HTML-тег 
  </code>?</h3><p> Да.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/present5.com/presentation/169824899_175066761/image-27.jpg' /><noscript><img loading='lazy' src='/800/600/https/present5.com/presentation/169824899_175066761/image-27.jpg' /></noscript> Ранее тег HTML <code> <plaintext> </code> использовался для отображения тегов HTML на веб-странице.</p><p> Однако HTML-тег с открытым текстом устарел, начиная с HTML версии 2. Это означает, что он был удален из официального языка HTML и может не работать должным образом. Мой совет: не используйте HTML-тег <code> <plaintext> </code>.</p><h3><span class="ez-toc-section" id="_HTML_PHP"> Как отображать теги HTML в виде текста в PHP? </span></h3><p> Если вы хотите использовать PHP для отображения тегов HTML в виде текста, вы можете использовать функцию <code> <code>htmlspecialchars()</code> </code> для экранирования символов < и >.</p><pre> htmlspecialchars('<strong>Это показывает теги HTML</strong>')
 </pre><p> А теперь иди туда и поделись кодом. Если у вас есть какие-либо вопросы по HTML, задайте их в комментариях ниже.</p><p> Всем привет! Я <b> Авик Ндугу </b>.</p><p> Я опубликовал более 100 сообщений в блогах по HTML, CSS, Javascript, React и другим связанным темам. Когда я не пишу, я люблю читать, ходить в походы и слушать подкасты.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/cf3.ppt-online.org/files3/slide/l/Lg6YSFlUuX3ybNkHoJTQIar5hiPW8edVK40fZj/slide-12.jpg' /><noscript><img loading='lazy' src='/800/600/https/cf3.ppt-online.org/files3/slide/l/Lg6YSFlUuX3ybNkHoJTQIar5hiPW8edVK40fZj/slide-12.jpg' /></noscript></p><h5><span class="ez-toc-section" id="i-36"> Информационный бюллетень для разработчиков переднего плана </span></h5><p> Получайте ежемесячный информационный бюллетень Frontend Web Development. <br/> Никакого спама, легко отписаться в любое время.</p><h2><span class="ez-toc-section" id="seo_-_html"> seo - Лучшая практика для текста в html </span></h2><p> спросил <time itemprop="dateCreated" datetime="2011-08-02T15:55:31"> 11 лет, 9 месяцев назад </time></p><p> Изменено
 11 лет, 9 месяцев назад</p><p> Просмотрено
 9k раз</p><p> Какой тег html используется для текста, который не является ни заголовком <code><h2></h2> </code>, ни абзацем <code><p> </code> ? Тег <code><pre> </code> не подходит, потому что мне нужно стилизовать текст с помощью CSS. (Таким образом, текст в основном представляет собой неважную фразу.) </p> <p> Пример 1:
Цена за продукт: $5 </p> <p> Пример 2:
Добавить в корзину </p> <p> Что лучше всего (или стандартно) поступить в этой ситуации? Можно ли разместить текст внутри <code> <aside> </code> тег без предварительного окружения тегом <code>  <h2> </h2> </code> или <code> <p> </code> ? </p> <ul> <li> HTML </li> <li> SEO </li> </ul> 




            1
     </p> <p> Я думаю, что тег span должен быть правильным для этого.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/schtirlitz.ru/800/600/http/prezentacii.org/upload/cloud/18/11/97306/images/screen9.jpg' /><noscript><img loading='lazy' src='/800/600/https/schtirlitz.ru/800/600/http/prezentacii.org/upload/cloud/18/11/97306/images/screen9.jpg' /></noscript>  </p> <p> Из спецификации </p> <blockquote>
   <p> Элементы DIV и SPAN в сочетании с идентификатором и классом
  атрибуты, предлагают общий механизм для добавления структуры к
  документы. Эти элементы определяют содержимое как встроенное (SPAN) или
  блочный уровень (DIV), но не налагает никаких других презентационных идиом на
  содержание. Таким образом, авторы могут использовать эти элементы вместе с
  таблицы стилей, атрибут lang и т. д., чтобы адаптировать HTML к своим собственным
  потребности и вкусы. </p>
  
   <p> Предположим, например, что мы хотим сгенерировать HTML-документ
  на основе базы данных клиентов. Поскольку HTML не включает
  элементы, идентифицирующие такие объекты, как «клиент», «номер телефона»,
  "адрес электронной почты" и т. д., мы используем DIV и SPAN для достижения желаемого
  структурные и презентационные эффекты. </p>
 </blockquote> <p> <strong> Пример 1: </strong> Если вы чувствуете семантику, вы можете написать это так: </p> <pre> <dl>
    <dt>Цена за продукт:</dt>
    <dd>$5</dd>
    <dt>Товары в наличии:</dt>
    <dd>12</dd>
</dl>
 </pre><p> В противном случае можно использовать тег span.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/myslide.ru/documents_3/6f3ba35196ebb750e620840618b6c974/img22.jpg' /><noscript><img loading='lazy' src='/800/600/https/myslide.ru/documents_3/6f3ba35196ebb750e620840618b6c974/img22.jpg' /></noscript></p><hr/><p> <strong> Пример 2: </strong> Используйте <code> <a /> </code> или <code> <button /> </code></p><p> Вы можете посмотреть на тег <code> span </code>, универсальный встроенный тег, который отлично подходит для селекторов DOM, JS/CS С и общая организация. Хотя, как бы то ни было, теги от <code> h2 </code> до <code> h4 </code> постоянно используются для незаголовков, и никто особо не возражает.</p><p> Редактировать: Кроме, оказывается, людей с программами чтения с экрана. В конце концов, может быть хорошей идеей не использовать заголовки таким образом.</p> 2</p><p> Попробуйте использовать теги, описывающие текст. Если у вас есть абзац текста, используйте <code><p> </code> . Если у вас есть предложение, используйте <code><blockquote> </code> .</p><p> См. здесь список тегов и их описание.</p> 1</p><p> Вы можете использовать <code> <span> </code> .
К вашему сведению, вы можете стилизовать <code> <pre> </code> с помощью css.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/fuzeservers.ru/wp-content/uploads/2/c/c/2cc7151136a6cbaf503a66ec9e295d8f.jpeg' /><noscript><img loading='lazy' src='/800/600/https/fuzeservers.ru/wp-content/uploads/2/c/c/2cc7151136a6cbaf503a66ec9e295d8f.jpeg' /></noscript><div class='yarpp-related yarpp-related-none'><p>No related posts.</p></div></div></div><div class="post-sharrre group"><div id="twitter" data-url="https://ylianova.ru/html/tegi-v-html-dlya-teksta-tekst-htmlbook-ru.html" data-text="Теги в html для текста: Текст | htmlbook.ru" data-title="Tweet"></div><div id="facebook" data-url="https://ylianova.ru/html/tegi-v-html-dlya-teksta-tekst-htmlbook-ru.html" data-text="Теги в html для текста: Текст | htmlbook.ru" data-title="Like"></div><div id="googleplus" data-url="https://ylianova.ru/html/tegi-v-html-dlya-teksta-tekst-htmlbook-ru.html" data-text="Теги в html для текста: Текст | htmlbook.ru" data-title="+1"></div><div id="pinterest" data-url="https://ylianova.ru/html/tegi-v-html-dlya-teksta-tekst-htmlbook-ru.html" data-text="Теги в html для текста: Текст | htmlbook.ru" data-title="Pin It"></div></div></div></article><ul class="post-nav group"><li class="next"><a href="https://ylianova.ru/raznoe-2/uchitsya-programmirovaniyu-kak-nauchitsya-programmirovat-skillbox-media.html" rel="next"><i class="fa fa-chevron-right"></i><strong>Вперед</strong> <span>Учиться программированию: Как научиться программировать / Skillbox Media</span></a></li><li class="previous"><a href="https://ylianova.ru/raznoe-2/veb-dizajn-s-chego-nachat-s-chego-nachat-izuchenie-web-dizajna-kak-nauchitsya-dizajnu-2.html" rel="prev"><i class="fa fa-chevron-left"></i><strong>Назад</strong> <span>Веб дизайн с чего начать: С чего начать изучение Web-дизайна, как научиться дизайну</span></a></li></ul><section id="comments" class="themeform"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/html/tegi-v-html-dlya-teksta-tekst-htmlbook-ru.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://ylianova.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required="required" /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required="required" /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='39352' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></section></div></section><div class="sidebar s1"> <a class="sidebar-toggle" title="Развернуть боковую панель"><i class="fa icon-sidebar-toggle"></i></a><div class="sidebar-content"><div id="search-2" class="widget widget_search"><form method="get" class="searchform themeform" action="https://ylianova.ru/"><div> <input type="text" class="search" name="s" onblur="if(this.value=='')this.value='Введите поисковую фразу';" onfocus="if(this.value=='Введите поисковую фразу')this.value='';" value="Введите поисковую фразу" /></div></form></div><div id="nav_menu-2" class="widget widget_nav_menu"><h3>Рубрики</h3><div class="menu-2-container"><ul id="menu-2" class="menu"><li id="menu-item-5370" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5370"><a href="https://ylianova.ru/category/css">Css</a></li><li id="menu-item-5371" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-5371"><a href="https://ylianova.ru/category/html">Html</a></li><li id="menu-item-5372" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5372"><a href="https://ylianova.ru/category/http">Http</a></li><li id="menu-item-5373" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5373"><a href="https://ylianova.ru/category/javascript">Javascript</a></li><li id="menu-item-5374" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5374"><a href="https://ylianova.ru/category/photoshop">Photoshop</a></li><li id="menu-item-5375" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5375"><a href="https://ylianova.ru/category/verstka">Верстка</a></li><li id="menu-item-5376" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5376"><a href="https://ylianova.ru/category/raznoe">Вопросы и ответы</a></li><li id="menu-item-5377" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5377"><a href="https://ylianova.ru/category/maket">Макет</a></li><li id="menu-item-5378" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5378"><a href="https://ylianova.ru/category/sajt">Развитие сайтов</a></li><li id="menu-item-5380" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5380"><a href="https://ylianova.ru/category/sajt-2">Сайт</a></li><li id="menu-item-5381" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5381"><a href="https://ylianova.ru/category/shablon-2">Шаблон</a></li><li id="menu-item-5382" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5382"><a href="https://ylianova.ru/category/shrift-2">Шрифт</a></li><li id="menu-item-5379" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5379"><a href="https://ylianova.ru/category/raznoe-2">Разное</a></li></ul></div></div><div id="categories-3" class="widget widget_categories"><h3>Рубрики</h3><ul><li class="cat-item cat-item-5"><a href="https://ylianova.ru/category/css">Css</a></li><li class="cat-item cat-item-4"><a href="https://ylianova.ru/category/html">Html</a></li><li class="cat-item cat-item-9"><a href="https://ylianova.ru/category/http">Http</a></li><li class="cat-item cat-item-10"><a href="https://ylianova.ru/category/javascript">Javascript</a></li><li class="cat-item cat-item-20"><a href="https://ylianova.ru/category/linux">Linux</a></li><li class="cat-item cat-item-11"><a href="https://ylianova.ru/category/photoshop">Photoshop</a></li><li class="cat-item cat-item-19"><a href="https://ylianova.ru/category/adaptiv">Адаптив</a></li><li class="cat-item cat-item-17"><a href="https://ylianova.ru/category/verstka">Верстка</a></li><li class="cat-item cat-item-3"><a href="https://ylianova.ru/category/raznoe">Вопросы и ответы</a></li><li class="cat-item cat-item-16"><a href="https://ylianova.ru/category/maket">Макет</a></li><li class="cat-item cat-item-6"><a href="https://ylianova.ru/category/sajt">Развитие сайтов</a></li><li class="cat-item cat-item-13"><a href="https://ylianova.ru/category/raznoe-2">Разное</a></li><li class="cat-item cat-item-12"><a href="https://ylianova.ru/category/sajt-2">Сайт</a></li><li class="cat-item cat-item-1"><a href="https://ylianova.ru/category/sovety">Советы</a></li><li class="cat-item cat-item-15"><a href="https://ylianova.ru/category/shablon-2">Шаблон</a></li><li class="cat-item cat-item-7"><a href="https://ylianova.ru/category/shablon">Шаблоны</a></li><li class="cat-item cat-item-14"><a href="https://ylianova.ru/category/shrift-2">Шрифт</a></li><li class="cat-item cat-item-8"><a href="https://ylianova.ru/category/shrift">Шрифты</a></li></ul></div></div></div></div></div><footer id="footer"><section id="footer-bottom"><div class="container"> <a id="back-to-top" href="#"><i class="fa fa-angle-up"></i></a><div class="pad group"><div class="grid one-half"><div id="copyright"><p>Блог сумасшедшего сисадмина &copy; 2024. Все права защищены.</p></div><div id="credit"><p><a href="/sitemap.xml" class="c_sitemap">Карта сайта</a></p></div></div><div class="grid one-half last"></div></div></div></section></footer></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://ylianova.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!--[if lt IE 9]> <script src="https://ylianova.ru/wp-content/themes/anew/js/ie/respond.js"></script> <![endif]--> <script defer src="https://ylianova.ru/wp-content/cache/autoptimize/js/autoptimize_0ff0db9327031255fca2759bf963a86c.js"></script></body></html><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="3cd29e1f9d1a604653011d8e-|49" defer></script>