Whether you work in the marketing field or you simply want to update your personal blog or website, knowing the basics of HTML can eliminate a lot of headaches. Most people are a little intimidated by the thought of trying to learn how to code a website, but HTML is lot simpler than you think. A basic knowledge of HTML will make building landing pages, blogs and email campaigns 10 times easier, as well as save you lots of time and money dealing with a third-party contractor.
You might be thinking that there is no way you’ll ever learn all this coding gibberish, but we’re confident that these four pieces of HTML knowledge will help you design great pages for your website.
1. HTML Tags
An HTML tag is basically a markup made up of < and > brackets that contain a word or character within the bracket. The content within these brackets describe how you want the content on your page to appear. For example, to structure a paragraph you would structure your HTML like this:
<p>This is your paragraph, even if it only contains one sentence.</p>
Here are some basic tag codes to help you on your merry way:
Single Line Break: <br>
Double Line Break: <p>
Bold: <b>Text goes here</b>
Italic: <i>Text goes here</i>
Strikethrough: <s>text</s>
2. Headers
The header tag specifies what text should act as the header for your page, email, document, etc. Your header usually contains some type of introductory content, but you can have lots of header text on one page. Take this post for example. Every HTML tip is formatted with header text, making it easy for readers to organize and read the content on this page.
Many WordPress or email themes have pre-programmed headers, and each is typically numbered 1-6. For example, consider the three different header treatments below:
Header 1
<h1> This is how header 1 HTML code will look </h1>
Header 2
<h2> This is how header 2 HTML code will look </h2>
Header 3
<h3> This is how header 3 HTML code will look </h3>
3. Hyperlinks
A hyperlink if basically a link to another Website, document or file location. You can create hyperlinks by using the following code:
<a href=”http://staging.alexanders.com”>Hyperlink Text</a>
The URL within the parenthesis will be the location you want your text to link to.
4. Images
Visual content is extremely important when blogging, creating a website or building an email, so you’ll definitely want to include images into your code. The code for including an image is as follows:
<img src=”image file URL” width=”300″ height=”200″ alt=”keyword description”>
Notice that there are a few more elements to this type of code. First, you have the image file URL. This is the URL where you find the image. You may have to upload an image to your website or blog, in which case, a URL will be created that tells the Internet where that image file lives. When you want to insert a specific photo into a post or onto a page, copy the image file URL into that portion of the code.
Next, you have the image size. When determining the size, make sure the digits you enter are proportional to the original size of the image. The last element of the image code is your keyword description. This is important for SEO purposes. Google’s algorithm will associate this keyword description with your image. Use this keyword description to describe your image in order to optimize it for search engines.
You can find more basic HTML resources here.
If you need help with online marketing or website development, contact us today. We would love to help.
