HTML Tutorial

Chapter 2: Text and Lists

This chapter will go more in depth about how to create text in a page and do some formatting to it. It will also show how to create lists.

We have already seen how the <p> element creates a paragraph, but you can simply enter text where you like and it will show up. The paragraph element simply puts a space between itself and any text above or below it. To move text (or anything else for that matter) to the next line, we can use the <br /> element.

Here is some text<br />
Here is a new line
<p>Here is a paragraph</p>

Here is some text
Here is a new line

Here is a paragraph

Headers

We have seen the <h1> element before, but that is only one of many header elements. The number 1 can be replaced with any number from 1 to 6. <h1> is the largest, while <h6> is the smallest.

<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Modifying Text

There are also several elements that can modify text in certain ways:

<b> creates bold text
<i> creates italic text
<big> increases the size of text
<small> decreases the size of text
<sup> creates superscript
<sub> creates subscript

<b>bold</b>text
<i>italic</i> text
<big>big</big> text
<small>small</small> text
<sup>superscript</sup> text
<sub>subscript</sub> text

boldtext
italic text
big text
small text
^superscript text
_subscript text

Ordered and Unordered Lists

<ol> creates an ordered list
<ul> creates an unordered list
<li> defines a list item

Ordered List:
<ol>
<li>Apples</li>
<li>Oranges</li>
</ol>
Unordered List:
<ul>
<li>Linux</li>
<li>Apache</li>
<li>MySQL</li>
<li>PHP</li>
</ul>

Ordered List:

Apples
Oranges

Unordered List:

Linux
Apache
MySQL
PHP