Home > Web Front-end > HTML Tutorial > The function of span tag

The function of span tag

藏色散人
Release: 2020-03-03 09:32:20
Original
10716 people have browsed it

The function of span tag

The role of span tag

Recommended: "html tutorial"

Definition and Usage

tags are used to group inline elements in a document.

Tips and Notes:

Tip: Use to group inline elements to format them with styles.

Note: span has no fixed format. It only changes visually when you apply a style to it.

Example

<p><span>some text.</span>some other text.</p>
Copy after login

Example explanation

If you don't apply a style to span, the text in the span element will not have any visual difference from other text. Still, the span element in the example above adds extra structure to the p element.

You can apply id or class attributes to span, which can not only add appropriate semantics, but also facilitate the application of styles to span.

It is possible to apply either class or id attributes to the same element, but it is more common to apply only one of them. The main difference between the two is that class is used for groups of elements (similar elements, or can be understood as a certain type of elements), while id is used to identify individual and unique elements.

Tip: In fact, you may have noticed that some text on the W3School site is styled differently than other text. For example, "tips" are in bold orange. Although there are many ways to achieve this effect, our approach is: use the "hint" to use the span element, and then apply class to the parent element of the span element, that is, the p element, so that you can apply span to the child element of this class Corresponding style.

HTML:

<p class="tip"><span>提示:</span>... ... ...</p>
Copy after login

CSS:

p.tip span {
font-weight:bold;
color:#ff9955;
}
Copy after login

Note: All browsers support the tag.

The above is the detailed content of The function of span tag. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template