HTML for Bloggers
30 June 2011
So, you're a blogger — but definitely not into coding. That's ok I suppose. I don't really enjoy waxing my chest or watching Shirley Temple flicks or whatever it is you do with your evenings. But I do love building websites. But you're a blogger, you just stick to your WYSIWYG editor (What You See Is What You Get, pronounced "Whizzy Wig"), and you can just forget about that "Edit HTML" button, right? Maybe not. Sometimes WYSIWYG editors wig out. So, it's still a good idea to know basic HTML text formatting tags.
Just like it sounds, the <p> </p> tags define paragraphs in an HTML document. Surround your paragraph with these tags, and the browser will add space above and below the paragraph, just like the paragraphs in this article. Here's an example:
<p>This is a paragraph.</p>
Surround your text with the <strong> </strong> tags, and it will appear bold just like the "Strong Tag" subheading right before this paragraph. Example:
<strong>This text will appear bold.</strong>
Using the <em> </em> tags will cause the text between them to appear italic like this. Example:
<em>This text will appear italic.</em>
The <br> will cause a carriage return, or line break without extra space between the line, unlike a paragraph tag. There is a break tag between this paragraph and the "Break Tag" subheading. This tag does not require a closing tag:
This is line one.<br>
This is line two.
Making a link to another website or document is as easy as using an anchor tag <a> </a>. Unlike the previous tags, this one requires an attribute, href, to be complete. All the href attribute does, is specify the path, or URL where the other webpage resides on the web. Anything between the two tags will behave as a link including text and images. An example:
<a href="http://www.hobbyheap.com">This links to Hobby Heap.</a>
To insert images into your article, use the <img> tag. Like the break tag, it also does not require a closing tag. This tag requires two attributes to be valid and functional. The src attribute, which stands for "source," like the href attribute in the anchor tag, states the URL of the image. The alt attribute provides alternative text, normally a brief description of the image used by screen readers for visually impaired users, and for search engine optimization. The following code will insert a goofy picture of me like this:
alt="Andy Griffin with weird smile">
Video is increasingly more important for engaging blog content. Sites like YouTube and Vimeo will provide you with the code to insert the video into your post. Just look for the "embed" button on the video page. Copy the code it gives you, double check to make sure you are in HTML edit mode in your blog software, and paste it into your article wherever you'd like it to appear. Most often the embed code you copy from video sites will use one of these tags: <iframe>, <embed>, <video>, or <object>.
HTML is actually rather intuitive. It's based on very semantic English. This ought to set you off on the right foot. Take control of your blog! Refuse to be controlled by it!