Take Control of Your Blog: Learn HTML

Take Control of Your Blog: Learn HTML

If you're blogging and you don't know even a little bit of HTML, you're doing yourself a disservice. HTML (which stands for HyperText Markup Language) tells a web browser how to diplay text elements on your web page. Learning and using HTML is fairly intuitive; I think you'll find it very easy to learn. Knowing how to use HTML on your own web site or blog allows you to enhance your own posts and troubleshoot small issues that arise (like when your posts don't appear quite the way you intended).

The ironic thing about computers is that, for all their apparent smarts, they have to be told what to do. And to tell a computer what to do, you have to speak its language. There are many programming languages out there that help browsers interpret web sites or make them function, but for today we're talking about the most basic level of coding your web site: HTML. HTML stands for HyperText Markup Language and it's the code that tells your browser how to read and display text elements on your web page.

HTML is pretty intuitive. If you use the HTML tab on your blog's compose editor, you can see how your posts are marked up with HTML code. If you look at it closely, you'll notice a few recurring things:

  1. HTML tags usually (but not always) come in pairs. These pairs are the opening tag (which tells the software that a command is coming) and a closing tag (which tells the software that the command is finished). For example, paragraphs are usually coded with <p> (the opening command) at the beginning and </p> at the end. The / is what tells the software that the command is ending.
  2. References (or URLs) are always in quotes. If you look at the HTML for a link, you'll see something like this: <a href="http://www.bloggingbasics101.com">Blogging Basics 101</a>. That link looks like this on your page: Blogging Basics 101. The key to making sure the browser reads the link correctly is to ensure the URL you're linking to is enclosed in quotes. And not just any quotes. If you use smart quotes (i.e., curly quotes), the browser doesn't always read those and your link doesn't work. To avoid curly quotes, don't write HTML in Microsoft Word or Mac Pages. You can use your blog's editor or even TextEdit or Notepad.

There are many good basic HTML tutorials online so I'm going to point you to them instead of trying to cover everything here:

  • HTML Primer provides tutorials for beginning or advanced users.
  • W3 Schools gives you everything you need to know about HTML and then a little more.
  • Tizag has tutorials on learning HTML, but also provides tutorials for CSS, PHP, scripting, and databases so you can continue to learn.

Technically speaking, HTML is not a computer programming language; it's a markup language. What I mean by that is, if you want to ensure a line of text is seen as a header (or bold or italics) in a browser, you have to tell the browser to display that text as you want it seen--you have to markup the text. In the case of a header, you would decide which level of header you want to display (e.g., Header 1, 2, or 3) and then use the HTML for that header. A header 3 would be marked as follows:

<h3>Text for Header Example</h3>

That text would appear in a browser as follows:

Text for Header Example

As you learn HTML and begin applying it, you'll see that there are different markups for text emphasis. For example, you may see the markup to bold a word as <b>text</b> or <strong>text</strong>. Or, if you want your text italicized you may see it marked up as <i>text</i> or <em>text</em>. Does it really matter which HTML markup you use? Well, yes. It does. If you've ever debated someone, you probably understand the importance of semantics of the spoken word. Semantics in HTML are just as important. As Virginia DeBolt of Web Teacher explains,

"The <b> tag is indeed bold. It is purely visual and carries with it no semantic meaning to indicate importance or emphasis. Therefore, non-visual browsers (such as screen readers) get nothing from <b>. It's as if it doesn't exist. The <strong> tag means strongly emphasized. It is interpreted visually in different ways by various browsers–often as bold. The <strong> tag always carries the semantic meaning of strong emphasis, even for non-visual browsers.

The sister tag <em> means emphasized, and it is often rendered in italic–but not always in italic. The <em> tag always conveys semantic meaning for emphasis. If you want italic for purely visual reasons (no attached emphasis), use the <i> tag. If you want italic because you are giving the title of a book or movie, use the <cite> tag, which conveys the semantic message that the words in italic are a citation."

But semantics aren't just important for interpreting text decoration correctly. Semantic HTML is important in SEO as well. Laura Scott of Rare Pattern explains:

"The use of semantic markup helps search engines index your content correctly. If you wrap a sub-header in <b> tags, then Google may consider it somewhat important, but Google will not consider it as important as a <h3> tag (commonly used to show a sub-header). Wrapping citation text in <i> and </i> gives you italics, but wrapping citation text in <cite> and </cite> not only gives you visual styling, it tells Google, Bing, etc. that this text (or link) is a citation. All these things will get increasingly important as search gets more sophisticated and smarter. The more 'robot food' we can give the search bots, the better for SEO."

As you spend more time blogging, you'll find that even a little knowledge about how to use HTML will help you control how your web pages are displayed. Take a little time and peruse the tutorials I've linked to and try out some of the things you learn, then please let me know if they've helped you.

Melanie Nelson writes tips and instructions for bloggers at Blogging Basics 101.

Related Posts

Real vs. Fake HTML: Is it All Semantics?

Geek Mom recently published a post by Sarah Pinault called Using HTML in Your Daily Life: The Rise of Fake Code. In this interesting essay, Sarah discussed the use of fake HTML tags in everyday communication. She cites examples like <rant></rant> and <giggle></giggle>.   Read more >

Learn Web Basics to be a Better Blogger

You don't need to know anything technical to have a blog beyond how to get around on a website and follow instructions. It's no more complicated than setting up an account on Amazon and ordering a book. But you could be a better and more effective blogger if you did take the time to learn some of the basics of how your website works. Blogger by veesees via Flickr   Read more >

Defining Basic Blogging Terms

If you're new to blogging, you may be overwhelmed by the jargon tossed around effortlessly online. I started this article thinking I could define a few key blogging terms that may help beginning bloggers find their footing. What I ended up with was an epically long post that needs to be separated into several categorical posts. As I started defining terms, I realized that it would be easier to have separate posts for blogging terms, social media terms, and Twitter terms (though Twitter is part of social media, it has its own vocabulary that will fill a post). But even my list of blogging terms is too long for a single post, so I'm offering you a partial list this week and I'll be back with more next week. Then we'll tackle social media terms, then Twitter terms.   Read more >

Comments

In order to comment on BlogHer.com, you'll need to be logged in. You'll be given the option to log in or create an account when you publish your comment. If you do not log in or create an account, your comment will not be displayed.