Have you ever needed to tweak an email you need to send in an email program, like Mailchimp or Constant Contact, and just can’t seem to get the thing to look the right way?

Or have you ever needed to make just one little change on a web page and just don’t know how to make it happen? And maybe your website developer is already off the clock and not answering their phone or email.

We’ve experienced this and know of other local business owners that have too. This post may help you make it home in time for dinner if this ever happens to you again.

Editing HTML

The trick to getting these not-quite-right emails or web pages to look just right is editing the page’s HTML. The language that actually tells email clients and web browsers how to display a page.

The editing software that comes with email systems like Mailchimp or blog systems like WordPress does a great job of hiding the HTML code from you so you don’t have to be a coding geek. But every now and then you will find that something will only display the way you want if you switch your editor to “code view” and look at the actual HTML.

For those business owners that have never tackled HTML before, we present here 7 of the most basic HTML tags and what they mean. These 7 tags appear all over the place in real world emails and web pages.

1. Paragraph tag: <p>

Nobody wants to read large unbroken blocks of text: placing a <p>, or the paragraph tag in your text, groups your text together and creates a blank space under your paragraph once closed with a </p>.

2. Break tag: <br>

<br> is similar to the <p> tag. It creates a break in text but without adding the blank space under the line.

3. Bold or strong tags: <b> or <strong>

<b> or <strong> gives text a bold look until closed with a </b> or </strong>.

4. Italicized or emphasized tags: <i> or <em>

<i> and <em> work in the same way as the bold tags but produce an italicized font until closed with the </i> or </em> tags.

b. Here’s how it looks on a web page or in an email:
The first half of this sentence has been italicized.

5. Heading tags: <h1>,<h2>, <h3>

Heading tags, ranging from <h1> to <h6> create larger text for important headings. They do not need to be contained by <p> tags, but must be closed with the appropriate </h1> through </h6>.

This is a Header

This is a Smaller Header

6. Hyperlink tag: <a>

Links to other web pages take a little extra effort than just writing the URL. The address must be copied into the tag: <a href=”Link URL here”>. The text that will display to the user for the link must be placed after this tag before close by </a>.

a. Here’s the HTML:
Clicking <a href=”http://www.wainscotmedia.com”>HERE</a> will take you to our website.

b. Here’s how it looks on a web page or in an email:
Clicking HERE will take you to our website.

7. List tag (for bullet points): <ul>

<ul> is a tag for creating bullet point lists on your web page. Once the tag is placed, each item of the list must be tagged separately with <li>, or list item, and closed with </li> before the entire list is closed with </ul>. By default, this type of list will indent and add a bullet point to each item.

a. Here’s the HTML:

• This is the first item of the list.
• This is the second item.