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>

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>

CSS:

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

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!