Non-Breaking Space in HTML
In HTML coding, the non-breaking space is a character entity which can:
- create white space between words or web page elements
- stop the browser from breaking a line in the wrong place.
Normally, if there are not any non-breaking spaces used, the browser will break up lines of text or content to suit the available space in your web design or the browser window. The content will flow within the space available. You can see an example of this in the article Not Designing for Most Common Screen Resolution at Web Page Mistakes. As the resolution of the monitor is changed, the flow of content adjusts.
Non-Breaking Space Coding in HTML
As mentioned above, non-breaking space is an character entity. To insert a non-breaking space you would use:
Uses for the Non-Breaking Space
Prevent Line Break with Non-Breaking Space
Sometimes you might want the force the browser to not break the line between certain words or web page elements. E.g. Mr. Someone
Mr. Someone
Another example of forcing the browser to keep things together might be a space between 2 pictures.
<p><img src="images/html-basic-tutor-5050.gif" width="50" height="50" alt="HTML Basic Tutor" /> <img src="images/html-basic-tutor-5050.gif" width="50" height="50" alt="HTML Basic Tutor" /></p>
The coding above will produce:
Create Whitespace with Non-Breaking Space
The non-breaking space can be used to create white space between web page elements. In our example above with the pictures, white space between the pictures is created using the non-breaking space html coding.
Prevent Table Cell Collapse with Non-Breaking Space
If you use a table within your web page and have an empty cell, insert the non-breaking space HTML coding in that empty cell to prevent the cell collapsing in some browsers.
<td> </td>
What Not to Use the Non-Breaking Space For
Creating Indented Paragraphs
Some people and/or HTML editors will use non-breaking space coding to indent a paragraph. This doesn't always work. Some browsers will ignore beyond the first instance of the non-breaking space. Use your stylesheet instead to create an indent at the beginning of your paragraphs.
Forcing Element Placing on a Web Page
Some web pages contain long strings of the non-breaking space coding to force a picture or other web page element to a certain spot on the page. Again, don't do this, use your stylesheet to reduce your web page file size and have more control over where on the page the element will be placed.
Problems with Non-Breaking Space
There are some problems with using the non-breaking space HTML coding:
- Not all browsers acknowledge the additional instances of the non-breaking space.
- If you get carried away with the use of non-breaking space, it can cause the horizontal scroll bar to appear, if the browser window is not big enough.
- Using the non-breaking space HTML coding within the text or between pictures (for example) can make your content overlap the borders of the table.
Use the non-breaking space HMTL coding in moderation, if at all. Learn to manipulate placement of your web page content using the stylesheet instead.
Related Non-Breaking Space Reading
HTML Character Entities - The non-breaking space and other HTML character entities.
If you found this web page a useful resource for your own website please link as follows:
Web design practices and coding in a fashion
small business owners, beginner web designers and hobbyist web site owners
with little or no knowledge of web design can learn from.
URL:
