As with traditional writing, the majority of your text should be organized into paragraphs. When designing in HTML, the <p> tag, or paragraph tag, comes with predetermined formatting to organize your blocks of text.
One behavior to note is the flow of text. Whatever text content you’ve placed between opening and closing paragraph tags will flow the width of the page when displayed. If you change the width of your browser, the flow of text will dynamically adjust to the new space. This behavior doesn’t occur though if a paragraph appears in an element that has a fixed width. Think of <p> tags as a liquid—they’ll reshape themselves to fill their container. Header tags share this behavior as well, but it’s not as noticeable with them since they don’t span over multiple lines as often as paragraphs do.
In the example below, the same paragraphs are displayed in two containers of two different widths.
| 200 pixels wide | 400 pixels wide |
This is a paragraph. Notice how the text flows in this table cell. Paragraph text automatically adjusts to fit the width of its container. |
This is a paragraph. Notice how the text flows in this table cell. Paragraph text automatically adjusts to fit the width of its container. |
Like header tags, paragraph tags also add space above and below themselves by default. Printed novels and articles traditionally indent at the start of new paragraphs. However, website writing doesn’t tend to indent paragraphs, so the extra spacing helps them stand apart from each other.
As a general rule with text content in HTML, it doesn’t matter how many spaces you add between words, or if you break the text into multiple lines, it will ignore the extra whitespace and display the text in a standard fashion. This actually comes in handy when working with large paragraphs. The code can be broken into more lines for better readability. Reading text across the entire span of a screen makes it difficult to keep track of where you are when looking for the start of the next line.
How do you imagine the following paragraph code will display? Click the button below to see if you were right.
|
<p>This is another example paragraph.</p> |
This is another example paragraph.