Что такое в html span – Теги div и span, контейнеры для стилизации — Разметка текста — HTML Academy — Вебджем.рф

Содержание

Тег | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
3.0+	1.0+	3.0+	1.0+	1.0+	1.0+	1.0+

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

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

Синтаксис

<span>...</span>

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

Обязателен.

Атрибуты

Для этого тега доступны универсальные атрибуты и события.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег SPAN</title>
  <style>
    body { 
     font-family: Arial, sans-serif; /* Рубленый шрифт */ 
    }
    .letter { 
     color: red; /* Красный цвет символов */ 
     font-size: 200%; /* Размер шрифта в процентах */ 
     font-family: serif; /* Шрифт с засечками */ 
     position: relative; /* Относительное позиционирование */ 
     top: 5px; /* Сдвиг сверху */ 
    }
  </style> 
 </head>
 <body>

  <p><span>Р</span>азумные люди приспосабливаются к окружающему миру. 
  Неразумные люди приспосабливают мир к себе. Вот почему прогресс определяется 
  действиями неразумных людей.</p> 
  <p>Бернард Шоу</p>
 
 </body>
</html>

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

Рис. 1. Вид текста, оформленного с помощью тега <span> и стилей

Тег | HTML справочник

HTML теги

Значение и применение

Теги <div> и <span> представляют из себя универсальные пустые контейнеры, которые необходимо заполнить каким-либо содержанием, либо сгруппировать вложенные элементы для их дальнейшей стилизации средствами CSS, и при необходимости динамически манипулировать ими с использованием скриптов, например, на таком языке программирования как Javascript.

Обращаю Ваше внимание на то, что элементы <div> и <span> сами по себе не оказывают никакого влияния на другие элементы страницы.

Тег <div> определяет любой отдельный блок содержимого и предназначен для

деления веб-страницы на фрагменты. Вы можете объединить любой набор логически связанных элементов в единственном блоке <div>.

Этот элемент является блочным и это означает, что его содержимое всегда будет начинаться с новой строки, при этом элемент занимает всю доступную ширину. Не так давно, этот элемент занимал абсолютный топ, посвященный делению страницы на логические составляющие, но с приходом HTML 5 было добавлено достаточно семантических элементов, которые позволяют в некоторых ситуациях заменить тег <div> на более осмысленный.

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

В отличии от блочного элемента <div> тег <span> является строчным и применяется к внутренним (inline) элементам страницы, то есть к словам, фразам, которые находятся в пределах абзаца или небольшого фрагмента текста, оглавления и тому подобное.

Тег <span> вы можете использовать для таких задач как:

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

Поддержка браузерами

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Теги <div> и <span></title>
	</head>
	<body>
		<div style = "color:green">
			<p>Абзацы мы объединили тегом &amplt;div&ampgt;, а это <span style = "color:red">слово</span> мы заключили тегом &amplt;span&ampgt;.</p>
			<p>С помощью встроенной таблицы стилей мы выделили это слово красным цветом, а блок текста получил зеленый цвет.</p>
		</div>
		<div style = "background-color:khaki">
			<p>Обратите внимание, что тег &amplt;div&ampgt; является блочным и это означает, что его содержимое всегда будет начинаться с новой строки, при этом элемент занимает всю доступную ширину.</p>
			<p>Этот блок тоже содержит два абзаца. С помощью встроенной таблицы стилей мы указали для всего блока цвет заднего фона - khaki, а для этога <span style = "background-color:orangered">слова</span> orangeRed (мы заключили его в тег &amplt;span&ampgt;).</p>
		</div>
	</body>
</html>

В этом примере мы:

Блочными элементами <div> создали два блока, содержащие по два абзаца текста внутри (элементы <p>).
Для первого блока с помощью встроенной таблицы стилей мы указали, что все элементы получат цвет текста зеленый, а одно слово, которое мы поместили внутри тега <span> красный.
Для второго блока с помощью встроенной таблицы стилей мы указали, что весь блок получит цвет заднего фона хаки, а одно слово, которое мы поместили внутри тега <span> оранжево-красный.

Результат нашего примера:

Использование тегов разметки в HTML.

Отличия HTML 4.01 от HTML 5

Нет.

Значение CSS по умолчанию

Нет.

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

Атрибуты событий

Элемент поддерживает «атрибуты событий».

HTML теги

| HTML | WebReference

