HTML5 Training: How to Format a Page in HTML5
Understanding how to format a page in HTML5 is very important. In this post, we will examine some basic techniques and tags to help you format a page in html5. Click here to view the entire tutorial.
Adding a New Paragraph
When you are working in a word processing program such as Microsoft Word, you press the “Enter” (or Return) key on your keyboard to begin a new paragraph. Web browsers do not recognize those line breaks. Instead, you must insert paragraph tags “<p>”…”</p>” each time you want to start a new paragraph.
Start Tag: | <p> |
End Tag: | </p> |
Attributes: | None |
Example: | <p>This is how you create new paragraphs.</p>
<p>See how easy it is to do?</p> |
Result: | This is how you create new paragraphs.
See how easy it is to do? |
Adding a Line Break
By default, browsers ignore many formatting keystrokes that we take for granted. Examples include the “Enter” and “Tab” keys and multiple uses of the spacebar. To accomplish the same tasks in HTML, we use page formatting tags.
Web browsers wrap text automatically to the next line when the current line reaches the right side of the browser. If you want to avoid wrapping and begin text on a new line, you use the <br> tag. The <br> tag does not have an end tag. You can also add additional lines between paragraphs by using the <br> tags. Each <br> tag you enter creates another blank line.
Start Tag: | <br> | |
End Tag: | None | |
Attributes: | None | |
Example: | <p>This is where your fist line of text goes
<br>Your second sentence would begin on the next line. </p> |
Each <br> tag begins a new line. |
Result: | This is where your first line of text goes.
Your second sentence would begin on the next line. |
Inserting Blank Spaces
Any blank spaces that you type in your text (beyond a single space between words) are ignored by browsers. You must code your desired blank spaces into your document. You can insert blank spaces into any lines of text. Since blank spaces are not available on your keyboard, you must use the entity for each space you wish to add. For example, if you wanted to add multiple spaces between specific words, type in the appropriate amount of entities without any spaces between them.
Entity: | |
Example: | <p>This would add five blank spaces.</p> |
Result: | This would add five blank spaces. |
Preformatted Text
If you want to avoid some of the repetitive coding that comes with multiple spacing in your document, you can use the preformatted tags <pre>…</pre>. The <pre>…</pre> tags allow you to maintain the integrity of the spacing and formatting of your text so that browsers will display it as you have typed it.
For example, let’s say you want to create two columns of information with specific spacing. You place the <pre>…</pre> tags before and after your text to display the columns just as you have typed them.
Start Tag: | <pre> | |
End Tag: | </pre> | |
Attributes: | None | |
Example: | <p>Today’s Specials:</p>
<pre> Soup: New England Clam Chowder Salad: Beefsteak Tomato Entrée: Surf & Turf </pre> |
Maintains the integrity of the formatted text. |
Result: | Today’s Specials:
Soup: New England Clam Chowder Salad: Beefsteak Tomato Entrée: Surf & Turf |