HTML Text Formatting
Formatting Tags
HTML contains several elements, tags and attributes, to display text in multiple formats with different layouts.<FONT> ... </FONT> tag
With the <font> tag you can control the typeface, type size, and color of the text displayed in the browser.- The typeface can be changed with the face attribute: <font face="typeface">text</font>
<font face="Arial Black">This is the Arial Black font.</font>
- The text size can be changed with the size attribute: <font size="value">text</font>
"value" is a number from 1 to 7, which sets the type size relative to the default size set in the browser (3 is the default).
Also, you can add a relative value "+n" or "-n" (based on the default).
<font size="+2">Font with +2 size</font>
- The font color can be changed with the color attribute: <font color="a_color">text</font>
color="#RRGGBB" or "color name".
<font color="#01ce02">Text with font color #01ce02</font>
The "<font> ... </font>" tag is an outdated method for affecting the style of the enclosed text. This element is no longer used in professional web design in favor of CSS style sheets for changing text appearance.
The <font> tag is not supported in HTML5.
Bold, Italic, Underline and other elements
Elements often used to format text (called formatting tags):- Bold - <b> ... </b>
- Italic - <i> ... </i>
- Underline - <u> ... </u>
- Emphasized - <em> ... </em>
- Strong - <strong> ... </strong>
Example:
<b> bold </b>
<i> italic </i>
<u> underline </u>
<em> emphasized </em>
<strong> strong </strong>
<i> italic </i>
<u> underline </u>
<em> emphasized </em>
<strong> strong </strong>
Other elements used for text formatting
- The set 1:- <pre> preformatted </pre> - the lines and character spaces are displayed exactly as they are typed in. Text within a <pre> element is displayed in a monospace font (usually Courier).
- <tt> teletype </tt> - renders as teletype text.
- <cite> cite tag </cite> - defines a citation - a reference to another work.
<html> <head> <title>Document Title</title> </head> <body> <pre> Text within PRE tag new line without a BR </pre> <tt>Teletype text</tt><br /> <cite>Example of cite</cite> </body> </html>This code will display:
Text within PRE tag new line without a BRTeletype text
Example of cite
- The set 2:
- <del> ... </del> - Indicates deleted text.
- <big> ... </pre> - Defines big text.
- <small> </small> - Defines small text.
- <sub> ... </sub> - Subscripted text.
- <sup> ... </pre> - Superscripted text.
<html> <head> <title>Document Title</title> </head> <body> <del>Deleted text</del><br /> <big>Display the text in bigger format</big><br /> <small>Display the text in smaller format</small><br /> <sub>Place text in subscript position</sub> Normal text <sup>Place text in superscript position</sup> </body> </html>This code will display:
Display the text in bigger format
Display the text in smaller format
Place text in subscript position Normal text Place text in superscript position
- The set 3 (The following tags are used for documents with technical applications):
- <dfn> ... </dfn> - Indicates a definition term.
- <code> ... </code> - Defines computer code text.
- <samp> ... </samp> - Indicates sample output from programs, scripts, and so on.
- <kbd> </kbd> - Stands for "keyboard" and indicates text entered by the user.
- <var> </var> - Indicates a variable.
<html>
<head>
<title>Document Title</title>
</head>
<body>
<p>DOM reference: <code>document.getElementById('id')</code></p>
<dfn>Truecolor</dfn> uses 24 bits per pixel.
<p>Provide alternative error messages to <samp>404 Not Found</samp>.</p>
<p>Enter your coupon code. Example: <kbd>AX4003</kbd></p>
<code><var>webSite</var> = 'coursesweb.net/html/';</code>
</body>
</html>
This code will display:
DOM reference: document.getElementById('id')
Provide alternative error messages to 404 Not Found.
Enter your coupon code. Example: AX4003
webSite = 'coursesweb.net/html/';
- The set 4:
- <q> ... </q> - Delimits a short quotation that can be included inline.
- <blockquote> ... </blockquote> - Indicates a long quotation. It's a block level element. The browser inserts white space before and after a blockquote.
- <address> ... </address> - Defines contact information for the author /owner of a document
<html> <head> <title>Document Title</title> </head> <body> I say: <q>If you want and you really believe, anything is possible.</q> <blockquote> <p>The unrequited joys can bring sadness and shared suffering can bring joy.</p> This is the first day of the rest of your life. <p>Patience with love and love with patience.</p> </blockquote> <address>HTML Course: http://coursesweb.net/html/</address> </body> </html>This code will display:
I say:
If you want and you really believe, anything is possible.
HTML Course: http://coursesweb.net/html/The unrequited joys can bring sadness and shared suffering can bring joy.
This is the first day of the rest of your life.Patience with love and love with patience.
Paragraphs, Line break, Horizontal ... <<-- Previous ----------- Next -->> HTML Lists