How is the span element used?

I have a question about the use of < span > tags in this exercise to nest the “Rare” and “Well-Done” text elements. These tags are not really mentioned in the “Learn” section of the lesson, and while I remembered seeing them in the Elements and Structure lessons, I couldn’t quite remember their function.
I was unsure as to why they would be used instead of a < h1… > or < p > tags in this context, so I did a bit of research on all these tags. First thing I found is that the < h1… > tags are not appropriate for anything that is not functionally a heading within your document - this is dictated by the best practices for readability and accessibility. As to the < p > tag, the main reason it is not used here seems to be the BLOCK nature of the tag, meaning that each use of this tag to define an element would force a new line (this would also apply to the aforementioned <h1…> tags, as they are also BLOCK tags - err…I think). **edit - this would also appear to be why < div > is an inappropriate option here.
For the formatting of the type=range input to make sense in the example we need the text to remain INLINE. Thus, the < span > tag, which is not a BLOCK tag but an INLINE tag is selected. However, in my research on the < span > tag, the most prevalent function for this tag seems to be sectioning off text for selective application of CSS style formatting rather than the structurally inline effect it has as an element (which I only saw mentioned once in a reply to a different question).

So after all that exposition, here are my actual questions:

Is < span > the only tag that is used for displaying inline text?

AND

If there are others, why is < span > the appropriate choice here?

4 Likes

What part f the cde creates the actual sliding bar

The actual sliding bar is created by the type attribute with the value “range”.
So if you use type=“range” it creates the sliding bar.
Hope it helped!

3 Likes

<span> is a generic inline container for phrasing content. It’s kind of like an inline version of <div>. It’s used to gain control of content inline for styling without changing the semantics of the content.

There are other elements that that have semantic meaning like <h1> for a heading but you can put a <span> inside an <h1> to control part of the content styling without changing the semantic meaning of the <h1>.

Here is a link to a list of inline elements:

Here’s a reference link to the element:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span

3 Likes

when range input type is used, I found the label functionality for moving the focus to the input (when label is clicked) is no longer working. Is this a bug with the example provided or an exception with range type?

So I understand that we use <span> here, because we want to have an inline element without line breaks or anything like that. What I don’t understand is why there isn’t something similar to lable in behaviour. Maybe that comes later in the lecture.
I was just curious to see that we use a “generic” <span> for this. We could just have used a <span> to label the text and number fields earlier, but we used something better suited there: the <label>. Isn’t there an element that is clickable and for example brings the slider right over to that lable, or increases/decreases the slider by some increment?

1 Like

Thank you!

Greatful for this concise and clear response.

Bevan