Универсальный строчный элемент <span> (от англ. span — охватывать) предназначен для выделения отдельных строк, символов или других строчных элементов для дальнейшего изменения их оформления с помощью стилей. Например, внутри абзаца (<p>) можно изменить цвет и размер первого слова, если его выделить с помощью элемента <span> и задать для него желаемый стиль.

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

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>SPAN</title>
  <style>
    span { 
     color: red; /* Красный цвет символов */ 
    }
  </style> 
 </head>
 <body>
  <p>Разумные люди приспосабливаются к окружающему миру. 
  Неразумные люди приспосабливают мир к себе. Вот почему прогресс определяется 
  действиями неразумных людей.</p> 
  <p>Автор: <span>Бернард Шоу</span></p>
 </body>
</html>

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

Рис. 1. Вид текста, оформленного с помощью <span> и стилей

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 10.10.2018

Редакторы: Влад Мержевич

| Справочник HTML
Элемент <span> (от англ. «span» ‒ «пролёт, диапазон») является строчным элементом и предназначен для выделения отдельных строк, символов или других строчных элементов для дальнейшего изменения их оформления с помощью стилей, либо для манипулирования ими при помощи Javascript.
Приведем несколько примеров использования тега <span>:
Выделение участка текста определённым цветом, фоном или даже фоновым изображением.

Изменение отдельным словам или фразам размера шрифта, семейства шрифта или типа шрифта.

Создание различных форматирующих стилей для выбранного участка текста.

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

Синтаксис
<span>...</span>
Закрывающий тег
Обязателен.
Атрибуты
Для этого элемента доступны глобальные атрибуты и события.
Стилизация по умолчанию
Нет.
Различия между HTML 4.01 и HTML5
Нет.
Пример использования:
Элемент <span> используется для изменения стилей участка текста:
Пример HTML:
Попробуй сам
<p>Элемент<span>span</span> может применяться для форматирования отдельных слов внутри абзаца</p> <p>Элемент <div>div</div> НЕ может применяться для форматирования отдельных слов внутри абзаца</p>
Спецификации
Поддержка браузерами

Элемент
<span> 3+ 1+ 3.5+ 1+ 1+ 1+
Элемент
<span> 1+ 1+ 6+ 1+
Учебник HTML
Блочные и встроенные элементы
HTML Элементы

