Liz Tiller
In my last article, I explained some of the basics of Search Engine Optimization and how to boost your online visitors. This time, I’m going to go over the basics of HTML so you can fine tune your website and continue to grow your online presence.
You might be thinking “I’m using a theme and a website builder like Wix or Wordpress, why do I need to know this?” The answer is you don’t. If you find the perfect theme then don’t worry about it. However, after being hired to tweak sites using builders and themes, I’ve found that sometimes some good old fashioned code is necessary to really elevate a site. So let’s save you some time, money and frustration by learning a little HTML.
HTM-what now?
Think of HTML, or Hypertext Markup Language, as the basic shimmy of web development. Like the shimmy is a foundational move in belly dance, HTML is the foundation of every good website, and every website you visit is built with it. Don’t believe me? Right click on this page and select “Inspect”. A sidebar within the screen will pop up with Elements and Styles.
Caption: Your sidebar might actually be on the left, the top, bottom or an entire tab on its own.
It might look like a lot of gibberish right now, but don’t worry. You don’t need to understand everything and unless you are someone who likes “looking under the hood” you will never need to access this again. In the next article, I’ll go over what is involved with styles but just like you can’t layer your shimmies without first learning the moves separately, you need to learn HTML first.
Adding HTML to your site
Most website builders will provide lots of elements that you can arrange on the page. Everytime you add one, the builder adds HTML code to the HTML document. Most builders will also allow the ability to edit an existing element or even add a block of code directly to the page. About 99% of the time, you will be fine with what is given, but what if it only allows you to put 3 images in a block and you want a 4th one? Or it gives you a numbered list but you don’t want those numbers? All you have to do is click on the edit widget on that block and make some changes!
Elements and Tags
HTML is a series of elements that use tags. Those tags look like this:
<p>I’m a paragraph element!</p>
<h1>I’m a heading 1 element!</h1>
Pay close attention to those opening tags with <p></p> and <h1></h1>. The text or content will live between the two tags. The most common and easiest mistake people make is adding an element but not closing it. Always make sure you close your HTML tags! If you close your tag you will only see the text. If you don’t, you will see the code and things will get screwy.
Every element has an opening and closing tag except for images, which will look like:
<img src=”https://link.to.your.image.com” alt=”this is where we but that alternative text that helps with SEO results” />
Make sure if you add an img tag that it is self closing.
HTML elements can be nested inside other elements. The most common ones you will see are lists. In HTML there are ordered lists (ol), which display a numbered list, and unordered lists (ul), which will give you a bulleted list. Lists consist of either of those tags and then list items (li) that nest in between the list tags.
An example of an unordered list would be:
<ul>
<li>first list item</li>
<li>second list item</li>
<li>third list item</li>
</ul>
To get a numbered list, simply replace ul in both the opening and closing tags with an ol.
Links are probably the most difficult to remember because they are referred to as anchor elements. They can link to sections on your page, other website URLs and even emails. An example of a link to another site would be:
<a href=”https://www.google.com>Google</a>
But if you want to make a link to your email you can do:
<a href=”mailto:youremail@email.com”>Email me</a>
In my initial example, I used p and h1 which stand for paragraph and heading 1. There are actually 6 different levels of headings you can use, that automatically decrease in size and importance as you increase the number. Therefore h1 is more important and bigger than h6. To improve your search engine results, make sure you only have one h1 and a max of two h2 elements per page, the rest can be as many as you want. Inside either of these text elements, if you want to add emphasis to something you can use em like this:
<p>This is a paragraph with <em>emphasis</em></p>
The em tag will italicize whatever it surrounds.
Putting it together
HTML is a great tool to learn and because it’s declarative it’s fairly simple. That said, it’s always best to see it in action. I’ve created a mini site with all the examples I’ve used today at https://html-shimmy.glitch.me/. You can go there and see these examples in action, and if you right click and select inspect, you can even see the code.
Next time we will learn about CSS and styling our website!
Liz Tiller is a developer, educator and belly dance student. You can find more information about her at www.elizabethtiller.com. She lives in Tampa with her husband and 5 cats. She occasionally performs under the name Apassionata.