Тег SPAN

Содержание

HTML Tag
Syntax
Example of the HTML tag:
Example of the HTML tag with the class attribute:
Attributes
How to style tag?
Common properties to alter the visual weight/emphasis/size of text in tag:
Coloring text in tag:
Text layout styles for tag:
Other properties worth looking at for tag:
Span HTML – How to Use the Span Tag with CSS
What is the span tag used for?
How to style text with the span tag
How to change the text color
How to change background color
How to change font style
How to Manipulate JavaScript with the span tag
Conclusion
: The Content Span element
Try it
Attributes
Example
Example 1
HTML
Result
Example 2
HTML
CSS
Result
Technical summary
Specifications
Browser compatibility
See also
Found a content problem with this page?
MDN
Support
Our communities
Developers
Span tag use in html
Статьи по теме
Типы тегов
Span tag use in html
Статьи по теме
Типы тегов

HTML Tag

The HTML tag is used to define a small piece of content or text within a larger document that needs to be styled differently than the surrounding text. It is an inline element that can be used to apply styles, such as color or font, to a specific section of text.

The tag does not have any semantic meaning on its own, but it can be used in conjunction with other tags, such as or

, to give them additional styling or functionality. It is a useful tool for web designers and developers who need to make small adjustments to text without affecting the overall structure of the page.

For example, you can use the tag to highlight a specific word within a paragraph or to apply a different font size to a single character. The tag can also be used with CSS to create hover effects, animations, and other dynamic features on a web page.

The span tag is somehow similar to the div tag. But there are some differences. While the HTML tag is used to define a small piece of content or text within a larger document that needs to be styled differently than the surrounding text, the div tag is used to define a larger section or block of content that can contain other HTML elements. The div tag is a container element that is often used to group related content together and apply styling to the entire block. It is a block-level element, which means it takes up the full width of its parent container and forces a line break before and after the element.

Syntax

The tag comes in pairs. The content is written between the opening () and closing () tags.

In the example below we gave a style just inside the tag.

Example of the HTML tag:

html> html> head> title>Title of the document title> head> body> p>My cat has span style="color:#8ebf42;">green span> eyes. p> body> html>

Let’s see another example where we added class attribute to the tag and gave styles to the content of the tag separately.

Example of the HTML tag with the class attribute:

html> html> head> title>Title of the document title> style> .letter < color: red; font-size: 300%; /* Font size in percents */ position: relative; /* Relative positioning */ top: 7px; /* Move from above */ > style> head> body> p> span class="letter">О span> She brought in disgusting, disturbing yellow flowers in her hands. And these flowers stood out on her black coat. p> p>Michael Bulgakov p> body> html>

Attributes

Global Attributes refer to attributes that are used on any HTML element. These attributes are common for all elements in HTML.

An event occurs when a browser reacts to a particular user’s action. The user generates an event when clicking on a mouse, playing video, uploading a document or an image, or performing any other action on the website.

How to style tag?

Common properties to alter the visual weight/emphasis/size of text in tag:

CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
CSS font-size property sets the size of the font.
CSS font-weight property defines whether the font should be bold or thick.
CSS text-transform property controls text case and capitalization.
CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.

Coloring text in tag:

CSS color property describes the color of the text content and text decorations.
CSS background-color property sets the background color of an element.

Text layout styles for tag:

CSS text-indent property specifies the indentation of the first line in a text block.
CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
CSS white-space property specifies how white-space inside an element is handled.
CSS word-break property specifies where the lines should be broken.

Other properties worth looking at for tag:

CSS text-shadow property adds shadow to text.
CSS text-align-last property sets the alignment of the last line of the text.
CSS line-height property specifies the height of a line.
CSS letter-spacing property defines the spaces between letters/characters in a text.
CSS word-spacing property sets the spacing between words.

Источник

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)

Читайте также: Тег SELECT

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

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.

Источник

Span tag use in html

        
Бернард Шоу

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

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

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

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.