What is spanning in html

What is spanning in html

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

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

Применение стилей к определенному участку текста:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 .highlight 

Обертывание ссылки вокруг определенного участка текста:

Читайте нашу Политику конфиденциальности для получения дополнительной информации.
 

Использование для применения различных стилей к разным частям текста:

Важно: Пожалуйста, заполните все поля перед отправкой формы.
 
Предупреждение: Не пытайтесь сделать это дома.
 .highlight < color: blue; font-weight: bold; >.warning 

Для чего использовать тег

• применение различных стилей к разным частям текста;
• чтобы обернуть ссылку вокруг определенного участка текста;
• добавить всплывающую подсказку к определенному участку текста;
• выделение определенного слова или фразы в предложении;
• применить инлайн-стили к небольшому фрагменту текста (но так лучше не делать);
• применить класс к определенному участку текста для использования с JavaScript;
• чтобы добавить дополнительный текст к ссылке, например «нажмите здесь» или «читать далее».

Глобальные атрибуты

Ограничения

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

Нюансы

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

🔡 Другие теги для изменения текста

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

Span HTML – How to Use the Span Tag with CSS

Kolade Chris

You can use the HTML span tag as a container to group inline elements together so you can style or manipulate them with JavaScript.

In this article, I will show you how to use the span tag to make a certain part of your content distinct from the rest. Then you should be able to start using it in your coding projects.

What is the span tag used for?

The span tag is just like a div, which is used to group similar content so it can all be styled together.

But span is different in that it is an inline element, as opposed to div , which is a block element.

Also, keep in mind that span itself does not have any effect on its content unless you style it.

There are two major uses of the span tag – styling and manipulating a particular text with JavaScript.

How to style text with the span tag

If you want to makes some particular text or any other content different from the rest, you can wrap it in a span tag, give it a class attribute, then select it with the attribute value for styling.

In the examples below, I change the color , background-color , and font-style of some text by wrapping it in a span tag.

How to change the text color

This a crimson text within others.
 

I have added some basic CSS to center everything on the page:

How to change background color

 
A green background color perfectly implies the beauty of nature.
 

How to change font style

 
An italic font style could be instrumental in laying emphasis on a text.
 

How to Manipulate JavaScript with the span tag

Just as it is possible to style content by wrapping a span tag around it, you can also manipulate your content by wrapping it in a span tag. You give it an id attribute and then select it by its id with JavaScript so you can manipulate it.

In the example below, I changed some text within other text to uppercase with JavaScript:

 
The text, freecodecamp, was turned to upperase with JavaScript
 

const uppercase = document.querySelector("#uppercase"); uppercase.style.textTransform = "uppercase"; 

Conclusion

In this tutorial, you have learned how to manipulate a particular piece of text with CSS and JavaScript by wrapping it in a span tag and giving it a unique class or id attribute.

Please note that in cases like this, you should use classes for styling and ids for manipulation with JavaScript in order to avoid confusion.

Thank you for reading, and keep coding.

Kolade Chris

Web developer and technical writer focusing on frontend technologies. I also dabble in a lot of other technologies.

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States Federal Tax Identification Number: 82-0779546)

Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons — all freely available to the public. We also have thousands of freeCodeCamp study groups around the world.

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.

Источник

: The Content Span element

The HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang . It should be used only when no other semantic element is appropriate. is very much like a element, but is a block-level element whereas a is an inline-level element.

Try it

Attributes

This element only includes the global attributes.

Example

Example 1

HTML

Result

Example 2

HTML

li> span> a href="portfolio.html" target="_blank">See my portfolioa> span> li> 

CSS

Result

Technical summary

Content categories	Flow content, phrasing content.
Permitted content	Phrasing content.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts phrasing content, or any element that accepts flow content.
Implicit ARIA role	No corresponding role
Permitted ARIA roles	Any
DOM interface	HTMLSpanElement

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on May 10, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

What is spanning in html

Помогает выделить стилем часть текста в блоке.

Время чтения: меньше 5 мин

Обновлено 8 сентября 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Пример

Скопировать ссылку «Пример» Скопировано

   Добавьте базилик, арахис и чеснок в блендер и перемешайте.  p> Добавьте span class="ingredient">базиликspan>, span class="ingredient">арахисspan> и span class="ingredient">чеснокspan> в блендер и перемешайте. p>    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Например, хочется, чтобы одно слово в абзаце было написано красным цветом. Помести это слово в коде в контейнер . < / span>и примени к нему CSS-стиль.

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

