posted by mark in Winery SEO Guide
Last time, we explored how search engines rank websites. I spent a bit of that post talking about links. We’ve all clicked on links before, but let’s dive into the language of the web a little, to demystify the building blocks.
HTML is The Language of the Web
1. What is HTML?
If all content is not created equal, at least all web pages are. They’re created using a language, just like English, French or Italian. That language has a syntax and a grammar, and rules for how it should be written. That language is called HTML. Fortunately for us, it’s much simpler to learn to write in HTML than it is to learn a spoken language.
HTML stands for Hypertext Markup Language. I happen to love acronyms, but I realize they’re fairly techy and you certainly don’t need to remember what it stands for to use HTML. The reason I bring it up is because it helps to remember what HTML is trying to do. Hypertext is web-activated text. So HTML is for working with hypertext. Markup is a lot like it sounds. Remember in school when you wrote an essay, and the teacher would Mark Up your work with red pen, adding strikethroughs, squiggly lines that signified that two letters were reversed, and so forth? Believe it or not, that’s all Markup is — you’re writing out some red lines that the web browsers will use to figure out how to display text. The L in HTML of course just means it’s a language.
2. The building blocks of HTML
If you right-click on this page and choose the option to “View page source”, you’ll see a bunch of text surrounded by small words enclosed in less-than (<) and greater-than symbols (>). That’s the Markup in HTML. If you remember back to my example of the teacher with the red pen – there were symbols that were used to signify what was to be done with the text. HTML doesn’t write on top of the text to mark it up however. HTML consists of a collection of symbols that surround the text. These symbols are called “tags”. Confusingly, these are not the tags you might use to describe your content. Let’s look at a tag.
<strong>This text should be bold</strong>
Let’s break down the tag – it begins with <strong>. <strong> is an “opening tag”. That tells the web browser that whatever comes next should be in bold. You may wonder when the browser would know to stop bolding text. The browser will bold all text until the tag is “closed”. We close tags using a slash after the less-than symbol. </strong> is a “closing tag”. It tells the browser to stop bolding the text.
That’s basically it – all of HTML from here on out uses these tags to tell the browser what to do with the text that is between its opening and closing tags.
3. There are many HTML tags
Here are some more examples.
<em>This text should be italicized</em>
<p>This text is a full paragraph</p>
<a href=”http://www.wine.com/”>This text should be linked to wine.com</a>
Hang on – see what happened there? Sometimes an opening and closing tag is just not enough information for the browser to know what to do. The “a” tag is also known as the “anchor” tag or the hyperlink or just the link. Why do we need 4 names for it? I don’t know.
Anyway, see the href=”http://www.wine.com/” part? That’s called an attribute. All attributes follow the same form. They appear in the opening tag, they begin with the name of the attribute (href), then an equals sign, and the value of the attribute is enclosed in double quotes afterwards (http://www.wine.com/).
In this case, a link tag needs to know where to link to. The href attribute defines where to link to. You can have multiple attributes as well.
Let’s try to relate that to wine. Let’s say the link tag were a bottle of wine. One of its attributes would be the closure, which might be cork. It might also have a vintage, say 2008. It would also have a name – the “Weak Example Cabernet Sauvignon”. If there were a bottle tag in HTML, it might look like this:
<bottle closure=”cork” vintage=”2008″>Weak Example Cabernet Sauvignon</bottle>
So maybe that wasn’t the best example – and there certainly is no bottle tag in HTML, but hopefully it shows that HTML is flexible, powerful and not too terribly scary.
Ready to move on? Proceed to Part 6: How Do Search Engines Read Websites?