Skip to content

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 <sub>subscripted</sub> text.</p>

HTML <sup> Element

The HTML <sup> element defines superscripted text.

Example :-   <p>This is <sup>superscripted</sup> 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:

1

 

2

3

4

5

6

7

8

9

10

11

12

13

14

&amp;lt;pre&amp;gt;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!&amp;lt;/pre&amp;gt;

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 

 tag along with the style attribute to create columns in an individual post or page.

 

For example, to split your content in two columns, you would use the following code:

1

 

2

3

4

5

6

7

8

9

10

11

12

13

Your content for your column #1

Your content for your column #1

Your content for your column #1

 

 

Your content for your column #2

Your content for your column #2

Your content for your column #2

 

<hr style=”clear:both; visibility: hidden;”>

 

 

This will create something like this:

Your content for your column #1
Your content for your column #1
Your content for your column #1

Your content for your column #2
Your content for your column #2
Your content for your column #2

You can play with the values for width and padding to tweak your columns. This allows you to adjust the spacing between them, create columns of different widths, and make sure more columns fit your post or page in case you add them.

For example, for three columns, you would use the following code:

1

 

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

Your content for your column #1

Your content for your column #1

Your content for your column #1

 

 

Your content for your column #2

Your content for your column #2

Your content for your column #2

 

 

Your content for your column #3

Your content for your column #3

Your content for your column #3

 

<hr style=”clear:both; visibility:hidden;”>

 

 

Note how we changed the width attribute to 30% to make sure we could fit another column.

4. Tables

Copying and pasting tables from other applications (such as Microsoft Word) into your post or page doesn’t work. However, you can create simple HTML tables right in the HTML editor.

To do this, try some HTML similar to the following:

<table><tr><td>Number of tables</td><td>1</td><td>2</td></tr></table>

2 Comments »

Leave a Reply

error: Content is protected !!
%d bloggers like this: