Styling Tags

One of the great things about web pages is the ability to style text. Things such as bold and italics help bring focus to text while adding a line break or indentation in the right spot can also draw quite a bit of attention. Many tools, such as WordPress, provide the ability to use editing tools that are similar to a word processor such as Word. Sometimes, though, it can be difficult to get that section of text highlighted just right.

You can do some pretty cool formatting by just learning four tags:

  • bold – <strong>
  • italics – <em> (emphasize)
  • line break – <br>
  • indent – <blockquote>

Bold (<strong>)

First, the <strong> tag provides the ability to draw attention to make text appear stronger, which translates to bold. For example, to make bring more attention to the statement:

For writing to be effective, you must often make bold statements.

Adding the <strong> tag:

<p>For writing to be effective, you must often make <strong>bold statements</bold>.</p>

Yields:

For writing to be effective, you must often make bold statements.

Italics (<em>)

Another common way to draw attention text is to use italics. The <em> tag (called emphasize) will draw attention to text in italics. So, using the sample text:

It is important to empahsize what you are seeing not only with words but with style.

Adding the <em> tag:

<p>It is important to <em>empahsize what you are seeing</em> not only with words but with style.</p>

Yields:

It is important to empahsize what you are seeing not only with words but with style.

Line Break (<br>)

One frusturation when editing blog posts and web pages in an editing tools is line space. Using the tool usually creates an extra line, so you get:

one

two

three

The problem is that the editor treats every line as if its a separate paragraph. Thus, the web editor creates the code:

<p>one</p>
<p>two</p>
<p>three</p>

To create a single spaced list, you change the code to:

<p>one<br>
two<br>
three</p>

And see:

one
two
three

 Anywhere you add a <br> tag, a new line will be started there!

(Note – the <br> is one of those special tags does not require a closing tag!)

Indent (<blockquote>)

As you may have notice throughout the three previous sections, the examples are all indented. While web editors may use different methods for indenting, one easy way is the <blockquote> tag. When a section of text is placed in a <blockquote> the text (or images or video) is shifted to the left. So, text on the left such as:

Here is some text on the left.

can be easily shifted using <blockquote>:

<blockquote>Here is some text on the left.</blockquote>

becomes:

Here is some text on the left.

For more information on <strong>, <em>, <br> and <blockquote>, check out this pages on W3Schools.com: