Basic and Advanced Text Formatting

HTML BASIC TEXT FORMATTING

HTML also defines special elements for defining text with a special meaning.

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

Formatting elements were designed to display special types of text:

• <b> – Bold text
• <strong> – Important text
• <i> – Italic text
• <em> – Emphasized text
• <mark> – Marked text
• <small> – Small text
• <del> – Deleted text
• <ins> – Inserted text
• <sub> – Subscript text
• <sup> – Superscript text

HTML <b> and <strong> Elements

The HTML <b> element defines bold text, without any extra importance.

Example :-  <b>This text is bold</b>

HTML <i> and <em> Elements

The HTML <i> element defines italic text, without any extra importance.

 Example :-  <i>This text is italic</i>

HTML <small> Element

The HTML <small> element defines smaller text

Example :-   <h2>HTML <small>Small</small> Formatting</h2>

HTML <mark> Element

The HTML <mark> element defines marked or highlighted text:

Example :-  <h2>HTML <mark>Marked</mark> Formatting</h2>

HTML <del> Element

The HTML <del> element defines deleted (removed) text.

Example :-   <p>My favorite color is <del>blue</del> red.</p>

HTML <ins> Element

The HTML <ins> element defines inserted (added) text.

Example :-   <p>My favorite <ins>color</ins> is red.</p>

HTML <sub> Element

The HTML <sub> element defines _subscripted text.

Example :-   <p>This is _subscripted text.</p>

HTML <sup> Element

The HTML <sup> element defines ^{superscripted} text.

Example :-   <p>This is ^{superscripted} text.</p>

BASIC AND ADVANCED TEXT FORMATTING

1. Preformatted text

For some types of blog posts (in particular poetry), you might want more control over your line breaks and indentation than the Visual editor typically offers.

To force the editor to preserve your indents and spacing, try using the we use the <pre> tag.

For example, take the following poem:

AH, broken is the golden bowl!    

The spirit flown forever!

Let the bell toll! — A saintly soul

Glides down the Stygian river!

And let the burial rite be read —

The funeral song be sung —

A dirge for the most lovely dead

That ever died so young!

And, Guy De Vere,

Hast thou no tear?

Weep now or nevermore!

See, on yon drear

And rigid bier,

Low lies thy love Lenore!

To achieve this formatting effect, you’d use the following code:

You can also apply the <pre> tag by using the dropdown style menu in the Visual editor, and choosing “Pre.”

2. Extra line breaks

The Visual editor leaves one blank line between each paragraph by default. If you attempt to add additional line breaks using the “enter” or “return” key, those spaces will be stripped out when you publish.

To force the editor to keep those spaces, you can add the following code in the HTML editor:

&nbsp;

You’d want to add that as many times as you want blank lines, so if you want three blank lines between two paragraphs, you’d add the following in your HTML editor:

&nbsp;
&nbsp;
&nbsp;

This is HTML for a non-breaking space. But a word of warning! If, after adding those spaces, you click back to the Visual editor before publishing or updating your post, those spaces will be stripped out again.

If you have trouble getting those spaces to stay, you can also use a bit of inline CSS to add extra line breaks.

To do this, wrap your paragraph in the following code:

<p style=”padding-top:14px;”>Your paragraph of text here.</p>

This tells the editor to leave 14 pixels of space above your paragraph. You can increase the number for more space or decrease it for less. You can also use “padding-bottom” rather than “padding-top” to add extra space below a paragraph instead of above it.

This looks a bit more complicated than the non-breaking space code discussed above, but it gives you more flexibility and control.

3. Columns

You can use the