How to insert spaces in HTML

Author: Monica Porter
Date Of Creation: 22 March 2021
Update Date: 1 July 2024
Anonim
how to insert spaces in html
Video: how to insert spaces in html

Content

Lots of spaces created normally with spaces, tab keys and enter keys are all ignored in web programming languages. HTML defines them all as regular spaces between words and displays only a single space. While CSS allows users to set more granularity on whitespace and alignment, HTML doesn't have some built-in tools to customize your spacing.

Steps

Method 1 of 2: Insert spaces and single tabs

  1. Insert spaces are not broken. Typically, HTML will display only one space between words, no matter how many times you pressed the spacebar. To make multiple contiguous spaces displayed, type or. This code will create a special character called "non-breaking space" and it is always displayed.
    • The above character is called "indestructible space" because it prevents line breaks from being in place. If you abuse this character, the browser will have difficulty inserting line breaks in an orderly and vertical way.

  2. Insert spaces with different widths. There are some other entity characters that require the browser to display a space. The way these spaces are displayed in different browsers is a bit different, however, unlike the following codes will not affect the line break:
    • - is named according to the printer's "N" space (the unit of measure), the space "en" is twice as wide as the regular space.
    • - "em" space, approximately equal to four spaces.

  3. Simulates a tab with plenty of non-destructive space. To indent paragraphs, you can insert indestructible spaces consecutively:. This is the only solution if you only use HTML, but if you use CSS (described separately in the step below) it will be shorter.
    • If there is a complex presentation of text, use the pre tag.

  4. Align paragraphs with CSS. The CSS "margin" and "padding" properties give instructions directly to the browser, so the results displayed will be more consistent. This method is not difficult to implement, unless you know nothing about CSS and your page does not have a style sheet. Here's an example of how to move an entire paragraph to the right margin:
    • In section of the HTML document, insert the following code:

      where: "p.indent" defines an attribute of the text (p tag) the name "indent" (you can use another name). The rest of the code adds the feature of the "padding" space to the left side of the paragraph.
    • Now, back to the body of the HTML document. Any time you want to indent a paragraph (still "indent" in this example), put the paragraph in this code:

    • To align the indentation spacing, change the number "1.8" in the CSS code. Keep "em" behind as this is the unit of length associated with the font size.
    advertisement

Method 2 of 2: Set up longer gaps

  1. Use preformatted tags. Any key space good ↵ Enter is entered in the card

    will be displayed exactly as you type. You can also use this tag to present examples, poems, or any other text that requires high precision in presenting spacing and line breaks.

    • The main disadvantage of preformatted cards is the width. Unlike regular HTML, the pre-formatted text won't be resized to fit the user's window size.
  2. Create a line break. Card
    will end the current line of text. You can create blank lines using multiple line break tags. For students new to HTML, this is a good approach, but if you have learned CSS then this mandatory HTML format is not recommended.
  3. Identify the paragraph with the "p" tag. The tag around the text identifies that paragraph. Most browsers will separate the paragraph with a blank line, but you cannot guarantee a consistent format for the text. advertisement

Advice

  • When you last check the display on your web page, if you see redundant characters in an unusual position around the snippet, double-check if there are incomplete tags, such as <> instead of
    .
  • CSS is a more powerful and proactive tool for presenting web pages, including spacing for text.
  • Limit sudden spaces behind an open tag or in front of a closed tag. For example, you should write Spaces Tutorial not Spaces Tutorial .
  • Indestructible space is an example of an entity character: the code representing a character that you cannot enter from the keyboard.

Warning

  • The HTML attribute represents the key Tab ↹ Actually not as effective as you might think. A standard HTML document doesn't have tab stops, so the tab character has no effect.
  • Always write the HTML language in a code editor or plain text file, do not use text file processing formats. If your spaces become strange characters in your web browser, it is most likely due to excess data added by the word processor, which is not intended for online display.