Document Formatting


  1. Headings
  2. Paragraph
  3. Bold
  4. Center
  5. Italics
  6. Line Breaks
  7. Horizontal Rule
  8. Unordered (un-numbered) List
  9. Ordered (numbered) List
  10. HTML Attributes
    1. Width
    2. Alignment
    3. Common Attributes
  11. HTML Font Code
    1. Quick Example
    2. Font Family
    3. Font Size
    4. Color
    5. Bold
    6. Italic Text
  12. Useful Tips
    1. Don't Forget the End Tag
    2. Empty HTML Elements
    3. Use Lowercase Tags

Headings

The "h" tag specifies headers in HTML.

There are 6 levels of headings in HTML ranging from h1 for highest level, to h6 for the lowest.

Typing this code:

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

Results in this:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

The "p" tag specifies a paragraph in HTML.

        <p>This is the first paragraph.</p>
<p>And this is the second one.</p>

Results in this:

This is the first paragraph.

And this is the second one.


Strong

The "strong" tag turns text into bold in HTML.

        <p>In a paragraph, <strong>part of the text</strong> could be turned into bold.</p>
      

Results in this:

In a paragraph, part of the text could be turned into bold.


Center

The "center" tag centers text in HTML.

        <center>CENTERED TEXT</center>
      

Results in this:

CENTERED TEXT



Emphasis

The "em" tag turn the text into italics in HTML.

        <em>This text is italicized.</em>
      

Results in this:

This text is italicized.


Line Breaks

The "br" tag breaks a line in HTML.

        <p>Here is a...<br>line break.</p>
      

Results in this:

Here is a
line break.


Horizontal Rule

The "hr" tag generates a horizontal rule in HTML.

        Here's a horizontal rule...
        <hr />
<p>...that was a horizontal rule :-)

Results in this:

Here's a horizontal rule...
...that was a horizontal rule :-)


Unordered (un-numbered) List

The "ul" tag generates an unordered list in HTML.

        <ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

Results in this:


Ordered (numbered) List

The "ol" tag generates an ordered list in HTML.

        <ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>

Results in this:

  1. List item 1
  2. List item 2
  3. List item 3

HTML Attributes

Attributes can be added to a tag providing more information about how the tag should appear or behave.

Attributes consist of a name and a value separated by an equals (=) sign.

Here are some examples

Width

Defines the width of the HTML element

        <hr color="blue" style="margin: 10px;" width="80%" size="3" />
      

This results in:




Alignment

Aligns HTML elements to the left, right, or center:

        <h3 align="left">Aligned left</h3>
<h3 align="center">Aligned center</h3>
<h3 align="right">Aligned right</h3>

This results in:

Aligned left

Aligned center

Aligned right



Common Attributes

Some attributes are common across most tags, others can only be used on certain tags.

More common attributes:

AttributeDescriptionPossible Values
widthSpecifies the width of an element(Numeric value)
heightSpecifies the height of an element(Numeric value)
alignSpecifies the horizontal alignment of an elementleft, center, or right
classUsed with Cascading Style Sheets (CSS)(the name of a class)
styleUsed with Cascading Style Sheets (CSS)(style information)
titleCan be used to display a "tool tip" for your elements.(You supply the text)

Attributes are optional, and generally have a default value.



HTML Font Code

Quick Example

The following font code sets common properties such as font size, line height, font family, and font color.

        <p style="font: 14pt/20pt Garamond, Georgia, serif;color:#228B22;">
This font is 14pt, the line height is 20pt, it's color is ForestGreen, and the
font family will be 'Garamond'. If the user's computer doesn't have 'Garamond',
it will use 'Georgia'. Failing that it will use the default 'serif' font on the
user's computer (this is often 'Times' or 'Times Roman' - just leave it as 'serif').
You can also specify <span style="font-weight:bold;">bold text</span>
and <span style="font-style:italic">italics</span> if you wish!</p>

This results in:

This font is 14pt, the line height is 20pt, it's color is ForestGreen, and the font family will be 'Garamond'. If the user's computer doesn't have 'Garamond', it will use 'Georgia'. Failing that it will use the default 'serif' font on the user's computer (this is often 'Times' or 'Times Roman' - just leave it as 'serif'). You can also specify bold text and italics if you wish!


Font Family

If you only want to specify the font family, you can use the 'font-family' property:

        <p style="font-family:Garamond, Georgia, serif;">
HTML font code is just specifying the font family.</p>

This results in:

HTML font code is just specifying the font family.



Font Size

If you only want to specify the font size, you can use the 'font-size' property:

        <p style="font-size:20pt;">
HTML font code is just specifying the font size.</p>

This results in:

HTML font code is just specifying the font size.


Color

If you only want to specify the font color, you can use the 'color' property:

        <p style="color:orange;">
HTML font code is just specifying the font color.</p>

The above code results in this:

HTML font code is just specifying the font color.


Bold

You can make your font bold by using the 'font-weight' property:

        <p style="font-weight:bold;">
HTML font code is just specifying the font weight.</p>

This results in:

HTML font code is just specifying the font weight.

If you only want to bold some of the text inline, you can use the HTML 'span' tag:

        <p>You can bold <span style="font-weight:bold">parts</span>
of your text using the HTML 'span' tag.</p>

This results in:

You can bold parts of your text using the HTML 'span' tag.


Italic Text

You can make your text italic by using the 'font-style' property:

        <p style="font-style:italic;">
HTML font code is just specifying the font as italics.</p>

This results in:

HTML font code is just specifying the font as italics.

If you only want to make some of the text italic, you can use the HTML 'span' tag:

        <p>You can make <span style="font-style:italic">some</span>
of your text italic using the HTML 'span' tag.</p>

This results in:

You can make some of your text italic using the HTML 'span' tag.


Useful Tips

Don't Forget the End Tag

Even if you forget the end tag, most browsers will format the HTML correctly:

        <p>This is a paragraph
<p>This is a paragraph

The above code will work fine in most browsers

But forgetting the end tag can produce unexpected results or errors.

Warning: Last HTML versions (XHTML) doesn't allow you to skip end tags.



Empty HTML Elements

"Empty HTML Elements" are HTML elements without content.

Empty elements can be closed in the start tag.

<br> for instance, is an empty element without a closing tag (it defines a line break).

Adding a slash to the start tag, like <br />, is the proper way of closing empty elements.

That is the only way it will be accepted by future versions of XHTML and XML.

HTML5 supports both formats with or without the final slash.



Use Lowercase Tags

HTML tags are not case sensitive, so: <P> means the same as <p>.

Many web sites and software generated pages, use uppercase HTML tags in their pages.

But the World Wide Web Consortium (W3C) recommends lowercase since HTML 4
and demands it in future versions of (X)HTML.

So, do it more future proof, make your HTML pages using lower case tags.