Обычный текст в html: Текст | htmlbook.ru

Форматирование текста | htmlbook.ru

Форматирование текста — средства его изменения, такие как выбор начертания
шрифта и использование эффектов, позволяющих менять вид текста. В табл. 1
перечислены основные теги, которые применяются для изменения оформления текста.

Табл. 1. Теги для форматирования текста
Код HTMLОписаниеПример
<b>Текст</b>Жирное начертание текстаТекст
<i>Текст</i>Курсивное начертание текстаТекст
<sup>Текст</sup>Верхний индексe=mc2
<sub>Текст</sub>Нижний индексH2O
<pre>Текст</pre>Текст пишется как есть, включая все пробелы
Текст
<em>Текст</em>Курсивный текстТекст
<strong>Текст</strong>Жирное начертание текстаТекст

Любые теги форматирования текста можно использовать совместно друг
с другом. Чтобы сделать текст одновременно жирным и курсивным шрифтом
используется сочетание тегов <b> и <i>
(пример 1). Их порядок в данном случае не важен.

Пример 1. Жирный курсивный текст

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Текст</title>
 </head>
 <body>   
   <p>Он словно вырезан из <b>камня</b>, стоек и неподвижен в отличие от его противников. 
   <i>Дух и жизненная сила</i> в нём достигла <b><i>совершенства</i></b>. 
   Но вот беда — никто не смеет принять его вызов.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид курсивного жирного начертания текста

Использование тегов <sup> и <sub>
сдвигает текст относительно базовой линии и уменьшает размер шрифта (пример 2).

Пример 2. Создание нижнего индекса

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Текст</title>
 </head>
 <body> 
  <p><b>Формула изумруда:</b>
  <i>Be<sub>3</sub>Al<sub>2</sub>(SiO<sub>3</sub>)<sub>6</sub></i></p>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Нижний индекс в тексте

Теги <strong> и <em>
выполняют те же функции, что теги <b> и <i>,
но написание последних короче, привычней и удобней.

Следует отметить, что теги <b> и <strong>, также
как <i> и <em> являются не совсем эквивалентными
и заменяемыми. Первый тег <b> — является тегом физической
разметки и устанавливает жирный текст, а тег <strong> —
тегом логической разметки и определяет важность помеченного текста. Такое разделение
тегов на логическое и физическое форматирование изначально предназначалось,
чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода
информации. Теоретически, если воспользоваться, например, речевым браузером,
то текст, оформленный с помощью тегов <b> и <strong>,
будет отмечен по-разному. Однако получилось так, что в популярных браузерах
результат использования этих тегов равнозначен.

текст

HTML по теме

  • Тег <b>
  • Тег <em>
  • Тег <i>
  • Тег <strong>
  • Тег <sub>
  • Тег <sup>

Статьи по теме

  • Форматирование текста

Как сделать текст в HTML (топ 10 запросов)

Чем отличается написание текста в обычном текстовом редакторе, от написания в HTML? В текстовом редакторе, форматирование текста происходит в интерфейсе программы. Для HTML страницы – текст форматируется, при помощи тегов.


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




Хорошего Вам дня!

Текст, всегда заключают, между тегами, например, внутри абзаца.




<p>Пожелайте мне удачи!</p>

Мы собрали список, наиболее частых запросов, связанных с текстом, от начинающих изучать HTML.


Как сделать текст в центре

По умолчанию, текст, прилипает к левому краю. Свойство text-align, внутри тега div, выравнивает текст по центру.




<div>Поставьте меня в центр</div> // HTML

div {

    text-align: center; // CSS

}




Как сделать текст справа




<div>Хочу стоять справа</div> // HTML

div {

    text-align: right; // CSS

}




Как сделать отступ текста

За отступы текста отвечают свойства – margin и padding. Margin отделяет абзацы друг от друга, а padding создает воздушное пространство, внутри абзаца. Отступы измеряют в абсолютных единицах измерения — пикселях или в относительных — %, em, rem.




<p>Отодвинься от меня</p> // HTML

p {

    margin: 20px; // CSS

    padding: 10px;

}




Как сделать текст жирным

Через тег b, можно вставлять прямо в разметку. Этот способ предпочтительнее для SEO-оптимизации.




<p>Хочу быть <b>жирным</b></p> // HTML

или выделять участок тегом span и задавать степень жирности в CSS правилах.




<p>Хочу быть <span>самым жирным</span></p> // HTML

span {

    font-weight: bolder; // CSS

}


или указывать жирность в цифрах.




span {

    font-weight: 700; // в интервале 100 - 900

}



Как сделать ссылку в тексте

Нужный фрагмент текста, заключить в тег a, с указанием URL-адреса.




