Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML HTML Basics Going Further with HTML HTML Entities and Reserved Characters

RIHAB DRIDI
seal-mask
.a{fill-rule:evenodd;}techdegree
RIHAB DRIDI
Full Stack JavaScript Techdegree Student 4,700 Points

what's the difference between the caracter space "nbps" and the special character for space "%20" i'm getting confused

In the previous video , Guil mentioned that the "%20" is special caracter for space and in this video , he says that nbsp represent a space to so i do not see the difference between them , and in which case we use them ?

Conrad Cortes
Conrad Cortes
8,418 Points

Can you link something to where you found out about "%20". I tried googling your question and from what I can tell you so far is that "nbps" will not break the content into a new line and forces those two spaced words to stay together. This could help with comprehension of a certain word that may other wise be confusing if they where split.

1 Answer

Alexander Bourlotos
Alexander Bourlotos
4,009 Points

What Conrad said is correct. nbps is to keep two words together in case of line breaks causing your design to lose balance. You'll see this when you take the Web Typography course.

%20 will not keep two words together, and is probably not used the same way as character codes like & are (ampersand).

%20 is used in URLs as part of its' POST or GET content (I'll have to do some review on PHP or jQuery).

what that means, is that the syntax %20 is used in a web address to portray a "space" to the data being submitted to the back-end.

I'm not sure there is an HTML entity for a standard space (we're talking front-end content in the HTML file's body) because spaces get depicted correctly without interrupting code.

So, use spaces as much as you want, but if you run into an issue where one or two words are breaking the flow of the site when it's lowered in screen size, and you want to break the whole title/header/sentence some other way, you can use &nbps; at the location you want so the site knows where to break the content to another line.

A quick brown fox jumps&nbps; over the lazy dog

The example above will show up like "A quick brown fox jumps over the lazy dog"

but when the screen gets too small it will say:

A quick brown fox jumps

Over the lazy dog

INSTEAD of

A quick brown fox jumps over the lazy

dog

I hope this helps!

RIHAB DRIDI
seal-mask
.a{fill-rule:evenodd;}techdegree
RIHAB DRIDI
Full Stack JavaScript Techdegree Student 4,700 Points

Thanks conrad cortes for your response , Alexander Bourlotos, your answer is quite helpful i appreciate it thank you for your detailed explanation

NICOLE REBENTISCH
NICOLE REBENTISCH
3,612 Points

Just a few minor points, in case other people read this and get confused...

  1. It's   not &nbps; as in "non-breaking space"
  2. When using   you want to place it where a line break should NOT occur.

The example given of the quick brown fox would format as follows:

A quick brown fox jumps over

the lazy dog

OR, if the space is minimized smaller:

A quick brown fox

jumps over the

lazy dog

and so on...

This is because the use of   after jumps, keeps jumps and over together and will not break them apart with a line break. You can't control where the line break WILL occur using  , only where the line break WILL NOT occur. Another way of looking at it is that the browser will treat it as if it is one long word. So if it wraps words when minimized enough it would do the same with two words linked together with   using whatever criteria it uses when wrapping words. I suggest thinking of   as a kind of glue that holds the two words right next to each other.

Hopefully this clarifies things.

See the following for more information:

https://stackoverflow.com/questions/1357078/whats-the-difference-between-nbsp-and#:~:text=The%20entity%20produces%20a,line%20break%20at%20that%20position.&text=For%20example%20when%20you%20display,be%20split%20on%20separate%20lines.