teg-span

  • 08.07.2026
  • admin
  • 1минут читать

Тег <SPAN>

Описание

Тег <SPAN> предназначен для определения встроенных элементов документа. В отличие от блочных элементов, таких как <TABLE>, <P> или <DIV>, с помощью тега <SPAN> можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри параграфа (тега <P>) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег <SPAN> и определить для него стиль текста. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить параметр class или id с именем селектора.

Синтаксис

<span>…</span>

Закрывающий тег

Обязателен.

Пример 1. Использование тега <SPAN>

Валидный код<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег SPAN</title>
<style type="text/css">
BODY {
 font-family: Arial, sans-serif; /* Рубленый шрифт */
}
.letter {
 color: red; /* Красный цвет символов */
 font-size: 200%; /* Размер шрифта в процентах */
 font-family: serif; /* Шрифт с засечками */
 position: relative; /* Относительное позиционирование */
 top: 5px; /* Сдвиг сверху */
}
</style>
</head>
<body>

<p><span class="letter">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

<p><span class="letter">U</span>t wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

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

  • BR устанавливает перевод строки в месте, где этот тег встречается.
  • DIV является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого.
  • H1…H6 HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег H1 представляет собой наиболее важный заголовок первого уровня, а тег H6 служит для обозначения заголовка шестого уровня и является наименее значительным.
  • HR рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера.
  • MARQUEE создает бегущую строку на странице. На самом деле содержимое контейнера MARQUEE не ограничивается строками и позволяет перемещать (скролировать) любые элементы веб-страницы — изображения, текст, таблицы, элементы форм и т.д.
  • P Определяет текстовый параграф. Тег P является блочным элементом, перед ним всегда добавляется пустая строка, параграфы текста идущие друг за другом разделяются между собой вертикальным промежутком.
  • PRE определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами.
  • SPAN предназначен для определения встроенных элементов документа.