This article explains how to use and handle whitespace and line breaks using HTML code. Since in HTML the repeated typing of empty spaces by pressing the space bar on the keyboard does not give the desired result, but simply causes the display of a single space within the internet browser, in order to manage the spacing of the text it is necessary to use specific HTML tags.
Steps
Method 1 of 3: Use HTML Code
Step 1. Open the HTML file to edit
You can open an HTML file using a text editor such as Notepad or TextEdit on Windows and Mac respectively. Alternatively, you can use a professional website builder, such as Adobe Dreamweaver. To open the HTML document you want to edit, follow these instructions:
- Access the folder where the HTML file is stored using the "File Explorer" system window on Windows or "Finder" on Mac;
- Select the HTML file with the right mouse button;
- Place the mouse pointer over the item Open with;
- Click on the name of the program you want to use to edit the HTML document.
Step 2. To enter a normal blank space, press the Spacebar on your keyboard
To insert a simple blank space within the text, click on the desired point and press the space bar. Normally, a single space is displayed between words in the text in HTML, regardless of the actual number of blanks that have been entered by pressing the space bar.
Step 3. Use special code to insert and force display of additional blank space
This HTML entity refers to the acronym NBSP, which means "Non Breakable Space"; it is called that because it does not include the line break.
- For example, the text string Hello people! will be displayed with an additional space between the words "Hello" and "People!" within any internet browser.
- Abusing the use of this HTML entity could cause the internet browser to display problems, as it will not know how to handle line breaks and text wrapping so that it is readable and tidy.
- You can also use the unicode code to insert an additional blank space.
Step 4. Use other HTML entities to manage text spacing
You can insert multiple blanks with a single HTML entity using one of the following options:
- Insert two blanks using the HTML code;
- Insert four blanks using the HTML code;
- Indent text using HTML code.
Method 2 of 3: Using CSS Style Sheets
Step 1. Open the HTML document or file that contains the CSS code
The code related to the CSS style sheets can be inserted directly into an HTML document inside the "head" section or it can be stored in an external file.
The "head" section of an HTML document is located at the top of the file and is characterized by the "" and "" tags
Step 2. Create the section to insert the CSS code
This is the "style" section that must be placed inside the "head" section of the HTML code or in an external style sheet separate from the HTML document. To create the "style" section within the HTML code or in an external file use the following tags:
- Type the tag to indicate the start of the "style" section. All CSS code must be placed in the document after this tag.
- Insert the tag to indicate the end of the "style" section. Any CSS code you want to include in the HTML code will need to be placed before this closing tag.
Step 3. Inside the "style" section insert the following tags to manage the style of the text: p {indent-text: 5em;}. This way, you will instruct any internet browser to indent text using 5 blanks where indicated by the HTML code.
- Of course, you can change the number of blanks to use for indenting text by inserting a different value after the "indent-text:" parameter.
- The "em" code represents the unit of measurement equivalent to a single blank space referring to the specific size of characters. If you wish, you can use a different unit of measurement, for example a percentage ("indent-text: 15%;") or a length ("indent-text: 3mm;").
Step 4. Type the ta
where you want to indent the text.
You must insert the tag inside the "body" section of the HTML code where the text to indent is located. In this way, the text will be automatically formatted according to the specifications indicated by the CSS code.
Method 3 of 3: Use the Pre HTML Tag
Step 1. Open the file that contains the HTML code to edit
You can use a text editor such as Notepad on Windows or TextEdit on Mac. Alternatively, you can use a professional website builder, such as Adobe Dreamweaver. To open the HTML document you want to edit follow these instructions:
- Access the folder where the HTML file is stored using the "File Explorer" system window on Windows or "Finder" on Mac;
- Select the HTML file with the right mouse button;
- Place the mouse pointer over the item Open with;
- Click on the name of the program you want to use to edit the HTML document.
Step 2. Insert the HTML tag
at the point that precedes the text to be formatted.
This will create a section of pre-formatted text.
Step 3. At this point, type the text as you want it to appear immediately after the tag"
".
By creating a section of pre-formatted text, any line break or blank space created by pressing the "Enter" key will also be displayed correctly within the browser.
Step 4. Enter the tag to indicate the closing of the preformatted text section.
Advice
- If the characters related to the text spacing are displayed in the form of incorrect symbols from the internet browser, most likely there is additional data related to the formatting of the text because a text editor was used that is not suitable for creating content that must be viewed via the browser Internet. To prevent this from happening, always create your HTML code using an editor such as Notepad or TextEdit.
- CSS style sheets are a much more powerful and reliable tool for managing the look and feel of web pages, including text spacing.
- The HTML code
- is an example of a "character entity", that is, a code that refers to a special character that cannot be typed with a key on the keyboard.
Warnings
-
The HTML code for the character associated with the Tab key ↹ is
- , but it doesn't work as well as you might think. The HTML interpreter does not recognize this type of spacing, so the tab character will appear as a single space.
- Create your HTML code always using a special editor for programming or save it in plain text form (i.e. a file that contains only text and does not include formatting information) and not through a text editor, for example Word.
