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?
If there are others, why is < span > the appropriate choice here?