Formatting and Laying Out Text

You can use HTML tags to format and layout text in a number of ways. Below, you'll find the tags needed to cause text to appear in various sizes, faces, and effects. You'll also find tags that help you control the width and alignment of text on a page, as well as breaks and horizontal rules.

Font Size: Document Headings

<H1> – Heading One – </H1>

<H2> – Heading Two – </H2>

<H3> – Heading Three – </H3>

<H4> – Heading Four – </H4>

<H5> – Heading Five – </H5>

<H6> – Heading Six – </H6>

Font Size: Relative Sizing with the <FONT> Tag

<FONT Size="-2"> – Minus Two – </FONT>

<FONT Size="-1"> – Minus One – </FONT>

<FONT Size="+1"> – Plus One – </FONT>

<FONT Size="+2"> – Plus Two – </FONT>

<FONT Size="+3"> – Plus Three – </FONT>

Font Size: Absolute Sizing with the <FONT> Tag

<FONT Size="1"> – Font Size = 1 – </FONT>

<FONT Size="2"> – Font Size = 2 – </FONT>

<FONT Size="3"> – Font Size = 3 – </FONT>

<FONT Size="4"> – Font Size = 4 – </FONT>

Font Size: Relative Sizing with the Small and Big Tags

<SMALL> – Small Text – Displays One Size Smaller Than the Body Font – </SMALL>

<BIG> – Big Text – Displays One Size Bigger Than the Body Font – </BIG>

Font Faces and Effects

<B> – Boldface type – </B>

<I> – Italics – </I>

<U> – Underlined text – </U>

<STRIKE> – Strike-Through Text – </STRIKE>

<TT> – Typewriter face (or Teletype) – </TT>

<STRONG> – Strong – </STRONG>

<SUB> – Subscript – </SUB>

<SUP> – Superscript – </SUP>

<BLINK> – Blinking text – </BLINK> (Note: This only works in Netscape browsers)

<PRE> – Preformatted    Text

    Allows you to control the display of text exactly as it's typed into
	a
	document, preserving line breaks     and    extra spaces – </PRE>

<MARQUEE width="300">Note: The Marquee Tag only works in Internet Explorer</MARQUEE>
Note: The Marquee Tag Only Works in Internet Explorer

Font Color and Face

<FONT COLOR="Red"> – Font color – </FONT>

<FONT COLOR="#FFOOOO"> – Font color – </FONT>

<FONT Face="Times New Roman,Times,Chicago,sans-serif" Color="Blue"> – Specifying Font – </FONT>

Page Layout: Using Paragraphs and Alignment Tags

<P> – Paragraph Break

<P ALIGN="LEFT"> – Paragraph Aligned Left (which is usually the default)</P>

<P ALIGN="RIGHT"> – Paragraph Aligned Right </P>

<P ALIGN="CENTER"> – Paragraph Aligned Center</P>

<BR> – Line Break

<CENTER> – Center Text – </CENTER>

<BLOCKQUOTE> – Indent Text – </BLOCKQUOTE>

Page Layout: Using <DIV> Tags

<DIV ALIGN="CENTER"> – Text Aligned Center</DIV>

<DIV ALIGN="RIGHT"> – Text Aligned Right</DIV>

<DIV ALIGN="CENTER" Style="margin-left: 50px;"> – Text Indented 50 pixels</DIV>

<DIV ALIGN="CENTER" Style="margin-left: 50px; margin-right: 50px;"> – Text Indented 50 pixels from Right and Left Margins</DIV>

Horizontal Rules

<HR> – Horizontal Line

<HR SIZE="10"> – Horizontal Line, Thickness set to 10 Pixels

<HR SIZE="10" NOSHADE> – Horizontal Line, Thickness set to 10 Pixels, Solid Line

<HR WIDTH="100"> – Horizontal Line, Width set to 100 Pixels

<HR WIDTH="80%"> – Horizontal Line, Width set to 80 Percent of Window

<HR WIDTH="80% ALIGN="RIGHT"> – Horizontal Line, Width set to 80 Percent of Window, Aligned Right

<HR WIDTH="80%" ALIGN="CENTER"> – Horizontal Line, Width set to 80 Percent of Window, Aligned Center (the default value)

<HR WIDTH="80%" ALIGN="LEFT"> – Horizontal Line, Width set to 80 Percent of Window, Aligned Left

<HR SIZE="10" COLOR="RED"> – Horizontal Line, Thickness set to 10 Pixels. Colored Red

See Also
Links Page: Learn more about HTML on the HTML links page.

Coding Primer: In addition to formatting text, you can also add images to your pages. View Displaying Images to learn more about working with images.