Как выделить текст на html-странице. Несколько способов

Актуально на 2025 год

Просмотры: 173

Существует несколько способов выделения текста на HTML-странице. Рассмотрим наиболее популярные из них:

Тег strong — выделяет текст жирным шрифтом и подчеркивает его.
Пример:

<p>Это <strong>выделенный</strong> текст.</p>

1	<p>Это <strong>выделенный</strong> текст.</p>

Это выделенный текст.

Тег em — выделяет текст курсивом и подчеркивает его.
Пример:

<p>Это <em>выделенный</em> текст.</p>

1	<p>Это <em>выделенный</em> текст.</p>

Это выделенный текст.

Тег mark — выделяет текст цветом фона.
Пример:

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

1	<p>Это <mark>выделенный</mark> текст.</p>

Это выделенный текст.

Тег u — подчеркивает текст.
Пример:

<p>Это <u>выделенный</u> текст.</p>

1	<p>Это <u>выделенный</u> текст.</p>

Это выделенный текст.

Тег del — зачеркивает текст.
Пример:

<p>Это <del>выделенный</del> текст.</p>

1	<p>Это <del>выделенный</del> текст.</p>

Это ~~выделенный~~ текст.

Использование CSS — позволяет настроить различные стили для текста, такие как цвет, размер, шрифт и т.д.
Пример:

<p class="highlighted-text">Это выделенный текст.</p>

<style>
.highlighted-text {
  color: red;
  font-size: 20px;
}
</style>

<p class="highlighted-text">Это выделенный текст.</p>

<style>

.highlighted-text {

color: red;

font-size: 20px;

}

</style>

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

Тег sup — позволяет выделить текст как надстрочный элемент.
Пример:

<p>Число π приблизительно равно 3.14<sup>159265</sup></p>

1	<p>Число π приблизительно равно 3.14<sup>159265</sup></p>

Число π приблизительно равно 3.14¹⁵⁹²⁶⁵

Тег sub — позволяет выделить текст как подстрочный элемент.
Пример:

<p>Формула воды: H<sub>2</sub>O</p>

1	<p>Формула воды: H<sub>2</sub>O</p>

Формула воды: H₂O

Тег blockquote — используется для выделения цитат.
Пример:

<blockquote>
  <p>Не все то золото, что блестит.</p>
  <cite>Уильям Шекспир</cite>
</blockquote>

<p>Не все то золото, что блестит.</p>

<cite>Уильям Шекспир</cite>

</blockquote>

Не все то золото, что блестит.

Уильям Шекспир

Тег code — используется для выделения кода.
Пример:

<p>Чтобы вывести текст на экран, используйте команду <code>print()</code>.</p>

1	<p>Чтобы вывести текст на экран, используйте команду <code>print()</code>.</p>

Чтобы вывести текст на экран, используйте команду print()

Тег pre — используется для отображения предварительно форматированного текста.
Пример:

<pre>
  function calculateSum(a, b) {
    return a + b;
  }
  
  console.log(calculateSum(2, 3)); // Output: 5
</pre>

<pre>

function calculateSum(a, b) {

return a + b;

}

console.log(calculateSum(2, 3)); // Output: 5

</pre>

  function calculateSum(a, b) {
    return a + b;
  }
  
  console.log(calculateSum(2, 3)); // Output: 5

function calculateSum(a, b) {

return a + b;

}

console.log(calculateSum(2, 3)); // Output: 5

Тег a — используется для создания ссылок.
Пример:

<p>Перейти на <a href="https://hoboweb.ru">сайт hoboweb.ru</a></p>

1	<p>Перейти на <a href="https://hoboweb.ru">сайт hoboweb.ru</a></p>

Перейти на сайт example.com

Тег h1 — h6 — используются для создания заголовков разных уровней.
Пример:

<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>

<h1>Заголовок первого уровня</h1>

<h2>Заголовок второго уровня</h2>

<h3>Заголовок третьего уровня</h3>

Тег ul — используется для создания ненумерованного списка.
Пример:

<ul>
  <li>Первый пункт</li>
  <li>Второй пункт</li>
  <li>Третий пункт</li>
</ul>

<ul>

<li>Первый пункт</li>

<li>Второй пункт</li>

<li>Третий пункт</li>

</ul>

Тег ol — используется для создания нумерованного списка.
Пример:

<ol>
  <li>Первый пункт</li>
  <li>Второй пункт</li>
  <li>Третий пункт</li>
</ol>

<ol>

<li>Первый пункт</li>

<li>Второй пункт</li>

<li>Третий пункт</li>

</ol>

Тег table — используется для создания таблиц.
Пример:

<table>
  <tr>
    <th>Имя</th>
    <th>Фамилия</th>
  </tr>
  <tr>
    <td>Иван</td>
    <td>Иванов</td>
  </tr>
  <tr>
    <td>Петр</td>
    <td>Петров</td>
  </tr>
</table>