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
RIHAB DRIDI
Full Stack JavaScript Techdegree Student 4,700 Pointswhat'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 ?
1 Answer
Alexander Bourlotos
4,009 PointsWhat 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
Full Stack JavaScript Techdegree Student 4,700 PointsThanks conrad cortes for your response , Alexander Bourlotos, your answer is quite helpful i appreciate it thank you for your detailed explanation
NICOLE REBENTISCH
3,612 PointsJust a few minor points, in case other people read this and get confused...
- It's
not&nbps;as in "non-breaking space" - 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:
Conrad Cortes
8,418 PointsConrad Cortes
8,418 PointsCan 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.