Controlling Text Size and Formatting  pwp home  >   Reference Library  >   HTML Tutorials  >  text & Formatting

Once you have your basic page ready, it's time to begin adding your information (content) to it. The HyperText Markup Language provides few options when attempting to get blank areas on your page (white space). While you do have control over text size, it's difficult to get text and images placed exactly where you want them. There is no TAB tag that allows you to control the spacing of your text, and any extra spaces, indenting, or carriage returns between lines and words are ignored and are condensed into a single space.

HTML does offer some tags that allow you to control the size of your text in order to provide a little visual interest to your page, as well as to break up your page into "sections". The tags listed below allow you to control text size and some page formatting.

HTML Tag	Attributes (options)	Description
P	Identifies the start of a new paragraph. When used, this tag will issue a carriage return and a blank line before displaying the next line of text. NOTE: None of the four browsers tested allow the use of multiple paragraph tags to create extra white space. Multiple <P> tags in a row will be ignored.
	This an example using <P> the paragraph tag. This is an example using the paragraph tag. This an example using <P><P><P> three paragraph tags. This is an example using three paragraph tags.
	ALIGN="center|right"	Specifies the placement of your paragraph. If not specified, the paragraph is aligned "left". When this option is used, an ending paragraph tag (</P>) is required. NOTE: Align RIGHT is not supported by Microsoft's Internet Explorer v2.x, but CENTER is.
	<P>This is a normal paragraph</P> This is a normal paragraph. <P ALIGN="center">This is a centered paragraph</P> This is a centered paragraph. <P ALIGN="right">This is a right aligned paragraph</P> This is a right aligned paragraph.
BR	The line break tag is used to end the current line and begin displaying the next line immediately following (with no white space between them). NOTE: Of the four browsers tested, only Mosaic does not support the use of multiple line break tags to create extra blank lines (white space) on your page. Although the others do support it, each one displays the spacing between these lines slightly different.
	This an example using <BR> the line break tag. This is an example using the line break tag. This an example using <BR><BR><BR> three line breaks. This is an example using three line breaks.
	CLEAR="all|left|right"	For more information on how this attribute is used, see the Using Images and Sound page.
	<BR CLEAR="all"> <BR CLEAR="left"> <BR CLEAR="right">
HR	align=left|center|right color="#nnnnnn" noshade size=n width=n	The horizontal rule tag is used to end the current line and begin displaying the horizontal immediately following the line being broken. ALIGN draws the rule left-aligned, right-aligned, or centered. The align-type can be LEFT, RIGHT, or CENTER. (If no ALIGN atribute is specified, the default is center). COLOR sets the color of the rule. The color can be either a hexadecimal, red-green-blue color value or a predefined color name. NOSHADE draws the rule without 3-D shading. SIZE sets the height of the rule, in pixels. WIDTH sets the width of the rule, either in pixels or as a percentage of window width. (To specify a percentage, the n must end with the percent (%) sign.) NOTE: The COLOR attribute of the HR tag is not generally supported within tables.
	This an example using <HR> the horizontal rule tag with size=5, width=85 and align=left. <hr size=5 width=85 align=left> This an example using <HR> the horizontal rule tag with size=8, width=85 and align=center. <hr size=8 width=85 align=center> This an example using <HR> the horizontal rule tag with align=right, width=85 and noshade. <hr align=right width=85 noshade>
Hn	Defines heading levels for your page, where "n" represents a number from 1 thru 6, with 1 being the largest text size. NOTE: Although all browsers support this tag, they each display the heading sizes slightly different. Also keep in mind that a visitor to your page may have changed the default fonts on their browser, which means they may not see your page exactly the way you intended.
	<H1>Heading 1</H1> Heading 1 <H2>Heading 2</H2> Heading 2 <H3>Heading 3</H3> Heading 3 <H4>Heading 4</H4> Heading 4 <H5>Heading 5</H5> Heading 5 <H6>Heading 6</H6> Heading 6
	ALIGN="center|right"	Specifies the placement of your heading. If not specified, the heading is aligned "left". NOTE: Align RIGHT is not supported by Microsoft's Internet Explorer v2.x, but CENTER is.
	<H3>Aligned Left<H3> Aligned Left <H3 ALIGN="center">Aligned Center<H3> Aligned Center <H3 ALIGN="right">Aligned Right<H3> Aligned Right
BASEFONT	SIZE=n	Changes the default text size throughout your page to the number (1 thru 7) represented by n, with seven being the largest text size, and three being the default base font size. Typically, this tag is placed immediately following the <BODY> tag.
	If you use <BASEFONT SIZE=5>, the text on your page might look something like this: This is what your page might look like with a BASEFONT of 5.
FONT	SIZE=n	Allows you to change the font size of text in the BODY of your page to the number (1 thru 7) represented by n, with 7 being the largest text size. When this tag is used, an ending FONT tag (</FONT>) is required. NOTE: Although three of the four browsers tested support this tag, each of them displays font sizes slightly different.
	<FONT SIZE=1>Font Size=1</FONT> Font Size=1 <FONT SIZE=2>Font Size=2</FONT> Font Size=2 <FONT SIZE=3>Font Size=3</FONT> Font Size=3 <FONT SIZE=4>Font Size=4</FONT> Font Size=4 <FONT SIZE=5>Font Size=5</FONT> Font Size=5 <FONT SIZE=6>Font Size=6</FONT> Font Size=6 <FONT SIZE=7>Font Size=7</FONT> Font Size=7
	SIZE=+n|-n	Allows you to specify the font size of text in the BODY of your page, relative to the BASEFONT.
	If you have not specified a BASEFONT, FONT SIZE=+n|-n might look something like this: <FONT SIZE="-2">Font Size=-2</FONT> Font Size=-2 <FONT SIZE="-1">Font Size=-1</FONT> Font Size=-1 <FONT SIZE="+1">Font Size=+1</FONT> Font Size=+1 <FONT SIZE="+2">Font Size=+2</FONT> Font Size=+2 <FONT SIZE="+3">Font Size=+3</FONT> Font Size=+3 <FONT SIZE="+4">Font Size=+4</FONT> Font Size=+4
	COLOR="#xxxxxx|colorname"	Allows you to specify the color of text in the BODY of your page, and temporarily override the default TEXT color specified on the BODY tag. For more detailed information on the use of this option, see the Text and Background Colors page. NOTE: Of the four browsers tested, only Mosaic does not provide support for this option.
	This is a Font Size of 5 in <FONT SIZE=5 COLOR="#ff0000> red</FONT> using an RGB hex code. This is a Font Size of 5 in red using an RGB hex code. This is a Font Size of 5 in <FONT SIZE=5 COLOR="#ff0000> red</FONT> using an RGB hex code. This is a Font Size of 5 in red using a colorname.