<p>Вам следует перейти по этой <a href="http://yandex.ru">ссылке</a></p> // внешняя ссылка


<p>У меня тут есть <a href="page_5.html">хорошая статья</a></p> // внутренняя ссылка



Как сделать текст в рамке

Рамка задается не тексту, а блочному тегу, в котором находится этот текст.




<p>Я - важный текст</p> // HTML

p {

    border: 2px solid pink; // толщина, сплошная, цвет

    padding: 15px; // воздух между рамкой и текстом

}




Как сделать текст подчеркнутым

Нужное место, обрамляем тегом u.




<p>Прошу здесь <u>подчеркнуть</u> меня</p> // HTML



Как задать тексту фон

Сделать фон для всего абзаца.




<p>Хочу выделиться фоном</p> // HTML

p {

    background-color: pink; // CSS

}


Если вы хотите задать фон, отдельному фрагменту текста, тогда используйте span.




<p>Нет, только <span>розовый цвет</span></p> // HTML

span {

    background-color: pink; // CSS

}




Как увеличить текст




<p>Посмотрите, какой я большой</p> // HTML

p {

    font-size: 30px; // CSS

}




Как сделать текст курсивом

Через тег i в разметке.




<p>Здесь я прямой, а тут - <i>курсивом</i></p> // HTML

CSS стили + тег




<p><span>Курсивом</span> - я особенный</p> // HTML

span {

    font-style: italic; // CSS

}




Итого

Мы взяли список топовых запросов, связанных с форматированием текста в HTML, от начинающих и коротко ответили на них. Задавайте ваши вопросы в комментариях.

  • Создано 29.07.2019 10:29:18

  • Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

HTML-тег — GeeksforGeeks

Улучшить статью

