I realize many of you probably glazed over when you saw I’m talking about HTML today. I know it’s not the sexiest topic! However, I am passionate about making sure those of you that have a website and blog have some basic knowledge so you can identify simple errors and make small changes. I think it’s also just good sense to know a little bit about what keeps your site running. Note: This post contains affiliate links for your convenience.
What is HTML anyway?
HTML stands for Hypertext Markup Language. Quite simply, HTML is the code that tells your browser how to display the websites that you go to. If you have a website, you have HTML. Of course it’s not something the user sees, it’s only in the background. If you use WordPress, there is a “visual” tab where you do your posts and a “text” tab. If you click on the “text” tab you will see the code.
What does HTML do?
HTML has elements which consist of tags that wrap parts of the content. The tags are in < >. Let’s take a look at a sample sentence.
Stephanie loves chocolate peanut butter ice cream.
If I wanted to bold the word “loves”, I would use the element “strong” to change the style of my text and it would look like this.
Stephanie <strong>loves</strong> chocolate peanut butter ice cream.
The closing tag is always the same as the opening tag except it has a forward slash.
Now if I wanted to put “chocolate peanut butter” in italics, it would look like this.
Stephanie <strong>loves</strong> <em>chocolate peanut butter</em> ice cream.
Another style you may use frequently is a bulleted list. Again, you have your opening and closing tags, only this time you have tags for the list itself and then each item in the list. For instance, if you made a list of ice creams (I mean, why wouldn’t you make a list of ice creams!), it might look like this:
- chocolate peanut butter
- mint chocolate chip
The html for that list would look like this:
<li>chocolate peanut butter</li>
<li>mint chocolate chip</li>
The <ul> starts or opens the list. In this case it is <ul> because it is an unordered list (bullets). If you were numbering items, then it would be an ordered list <ol>. Next, each line item in the list starts with <li> and ends with the closing tag of </li>. Finally, the list closes with </ul>.
Lastly, one helpful one to remember is the html for a link. You may want to include a link in a text widget and it is super simple if you can remember this. Let’s say you wanted to link to my site (great idea!). You might reference it in a sentence like I’ve done below and then you would make the name of the site a link.
Check out SLM Consulting for a great post about HTML!
To add the link to “SLM Consulting” you would use the HTML for a link –
<a href=”url“>link text</a>. So the HTML in your sentence would look like this…
Check out <a href=”http://stephiswired.com”>SLM Consulting</a> for a great post about HTML!
Don’t worry, you don’t need to memorize all of this! But sometimes if something is looking a bit off in your text, it is helpful if you know enough html to be able to look through the html for errors. I also use it in my WordPress widgets.
If you would like to learn more, I love this book. I find the Dummies series easy to follow and this one even includes CSS. What is CSS? It goes hand in hand with HTML and dictates the look and feel of your site such as font size, font color, borders, etc.
So that’s our lesson for today. Questions? Comment below!
What would you like to learn more about? I would love to hear from you!