Confused about HTML code? You’re not the only one.
I’ll admit it. When I started writing for the web, I knew zilch about HTML code. And I’ll admit it again. I still don’t know a lot.
However, I’ve found that a slight bit of HTML knowledge can make things a heck of a lot easier when writing for the web.
Sure, I don’t know how to build a website, but I do know how to tweak small components, and when I’m faced with an editing system that requires HTML code – which you’ll likely run across as well – I know enough to format my text correctly.
Want to eliminate that confusion and learn a bit about HTML coding? Let’s get started.
What is HTML Code?
You’ve seen it around, but you probably don’t know what all that HTML gibberish means.
It stands for Hypertext Markup Language. HTML is a standardized system used for formatting documents. The codes used—called markup tags—can format font, text size, color, hyperlinks, paragraphs, and more.
Web browsers read HTML and use the tags to determine how to display the content. An example of a tag is the one that creates bolded text, which looks like this:
<strong> This is bolded text. </strong>
On the page, it looks like this:
This is bolded text.
There have been many versions of HTML throughout the years, but as of October 2014, HTML5 is the standardized markup language of the web.
Why It’s Good for Bloggers to Know
While you may be able to get by without knowing any HTML as a blogger and doing a bit of cheating instead – such as using a program that converts your formatting to HTML language – knowing a couple of basic tags can really help as your blog.
Here are some situations in which I’ve personally found it useful:
- When guest blogging, some sites want your author bio written in HTML formatting. With a bit of knowledge, you’ll be able to add links and italics where needed.
- When something looks off, you can take a look at the HTML on the page and see what’s causing the problem.
- In online networking, you can use HTML tags to format blog post comments and forum comments.
- If you learn enough about HTML, you can start learning a bit about CSS and make minor tweaks to your website without hiring a designer.
Common Codes Bloggers Use
Before we jump in too deep, know that HTML tags are keywords encased in angle brackets. These tags come in pairs, and the text between the start tag and the end tag is what will be affected. The end tag is written the same as the start tag, but it uses a slash before the tag name.
Sound confusing? It’s easier if I give a couple of examples. Let’s take a look at some of the common HTML tags you should know as a blogger.
First comes the skeletal tags. These are ones you won’t necessarily use, but it does help to know them. These tags lay the foundation for the document, hence the term “skeletal tags”. They’ll be read by the web page but won’t be translated into visual elements.
Even so, it’s good to know. For instance, have you ever worked with a program that asks you to paste a code into your website’s “head” section? You’ll be able to find that with a bit of HTML knowledge. So here are a few skeletal tags you should know:
- <html> : This section describes the HTML document.
- <head> : This section provides information about the document.
- <title> : This provides the title of the document.
- <body> : This describes visual page elements. It’s in the body section of the page that bloggers will often make HTML tweaks when needed. The rest of the mentioned tags are found within the body of the document.
- <p> : This tag describes a paragraph.
Remember that your page text is encased in start and end tags. Here’s an example:
<p>This is paragraph text.</p>
Heading tags are used to show document hierarchy. You’re likely already using headings in your blog’s formatting, but the difference between headings 1-6 mean more than just text size and font-weight. They also convey a sense of hierarchy to web browsers and search engine bots.
Heading 1 should be used for the main heading of the document, such as your blog post’s title. Heading 2 should be secondary information, such as your primary subheads. Use Heading 3 for sub-subheads, and so on through Heading 6. These tags look like this:
Here’s an example of how it translates:
<h5>This is Heading 5</h5>
THIS IS HEADING 5
Inline Text Tags
Inline text tags are those you’ll use to format text within block-level tags like <p> and <h1>. Here are examples of what you’ll commonly use.
- <em> : This defines emphasized text, which most browsers italicize.
- <strong> : This defines strongly emphasized text, which most browsers bold.
- <q> : This formats a quotation.
- <del> : This shows deleted text, which often translates as a strike-through,
As you’ve noticed, I’ve used several bullet lists throughout this blog post. But how did I do it? Here are the tags you need to know:
- <li> : This defines a list element.
- <ul> : This tag goes around an unordered list, which will display as bullet points.
- <ol> : This tag goes around an ordered list, which will display as numbers.
Here’s an example of what the HTML code for an ordered list would look like:
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
Here’s how it shows up on the page:
- List item 1
- List item 2
- List item 3
Image and Link Tags
Before we part, let’s take a quick look at how to insert images and links. It’s perhaps easier to simply view the code and then fill in your information when you use the tags:
<a href=”YOUR URL”>YOUR ANCHOR TEXT</a>
Don’t remove the quotation marks around your URL. Simply insert your URL between the quotation marks. Your anchor text is the text that shows up on the page.
Let’s look at an example. If I wanted to link to a previous Hosting Kingdom article, the code would look like this:
<a href=”https://www.hostingkingdom.com/blog/should-you-register-a-domain-through-your-web-host/”>Should You Register a Domain Through Your Web Host?</a>
The link would show up like this on the page:
The code for an image looks like this:
<img src=” YOUR IMAGE URL”>
Note that this is a non-container tag, so it doesn’t have the end tag, but you do need the src attribute. You can add extras to this tag, such as alternate text or a size definition. That would look like this:
<img src=”YOUR IMAGE URL” alt=”YOUR ALT TEXT” style=”width:304px;height:228px;”>
Again, be sure you aren’t removing the quotation marks.
Note: You may see different codes that can be used for the same thing. For instance, I’ve seen the <b>, <bold>, and <strong> tags used to bold text, although they can show up differently on various browsers.
HTML doesn’t have to be as confusing as it looks. To practice HTML and get a better feel for it, use interactive sites like Code Academy, and let us know how it goes in the comment section.