Сохранить статью

  • Уровень сложности:
    Средний
  • Последнее обновление:
    24 фев, 2022
  • Читать
  • Обсудить
  • Улучшить статью

    Сохранить статью

    HTML (язык гипертекстовой разметки) используется для разработки веб-страниц с использованием языка разметки. Это комбинация гипертекста и языка разметки. HTML использует различные типы тегов для создания веб-страниц и Тег

    </strong> — один из них. Тег <plaintext> используется для отображения всего текста в документе в том виде, в котором он был первоначально введен. Другими словами, этот тег игнорирует все форматирование и отображает весь текст, находящийся под этим тегом, включая теги и теги документа. Этот тег нельзя отключить и нельзя остановить. Все, что ниже тега <plaintext>, показано ниже как есть, у него нет закрывающего тега или можно сказать, что это пустой тег.</p><p> <strong> Примечание: </strong> Этот тег устарел, начиная с HTML2, и его не рекомендуется использовать. Вместо этого вы можете использовать тег</p> <pre> или тег <code> в качестве лучшей альтернативы для этого.</p><p> <strong> Syntax: </strong></p><blockquote> <plaintext></blockquote><p> <strong> Example 1: </strong></p><h3><span class="ez-toc-section" id="HTML"></span> HTML <span class="ez-toc-section-end"></span></h3><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><p data-readability-styled="true"> <code> <!DOCTYPE html> </code></p><p data-readability-styled="true"> <code> < </code> <code> html </code> <code> > </code></p><p data-readability-styled="true"> <code> </code> <code> < </code> <code> head </code> <code> > </code></p><p data-readability-styled="true"> <code>      </code> <code> < </code> <code> title </code> <code> >Page Title</ </code> <code> title </code> <code> > </code></p><p data-readability-styled="true"> <code>      </code> <code> </ </code> <code> head </code> <code> > </code></p><p data-readability-styled="true"> <code> < </code> <code> Body </code> <code>> </code></p><p data-readability-styled="true"> <code> </code> <code> <</code> <code> H3 </code> <code>> Добро пожаловать в GFG </ </code> <code> H3 </code> <code>> </code></p><p data-readability-styled="true"> <code> </code> </code>> </code></p><p data-readability-styled="true"> <code> </code> </code>> </code></p><p data-readability-styled="true"> <code> </code> </code>0049 <</code> <code> Plaintext </code> <code>> </code></p><p data-readability-styled="true"> <code> </code> <code> Это онлайн -платформа обучения </code></p><p data-readability-styled="true"> <code> </ </code> <code> </code> <code>> </code> 9003</p><p data-readability-styled="true"> <code> </ </code> <code> <code>> </code></p><p data-readability-styled="true"> <code> </ </code> <code> <code>> </code> 9003</p><p data-readability-styled="true"> <code> </ </code> <code> HTM> </code> 9003</p><p data-readability-styled="true"> <code> </ </code> <code> HTM> </code> 9003</p><p data-readability-styled="true"> <code> </ </code> <code>> </code> 9003</p><p data-readability-styled="true"> <code>.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/info-line.net/wp-content/gallery/html_5/6.png' /><noscript><img loading='lazy' src='/800/600/http/info-line.net/wp-content/gallery/html_5/6.png' /></noscript></p><p> <strong> Вывод: </strong></p></p><p> Здесь мы видим, что после тега открытого текста все, что находится под ним, отображается совершенно просто, без какого-либо редактирования, а также может игнорироваться внешний CSS, если он применяется к файлу HTML.</p><p> <strong> Example 2: </strong></p><h3><span class="ez-toc-section" id="HTML-2"></span> HTML <span class="ez-toc-section-end"></span></h3><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><p data-readability-styled="true"> <code> <!DOCTYPE html> </code></p><p data-readability-styled="true"> <code> < </code> <code> html </code> <code> > </code></p><p data-readability-styled="true"> <code>      </code> <code> < </code> <code> head </code> <code> > </code></p><p data-readability-styled="true"> <code> </code> <code> < </code> <code> title </code> <code> >Page Title</ </code> <code> title </code> <code> > </code></p><p data-readability-styled="true"> <code>      </code> <code> </</p><p> <code> head ></p><p>0</p><p data-readability-styled="true"> <code> < </code> <code> body </code> <code> > </code></p><p data-readability-styled="true"> <code>      </code> <code> < </code> <code> h3 </code> <code> >Welcome To GFG</ </code> <code> h3 </code> <code> > </code></p><p data-readability-styled="true"> <code>      </code> <code> < </code> <code> plaintext </code> <code> > </code></p><p data-readability-styled="true"> <code>          </code> <code> Это платформа для онлайн-обучения </code></p><p data-readability-styled="true"> <code>          </code> <code> < </code> <code> b </code> <code> >GeeksforGeeks</<tbody>0</p><tbody>0 <code> > </code></p><p data-readability-styled="true"> <code> </ </code> <code> body </code> <code> > </code></p><p data-readability-styled="true"> <code> </ </code> <code> html </code> <code> > </code></p></td></tr></tbody></table><p> <strong> Output: </strong></p></p><p></p><p> Related Articles</p><p> What's New</p><p> Мы используем файлы cookie, чтобы обеспечить вам максимальное удобство просмотра нашего веб-сайта.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/kapitanus.ru/wp-content/uploads/2019/02/%D0%9F%D0%BB%D0%B0%D0%BD%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5.png' /><noscript><img loading='lazy' src='/800/600/http/kapitanus.ru/wp-content/uploads/2019/02/%D0%9F%D0%BB%D0%B0%D0%BD%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5.png' /></noscript> Используя наш сайт, вы<br /> подтверждаете, что вы прочитали и поняли наши<br /> <u> Политика в отношении файлов cookie </u> &<br /> <u> Политика конфиденциальности </u></p><h2><span class="ez-toc-section" id="_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82_Plain_Text_%D1%83%D1%81%D1%82%D0%B0%D1%80%D0%B5%D0%B2%D1%88%D0%B8%D0%B9_-_HTML_%D1%8F%D0%B7%D1%8B%D0%BA_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%BE%D0%B2%D0%BE%D0%B9_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%82%D0%BA%D0%B8"></span> : элемент Plain Text (устаревший) — HTML: язык гипертекстовой разметки <span class="ez-toc-section-end"></span></h2><p> <strong> устаревший: </strong> Эта функция больше не рекомендуется. Хотя некоторые браузеры могут по-прежнему поддерживать его, возможно, он уже удален из соответствующих веб-стандартов, может находиться в процессе исключения или может быть сохранен только в целях совместимости. Избегайте его использования и обновляйте существующий код, если это возможно; см. таблицу совместимости внизу этой страницы, чтобы принять решение. Имейте в виду, что эта функция может перестать работать в любой момент.</p><p> HTML-элемент <strong> <code> <plaintext> </code> </strong> отображает все, что следует за начальным тегом, как необработанный текст, игнорируя любой последующий HTML. Закрывающий тег отсутствует, так как все после него считается необработанным текстом.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/wikihow.com/images/1/11/Use-Font-Color-Tags-in-HTML-Step-5-Version-2.jpg' /><noscript><img loading='lazy' src='/800/600/http/wikihow.com/images/1/11/Use-Font-Color-Tags-in-HTML-Step-5-Version-2.jpg' /></noscript></p><p> <strong> Предупреждение: </strong> Не используйте этот элемент.</p><ul><li> <code> <plaintext> </code> устарел, начиная с HTML 2, и не все браузеры реализовали его. Браузеры, которые реализовали это, не делали этого последовательно.</li><li> <code> <открытый текст> </code> устарел; браузеры, которые принимают его, могут вместо этого рассматривать его как элемент <code> <pre> </code>, который все еще интерпретирует HTML внутри.</li><li> Если <code> <plaintext> </code> является первым элементом на странице (кроме любых неотображаемых элементов, таких как <code><head> </code> ), вообще не используйте HTML. Вместо этого используйте текстовый файл с MIME-типом <code> text/plain </code>.</li><li> Вместо <code> <plaintext> </code> используйте элемент <code> <pre> </code> или, если он семантически точен (например, для встроенного текста), элемент <code> <код> </code> элемент. Экранируйте любые символы <code> < </code> , <code> > </code> и <code> и </code>, чтобы браузеры непреднамеренно анализировали содержимое элемента как HTML.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fuzeservers.ru/wp-content/uploads/a/f/7/af7daff1a5f0206c6931df07faa4b9ce.jpeg' /><noscript><img loading='lazy' src='/800/600/http/fuzeservers.ru/wp-content/uploads/a/f/7/af7daff1a5f0206c6931df07faa4b9ce.jpeg' /></noscript></p><div class="clear"></div><p class="inner-meta">This entry was posted in <a href="https://consei.ru/category/populyarnoe" rel="category tag">Популярное</a></p></div><div class="post comments" id="comments"></div></div></div></div><div id="sidebar" class="profile"><ul><li class="widget png_scale" id="widget_categories"><h2 class="blocktitle"><span>Рубрики</span></h2><ul><li class="cat-item cat-item-23"><a href="https://consei.ru/category/adsense">Adsense</a> (3)</li><li class="cat-item cat-item-20"><a href="https://consei.ru/category/chrome">Chrome</a> (2)</li><li class="cat-item cat-item-19"><a href="https://consei.ru/category/direkt">Директ</a> (86)</li><li class="cat-item cat-item-18"><a href="https://consei.ru/category/dorvei">Дорвеи</a> (39)</li><li class="cat-item cat-item-15"><a href="https://consei.ru/category/klyuchevye-slova">Ключевые слова</a> (238)</li><li class="cat-item cat-item-14"><a href="https://consei.ru/category/lendingi">Лендинги</a> (78)</li><li class="cat-item cat-item-12"><a href="https://consei.ru/category/populyarnoe">Популярное</a> (12&nbsp;235)</li><li class="cat-item cat-item-17"><a href="https://consei.ru/category/prodvizhenie">Продвижение</a> (498)</li><li class="cat-item cat-item-22"><a href="https://consei.ru/category/rsya">Рся</a> (6)</li><li class="cat-item cat-item-13"><a href="https://consei.ru/category/semanticheskoe-yadro">Семантическое ядро</a> (366)</li><li class="cat-item cat-item-21"><a href="https://consei.ru/category/spam">Спам</a> (10)</li><li class="cat-item cat-item-16"><a href="https://consei.ru/category/ssylochnoe">Ссылочное</a> (73)</li><li class="cat-item cat-item-11"><a href="https://consei.ru/category/ticz">Тиц</a> (381)</li></ul></li></ul></div><div class="clear"></div></div><div class="clear"></div></div><div id="footer"><div class="wrapper" style="margin: auto;"><p style="margin-left: 50px; padding-top: 10px;"></p><div style="margin-left: 50px; padding-bottom: 10px; border-bottom: 1px solid #444;"><ul class="clearfix"><li style="padding-right: 8px; height: 32px; padding-left: 43px; margin: 17px 0 0 0; float: left; background-image: ; background-repeat: no-repeat;">Подписаться на RSS <br><span>100+ Подписчиков</span></li><li style="padding-right: 8px; height: 32px; padding-left: 43px; margin: 17px 0 0 0; float: left; background-image: ; background-repeat: no-repeat;">Услуги и реклама<span><br>Я свободен</span></li><li style="padding-right: 8px; height: 32px; padding-left: 43px; margin: 17px 0 0 0; float: left; background-image: ; background-repeat: no-repeat;">Контакты <span><br>Скажи мне привет!</span></li></ul></div><p></p> <br><p style="margin-left: 50px; padding-top: 10px;"></p><p style="margin-left: 50px; color: #ffffff;">© Копирование моих статей приветствуется, если вы поставите ссылку на мой блог будет просто математично!</p><div class="clear"></div></div></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://consei.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!-- noptimize --> <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> <!-- /noptimize --> <script defer src="https://consei.ru/wp-content/cache/autoptimize/js/autoptimize_5f36542f4fdd420adbdaa5616b406138.js"></script></body></html>