HTML Formatting
HTML formatting enables you to specify how web page text should be displayed. This includes headings, alignment, bold, italics, etc..
The opening HTML tag <tag> begins the action and the closing HTML tag </tag> ends the action.
Bold <b></b>
If you would like to display your text in bold, you can do so with the bold HTML tag.
- HTML Code
- HTML code viewed within an HTML document:
<b>Hello World</b>
- Browser View
- HTML coding viewed through a web browser:
Hello World
Strong <strong></strong>
The strong tag is similar to the bold tag and is used to make your text stronger and darker.
- HTML Code
- HTML code viewed within an HTML document:
<strong>Hello World</strong>
- Browser View
- HTML coding viewed through a web browser:
Hello World
Italics <i></i>
If you would like to italicize your text, you can do so with the italics tag.
- HTML Code
- HTML code viewed within an HTML document:
<i>Hello World</i>
- Browser View
- HTML coding viewed through a web browser:
Hello World
Emphasis <em></em>
The emphasis tag is similar to the italics tag and is used to emphasize your text.
- HTML Code
- HTML code viewed within an HTML document:
<em>Hello World</em>
- Browser View
- HTML coding viewed through a web browser:
Hello World
Heading Tags <hx></hx>
Heading tags are used to format heading and sub headings. They separate topics and range from <h1> being very large and bold to <h6>, which is very small and bold. You may start with any size heading you choose and work your way down to smaller headings. However, if you begin your page with <h3> for example, any other headings below must be <h3> or smaller. Make sure you keep your headings in sequence.
- HTML Code
- HTML code viewed within an HTML document:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
- Browser View
- HTML coding viewed through a web browser:
Headings are not required, but consider using at least one toward the top of your page, as some Search Engines place emphasis on the keywords within your heading tags. Your page heading should contain your most relevant keyword phrase. Not all Search Engines place relevance on “heading” tags; however, many do and it is well worth the effort.
Paragraph <p></p>
Paragraph tags are used to format your paragraphs.
- HTML Code
- HTML code viewed within an HTML document:
<p>This is an example paragraph formatted with the paragraph tags.</p>
<p>This is an example paragraph formatted with the paragraph tags.</p> - Browser View
- HTML coding viewed through a web browser:
This is an example paragraph formatted with the paragraph tags.
This is an example paragraph formatted with the paragraph tags.
Line Break <br />
Line breaks are used to place a line break within a sentence and begin a new line. It functions just like a word processing program does when you press the ‘Enter’ key. Place the <br /> directly in front of the text that you would like to be moved to the next line.
The line break tag is an empty tag, meaning that it doesn’t have a closing tag.
- HTML Code
- HTML code viewed within an HTML document:
This is an example<br /> of using the line break tag.
- Browser View
- HTML coding viewed through a web browser:
This is an example
of using the line break tag.
Horizontal Rule <hr />
The <hr /> tag is used to divide subjects within your web page. When placed within your HTML, it will display a horizontal line. Place the <hr /> tag where you would like the line to appear.
The horizontal rule tag is an empty tag, meaning that it doesn’t have a closing tag.
- HTML Code
- HTML code viewed within an HTML document:
This is an example of using the <hr /> tag.
<hr />
This is an example of using the <hr /> tag. - Browser View
- HTML coding viewed through a web browser:
This is an example of using the <hr /> tag.
This is an example of using the <hr /> tag.
This concludes the HTML Formatting tutorial. In the next section, we will focus on HTML colors.