What do < span> tags and < br> tags do and stand for in html/css?

In one challenge i did long ago i used < span > tag with class text-danger to change color of specific text so im wondering what it really stands for and is used for, and same for br, what does it mean and whats it used for?

span is a general wrapper for inline content. It lets you target specific parts of a given string so you can style it or target it with CSS or Javascript.

br is a line break. It lets you divide some text into a new line.

I linked to their respective MDN articles if you want to check out some more examples :smiley:

1 Like

For HTML specifically, the W3C is the official resource for information like this since they’re the organization who set the standards for HTML5:

https://www.w3.org/TR/2011/WD-html5-author-20110809/the-span-element.html

https://www.w3.org/TR/2011/WD-html5-author-20110809/the-br-element.html

1 Like

Ok thank you guys alot

span is like div, only it doesn’t automatically place into a new line when set next to another span and by default it only takes up as much space as it has content even if you set a width and height. div will take up 100% of its parent’s width and its own content’s height OR its assigned height/width value.

This is really just the difference between “display: inline” and “display: block” - a span is inline by default and a div is block by default.

There’s a hybrid called inline-block that you’ll eventually encounter. An element with “display: inline-block” takes up as much space as its content by default, doesn’t create a new line for itself, but can still have its width/height property changed.

I have one question, can we use span like this:

< p >< span class= ‘‘someClass’’ > Hello world </ p>? Like inside paragraph? I know i did a challenge but im wondering if we even need paragraph for this?

^ Yes that’s possible, you can use the SPAN tag anywhere. However in your example it’s not exactly done correctly, since you need to close the SPAN tag, and also in your example that doesn’t make a whole lot of sense to do—if you want to style all of the text in the P tag, you might as well style the P tag itself. A better example of SPAN might be something like this:

<p>This word is <span class="red-text">red</span></p>