HTML Text Formatting

HTML contains several elements, tags and attributes, to display text in multiple formats with different layouts.

Text align

The text alignment can be defined with the text-align:value; css property, in style. The 'value' can be: left, center, right (default is left).

<div style="text-align:center;"> This text is displayed in the center of the Div. </div>

Size, font and color of text

In the style attribute you can add CSS properties to control the type, size, and color of the text displayed in the browser.
- The typeface can be changed with the css font-family:'font_type'; property.

<div style="font-family:'Arial Black';">This is the Arial Black font.</div>

- The text size can be changed with the css font-size property.

- The text color can be changed with the css color property, with a value of type: '#RRGGBB' or 'color name'.

<div style='colo:r#00c000;'>Text with font color #00c000</div>

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>

- Often <strong> renders as <b>, and <em> renders as <i>. But <strong> or <em> means that you want the text to be rendered in a way that the user understands as 'important'.
Example:

<b> bold </b>
<i> italic </i>
<u> underline </u>
<em> emphasized </em>
<strong> strong </strong>

Other HTML tags for text formatting

- 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).
<cite> cite tag </cite> - defines a citation - a reference to another work.

Example:

<pre>
Text within PRE tag after some space,
new line without a BR
</pre>
<cite>Example of cite</cite>

- Set 2:

<del> ... </del> - Indicates deleted text.
<small> </small> - Defines small text.
<sub> ... </sub> - Subscripted text.
<sup> ... </pre> - Superscripted text.

Example:

<del>Deleted text</del><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>

- Set 3 (The following tags are used for documents with technical applications):

<code> ... </code> - Defines computer code text.
<dfn> ... </dfn> - Indicates a definition term.
<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.

Example:

<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>Example with <kbd>text in kbd</kbd> and some <var>$php_var</var>.</p>

- 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

Example:

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: https://coursesweb.net/html</address>

<<-Paragraphs, Line break, Horizontal .. -- HTML Lists - UL, ..->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag adds an image in web page?

<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />

Which of these CSS codes displays the text oblique?

font-style: italic; text-decoration: underline; font-weight: 500;

#id {
  font-style: italic;
}

Click on the jQuery function used to hide with animation a HTML element.

click() hide() show()

$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});

Click on the correctly defined function in PHP.

fname function() {} function fname() {} function $fname() {};

function fname($a, $b) {
  echo $a * $b;
}

HTML Text Formatting

Html Course

Text align

Size, font and color of text

Bold, Italic, Underline and other elements

Other HTML tags for text formatting

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Last accessed pages

Popular pages this month