Lets Learn about Tech:- Shall we?

<SPAN>Attribute

Photo by Nathan da Silva on Unsplash

<SPAN>Attribute

Elizabeth Modupeoluwa Chanbang's photo
Elizabeth Modupeoluwa Chanbang
·

3 min read

Table of contents

The< span> HTML element is a generic inline container for phrasing content that does not represent anything inherently. It is referred to as an inline element because it remains on the current line and does not cause a line break. Consider generic because the tag name itself says nothing about the element’s contents.

A span tag consists of an opening and closing tag:

<span>

</span>

USES

  • It can be used to group elements for styling purposes (via the class or id attributes) or because they have attribute values in common, such as lang.

  • It should only be used when no other semantic element is available.

Note:-The span element is similar to the div element.

A div, on the other hand, is a block-level element, whereas a span> is an inline element.

Interesting fact about Span: - the span attribute does not, by itself, create a specific type of page element.

  • It has no effect on how the page appears.

  • Span tags are typically used to wrap sections of text for styling or to add attributes to a section of text without creating a new line of content.

FUNCTION OF ‘SPAN’ IN HTML

The span tag is useful because it allows us to apply any global HTML attribute to a section of text or other inline page content.

The selectors’ id and class’, which are used to apply styling to specific words, are the most commonly used attributes with span.

CSS can also be applied to HTML elements within tags using style attributes (also known as “inline CSS”). CSS can also be applied to HTML elements within tags using style attributes (also known as “inline CSS”). Inline CSS should be avoided because it makes page-wide style changes more difficult.

Other attributes can also be accommodated by Span. For instance, if you have text in a language other than the one used in the document, wrap it in a tag and add the lang attribute to the tag to indicate the temporary language change.

This aids search engine indexing and instructs text-to-speech programs on how to pronounce these words.

The span element is also useful for directing JavaScript functions to a specific section of text. Finally, we can use CSS to bold and italicize text using . It is, however, preferable to use the strong tag for bolding text and the em (emphasis) tag for italicizing text.

This is due to the fact that strong and em are semantic HTML elements whereas span is not, making your code more accessible to screen readers.

Always check to see if there is a more semantic alternative to span before using it for better accessibility.

DIFFERENCES BETWEEN DIV AND SPAN

  • Div adds a line break after its closing tag, while does not This explains why divs are considered “blocks” and spans are considered inline.
  • A div attribute occupies the entire width of its container, whereas a span attribute only occupies the width of its inner content.
  • CSS allows you to change the width and height of a div element, but not the width and height of a span element.
  • Div elements are typically used to separate chunks of content, while span tags are used to target a specific piece of text within a larger chunk of content.

SPAN IN HTML

<!Doctype html>
<html>
<head>
<meta charset=”UTF-8">
</head>
<title>Why Buy stocks </title>
<body>
<p>Invest in <span class=”stocks”>Dividends</span>, <span class=”stocks”>Coins</span> and <span class=”stocks”>Real estate</span> to see revenue.</p>
<p>It might take a while and risky <span class=”stocks”> to earn in some cases </span> but it is worth it.</p>
</body>
</html>

SPAN IN CSS

span.stocks {
color: black;

Sources:-Html-Span Html-Span/style

          (https://developer.mozilla.org/enUS/docs/Web/HTML/Element/span#:~:text=The%20HTML%20element%20is,attribute%20values%2C%20such%20as%20lang%20)
HTML5spanDIV