geekBits

Formating and Styling

HTML Text Formatting

This text is bold

This text is big

This text is italic

This is computer output

This is subscript and superscript
 
Try it yourself »

HTML Formatting Tags

HTML uses tags like <b> and <i> for formatting output, like bold or italic text.

These HTML tags are called formatting tags (look at the bottom of this page for a complete reference).


Text formatting
How to format text in an HTML document.

Preformatted text
How to control the line breaks and spaces with the pre tag.

“Computer output” tags
How different “computer output” tags will be displayed.

Address
How to define contact information for the author/owner of an HTML document.

Abbreviations and acronyms
How to handle abbreviations and acronyms.

Text direction
How to change the text direction.

Quotations
How to handle long and short quotations.

Deleted and inserted text
How to mark deleted and inserted text.

HTML Text Formatting Tags

HTML “Computer Output” Tags

HTML Citations, Quotations, and Definition Tags


RemarkOften <strong> renders as <b>, and <em> renders as <i>.

However, there is a difference in the meaning of these tags:

<b> or <i> defines bold or italic text only.

<strong> or <em> means that you want the text to be rendered in a way that the user understands as “important”. Today, all major browsers render strong as bold and em as italics. However, if a browser one day wants to make a text highlighted with the strong feature, it might be cursive for example and not bold! Examples

Try it Yourself - Examples

Tag Description <b> Defines bold text <big> Defines big text <em> Defines emphasized text  <i> Defines italic text <small> Defines small text <strong> Defines strong text <sub> Defines subscripted text <sup> Defines superscripted text <ins> Defines inserted text <del> Defines deleted text Tag Description <code> Defines computer code text <kbd> Defines keyboard text  <samp> Defines sample computer code <tt> Defines teletype text <var> Defines a variable <pre> Defines preformatted text Tag Description <abbr> Defines an abbreviation <acronym> Defines an acronym <address> Defines contact information for the author/owner of a document <bdo> Defines the text direction <blockquote> Defines a long quotation <q> Defines a short quotation <cite> Defines a citation <dfn> Defines a definition term

Look! Styles and colors

This text is in Verdana and red

This text is in Times and blue

This text is 30 pixels high

Example

<html>

<body style=”background-color:yellow”>
<h2 style=”background-color:red”>This is a heading</h2>
<p style=”background-color:green”>This is a paragraph.</p>
</body>

</html>
Try it yourself »

Example

<html>

<body>
<h1 style=”font-family:verdana”>A heading</h1>
<p style=”font-family:arial;color:red;font-size:20px;”>A paragraph.</p>
</body>

</html>
Try it yourself »

Example

<html>

<body>
<h1 style=”text-align:center”>This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>

</html>
Try it yourself » Tags Description <center> Deprecated. Defines centered content <font> and <basefont> Deprecated. Defines HTML fonts <s> and <strike> Deprecated. Defines strikethrough text <u> Deprecated. Defines underlined text Attributes Description align Deprecated. Defines the alignment of text bgcolor Deprecated. Defines the background color color Deprecated. Defines the text color
· 22/1/11 · Reblog