Insert Spaces in HTML

Multiple spaces normally created by the spacebar, the tab key and return key are all ignored when you write code. HTML just interprets them all as whitespace between words, and displays a single space. While CSS allows for more precise styling of whitespace and indentations, HTML does have several tools available to customize your spacing.

Steps

Sample HTML Code

Doc:HTML Code for Space

Inserting Single Spaces and Tabs

  1. Insert a non-breaking space. Normally, HTML will only display one space between words, no matter how many times you press the space bar. To force an extra space to show up, type or .[1] This displays a character called a "non-breaking space," which will always appear.
    • This is called a non-breaking space because it prevents a line break at its location. If you overuse this character, browsers will have trouble inserting line breaks in a tidy, readable way.[2]
  2. Insert white space of different widths. There are several other character entities that tell the browser to display white space. Different browsers may display these in slightly different ways, but unlike , these shouldn't affect your line breaks:[2][1]
    • — named after the "N" block of a printing press, the en space is about the width of two normal spaces
    • — the em space, roughly four normal spaces
  3. Mimic a tab with non-breaking spaces. One way to indent a paragraph is to insert several non-breaking spaces in a row: . This works as an HTML-only solution, but it's discouraged if you have access to CSS instead (described in a separate step).
    • If you have a paragraph with a complicated arrangement of text, use the pre tag instead.
  4. Indent paragraphs with CSS. CSS paddings or margins give direct display instructions to the browser, so the result is more consistent. It's not hard to add this even if you don't know CSS and do not have a style sheet. Here's an example that shifts the entire paragraph to the right:[3]
    • In the section of your HTML document, insert the following code:

      "p.indent" defines a type of paragraph (p tag) named "indent" (you can use any name). The rest of the code adds blank space "padding" to the left of these paragraphs.
    • Now return to the body of your HTML document. Any time you want to indent a paragraph, place it inside these tags:
    • To adjust the amount of indentation, change the "1.8" number in the CSS code. Keep the "em" after it, which is a measure of length related to the font size.[4]

Formatting Longer Passages

  1. Use preformatted text. Any space or ↵ Enter keystroke inside tags should be displayed exactly as typed. You could use this to display code examples, poetry, or any other text in which exact spacing and line breaks are important.[5]
    • The main downside to preformatted text is the width. Unlike normal HTML, it will not resize to match the user's window size.[6]
  2. Create line breaks. The tag ends the current line of text. You can create blank lines from multiple br tags. This is a fine approach for novice HTML students, but this kind of forced HTML styling is discouraged once you've learned CSS.
  3. Define paragraphs with the p tag. The tag around text defines a paragraph. Most browsers will separate paragraphs by a single blank line, but you cannot guarantee a precise style.[7]

Tips

  • If you find extra symbols floating around your code when you double-check its final appearance, check for unfinished code, such as a <br instead of a <br>.
  • CSS is a much more powerful and predictable way to lay out your page, including the spacing of your text.
  • Avoid white spaces immediately after a start tag or before an end tag. For example, write Spaces <a>Tutorial</a>, not Spaces<a> Tutorial </a>.[8]
  • The non-breaking space ( ) is an example of a character entity: a code that references a character you cannot type on your keyboard.

Warnings

  • The HTML character for Tab ↹ (&#09;) does not work as you might think. A standard HTML document does not have tab stops, so the tab character will not do anything.
  • Always write your HTML in a code editor or plain text file, not a word processing file format. If your spaces turn into strange symbols on the web browser, it's most likely caused by extra data stored in the word processing format not intended for online display.

Related Articles

Sources and Citations

  1. ↑ 1.0 1.1 http://www.amp-what.com/unicode/search/space
  2. ↑ 2.0 2.1 http://hea-www.harvard.edu/~fine/Tech/html-sentences.html
  3. ↑ http://stackoverflow.com/questions/1571648/html-tab-space-instead-of-multiple-non-breaking-spaces-nbsp
  4. ↑ https://www.w3.org/WAI/GL/css2em.htm
  5. ↑ https://www.w3.org/TR/html401/struct/text.html#edef-PRE
  6. ↑ https://www.sitepoint.com/everything-need-know-html-pre-element/
  7. ↑ https://www.w3.org/TR/html5/grouping-content.html#the-p-element
  8. ↑ https://www.w3.org/TR/html401/struct/text.html
Retrieved from "https://kipkis.com/index.php?title=Insert_Spaces_in_HTML&oldid=264598"