Как пишется

Скопировать ссылку «Как пишется» Скопировано

 .  span>. span>    Скопировать Скопировано Не удалось скопировать   

Подсказки

Скопировать ссылку «Подсказки» Скопировано

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

Ещё пример

Скопировать ссылку «Ещё пример» Скопировано

   Разумные люди приспосабливаются к окружающему миру. Неразумные люди приспосабливают мир к себе. Вот почему прогресс определяется действиями неразумных людей. 
Бернард Шоу p class="quote__text"> span class="quote__text-letter">Рspan>азумные люди приспосабливаются к окружающему миру. Неразумные люди приспосабливают мир к себе. Вот почему прогресс определяется действиями неразумных людей. p> p class="quote__author">Бернард Шоуp>    Скопировать Скопировано Не удалось скопировать   

 .quote__text-letter  float: left; /* Обтекание символа текстом справа */ margin-right: 7px; /* Отступ справа */ color: #ed6742; /* Цвет символа */ font-family: "Roboto Slab", serif; /* Шрифт с засечками */ font-size: 52px; /* Размер шрифта */ line-height: 52px; /* Высота строки */> .quote__author  margin-top: 10px; padding: 10px 0; border-top: 1px solid #ed6742; /* декоративная граница */ font-style: italic; font-size: 14px; font-weight: 300;> .quote__text-letter  float: left; /* Обтекание символа текстом справа */ margin-right: 7px; /* Отступ справа */ color: #ed6742; /* Цвет символа */ font-family: "Roboto Slab", serif; /* Шрифт с засечками */ font-size: 52px; /* Размер шрифта */ line-height: 52px; /* Высота строки */ > .quote__author  margin-top: 10px; padding: 10px 0; border-top: 1px solid #ed6742; /* декоративная граница */ font-style: italic; font-size: 14px; font-weight: 300; >    Скопировать Скопировано Не удалось скопировать   

На практике

Скопировать ссылку «На практике» Скопировано

Дока Дог советует

Скопировать ссылку «Дока Дог советует» Скопировано

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

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

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

Егор Левченко советует

Скопировать ссылку «Егор Левченко советует» Скопировано

🛠 — строковый элемент, поэтому по умолчанию у него нет высоты. Если нужна высота, то элементу стоит задать display : block или display : inline — block , или подумать: «А не нужен ли там ?»

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

🛠 Тег удобен, если нужно оформить другими стилями отдельное слово или словосочетание в тексте. Этот приём очень любят дизайнеры, чтобы акцентировать внимание на какой-то информации.

Например, выделим цветом важное для нас сообщение внутри заголовка на первом экране:

    We are  the best   company    header class="header"> h1 class="header__title"> We are span class="header__title-accent header__title-accent_color"> the best span> span class="header__title-accent"> company span> h1> header>    Скопировать Скопировано Не удалось скопировать   

 .header  display: flex; justify-content: center; align-items: center; min-height: 480px; background: #18191c url("../images/background.svg") no-repeat center / cover; z-index: 0; color: #ffffff;> .header__title  max-width: 500px; color: #fff; font-family: "Roboto", sans-serif; font-size: 25px; text-align: center; text-transform: uppercase; font-weight: normal; line-height: 30px; letter-spacing: 1px;> /* задаём стили для текста, который нужно выделить */.header__title-accent  display: block; /* перенос на новую строку */ font-size: 55px; line-height: 58px; font-weight: bold;> /* цветовой акцент */.header__title-accent_color  color: #000000; background-color: #FF8630;> .header  display: flex; justify-content: center; align-items: center; min-height: 480px; background: #18191c url("../images/background.svg") no-repeat center / cover; z-index: 0; color: #ffffff; > .header__title  max-width: 500px; color: #fff; font-family: "Roboto", sans-serif; font-size: 25px; text-align: center; text-transform: uppercase; font-weight: normal; line-height: 30px; letter-spacing: 1px; > /* задаём стили для текста, который нужно выделить */ .header__title-accent  display: block; /* перенос на новую строку */ font-size: 55px; line-height: 58px; font-weight: bold; > /* цветовой акцент */ .header__title-accent_color  color: #000000; background-color: #FF8630; >    Скопировать Скопировано Не удалось скопировать   

Источник