— Веб-технологии для разработчиков
HTML-элемент <span> является основным строковым контейнером для фразового контента, который, по существу, ничего не представляет. Он может использоваться для группировки элементов в целях стилизации (использование атрибутов class или id) или потому, что они имеет общие значения атрибутов, например lang. Он должен быть использован только когда нет другого подходящего по семантике элемента.
<span> очень похож на элемент <div>, но <div> является блочным элементом, в то время как <span> является строчным.
The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Атрибуты
К этому элементу применимы только глобальные атрибуты.
Пример 1
HTML
<p><span>Какой-нибудь текст</span></p>
Результат
Пример 2
HTML
<li><span> <a href="portfolio.html" target="_blank">Посмотреть мое портфолио</a> </span></li>
CSS
li span { background: gold; }
Результат
Спецификации
Поддержка браузерами
Update compatibility data on GitHub
Компьютеры Мобильные
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome для Android Firefox для Android Opera для Android Safari on iOS Samsung Internet
span Chrome Полная поддержка Да Edge Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка Да Chrome Android Полная поддержка Да Firefox Android Полная поддержка 4 Opera Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Internet Android Полная поддержка Да
Легенда
Полная поддержка
Полная поддержка
Смотрите также
HTML-элемент <div>
Span и Div
Все в HTML предназначено для того, чтобы придать контенту некое значение. В то время как большинство HTML тегов в полной мере выполняют это предназначение (тег <p> создает параграф, тег <h2> – заголовок и т.д.), тег <span> и тег <div> никакого значения не имеют, что может вызвать некоторые сомнения в необходимости их существования. Однако эти теги используются чрезвычайно активно совместно с технологией CSS.
Они используются для того, чтобы группировать области HTML кода и затем подключать к этой группе определенные стили CSS. Это осуществляется при помощи атрибутов class и id, ассоциирующих данные элементы с селекторами класса или идентификатора CSS.
Разница между тегом <span> и тегом <div> заключается в том, что элемент <span> является строчным и обычно используется для группирования небольших областей строчного HTML кода, а элемент <div> является блоковым (что, грубо говоря, выражается в наличие перевода строки до и после этого элемента) и используется для группирования более крупных областей кода.
<div> <p>Это <span>здорово</span></p> </div>
Элементы <div> и особенно <span> не должны использоваться слишком часто. Если есть разумная альтернатива, то всегда следует использовать именно ее. Например, если вам нужно выделить слово «здорово» и шрифт в классе «paper» определен как жирный, то этот код может выглядеть следующим образом:
<div> <p>Это <strong>здорово</strong></p> </div>
Если вы еще ничего не знаете о классах и идентификаторах, то не переживайте, все это описано в учебнике «CSS начального уровня». Все что вы сейчас должны запомнить, это то, что элементы <span> и <div> – теги «без значений».
seodon.ru | Теги HTML — Тег SPAN
Опубликовано: 25.06.2010 Последняя правка: 10.12.2015
Тег <SPAN> используется как контейнер стиля (CSS) для применения стилевых свойств к группе элементов уровня строки (inline) или к одному элементу. В отличие от многих тегов HTML, <SPAN>, по умолчанию не добавляет своему содержимому каких-либо полей (margin) или внутренних отступов (padding), если только его свойства не изменены при помощи CSS.
Атрибуты
Личные атрибуты: нет.
Общие атрибуты:
accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
dir — указывает направление текста внутри элемента.
id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
lang — указывает язык, на котором написан текст внутри HTML-элемента.
style — необходим для применения встроенных стилей CSS к тегу.
tabindex — устанавливает порядок табуляции между элементами (клавиша Tab).
title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.
Тип тега
Назначение: текст (строки).
Модель тега: inline (встроенный, уровня строки).
Может содержать: inline-теги, обычный текст и спецсимволы HTML (мнемоники).
Открывающий тег: необходим. Закрывающий тег: необходим.
Синтаксис
<span>содержимое</span>
Пример HTML: применение тега SPAN
<!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>seodon.ru - Применение тега SPAN</title> <style type="text/css"> .bold { font-weight: bold } /* Полужирный шрифт */ .ital { font-style: italic } /* Курсив */ .sm_cap { font-variant: small-caps } /* Заглавные буквы уменьшенного размера */ </style> </head> <body> <p>Одна из ошибок начинающих создателей сайтов — избыточное использование на странице <span>жирного</span>, <span>курсивного</span> шрифтов, написание текста только <span>заглавными</span> буквами и т.д. Порой они вообще весь текст выводят <span>жирным</span> шрифтом или <span>прописными</span> буквами, думая, что привлекут больше внимания посетителей. На самом деле такие сайты вызывают больше отторжения, например текст из одних <span><span>заглавных</span></span> букв гораздо сложнее читать, чем обычный.</p> </body> </html>
Результат примера
Результат. Применение тега SPAN.
Поддержка версиями HTML
Версия: HTML 4.01 HTML 5 XHTML 1.0 XHTML 1.1
Поддержка: Да Да Да Да
Поддержка браузерами
Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Да Да Да Да Да

	Компьютеры						Мобильные
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome для Android	Firefox для Android	Opera для Android	Safari on iOS	Samsung Internet
`span`	Chrome Полная поддержка Да	Edge Полная поддержка 12	Firefox Полная поддержка 1	IE Полная поддержка Да	Opera Полная поддержка Да	Safari Полная поддержка Да	WebView Android Полная поддержка Да	Chrome Android Полная поддержка Да	Firefox Android Полная поддержка 4	Opera Android Полная поддержка Да	Safari iOS Полная поддержка Да	Samsung Internet Android Полная поддержка Да

Версия:	HTML 4.01	HTML 5	XHTML 1.0	XHTML 1.1
Поддержка:	Да	Да	Да	Да

Браузер:	Internet Explorer	Google Chrome	Mozilla Firefox	Opera	Safari
Версия:	6.0 и выше	2.0 и выше	2.0 и выше	9.2 и выше	3.1 и выше
Поддержка:	Да	Да	Да	Да	Да

Что такое в html span – Теги div и span, контейнеры для стилизации — Разметка текста — HTML Academy

Тег | htmlbook.ru

Спецификация

Описание

Синтаксис

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

Атрибуты

Тег | HTML справочник

Значение и применение

Поддержка браузерами

Пример использования

Отличия HTML 4.01 от HTML 5

Значение CSS по умолчанию

Поддержка глобальных атрибутов

Атрибуты событий

| HTML | WebReference

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

Пример

Спецификация ?

Спецификация

Браузеры

Автор и редакторы

| Справочник HTML

Синтаксис

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

Атрибуты

Стилизация по умолчанию

Различия между HTML 4.01 и HTML5

Пример использования:

Пример HTML:

Спецификации

Поддержка браузерами

Учебник HTML

— Веб-технологии для разработчиков

Атрибуты

Пример 1

HTML

Результат

Пример 2

HTML

CSS

Результат

Спецификации

Поддержка браузерами

Легенда

Смотрите также

Span и Div

seodon.ru | Теги HTML — Тег SPAN

Атрибуты

Тип тега

Синтаксис

Поддержка версиями HTML

Поддержка браузерами

Добавить комментарий Отменить ответ

Рубрики