One Mom’s Journey from Fat to Skinny to Confident

BLOGGING THOUGHTS

HTML That All Bloggers Should Know – Part 1: An Introduction

8 Comments 805 views

All you HTML experts out there, my apologies. This is for the newbies. If you like to share your opinion on the importance of HTML for bloggers please leave a comment.

Apparently I’m in a minority and I didn’t even realize it. Every time I head to a conference like BlogHer or Blissdom I meet all these phenomenal bloggers who have absolutely no background in web development or design. They don’t have a technology degree. They don’t know HTML or CSS. Some of them don’t even know what a "tag" is.

This consistently surprises me. Don’t get me wrong, I think it’s AWESOME. I mean blogs have really made the word wide web accessible to anybody who wants to have a voice and share online. People are no longer just readers they are participants. Even if all they do is comment on blogs they are contributing to the conversation. Which is SO COOL!

But I think those who don’t have the techie background are at a bit of a disadvantage. Those who never look at the code view of their blogs are left to the mercy of the WYSIWYG editors to mark up their posts.

Ahhh see, I might have just used a word you didn’t know, WYSIWYG (pronounced whizzywig – yes I failed phonics) Let’s get to the heart of this post.

Introduction to Blogging HTML

WYSIWYG stands for What You See Is What You Get. Meaning you, the author of a web page (or blog post) don’t have to worry about HTML or tags or marking anything up. You just write and let the software handle it. In WordPress the WYSIWYG editor is called the "visual" tab. In blogger (blogspot) it’s called the "Compose" tab.

Don’t know what HTML is? Ok… then we need to really take a step back. HTML is Hyper Text Markup Language. It is the basic tags that get wrapped around your content to tell the browser what the text is. For example… Is it a paragraph? A header? a link? Maybe it’s a list item? or a quote? There are different tags for each of these things.

So now you are asking, "So if the WYSIWYG thingamajig takes care of all that HTML stuff then why should care?"

Well you see, generally the WYSIWYGS aren’t as smart as you. The don’t know your content the way you do. They aren’t even as efficient as you! I’m serious. Generally WYSIWYG editors make everything just paragraphs with a few lists mixed it. They don’t use headers. They don’t give you the ability to add CSS classes (will cover in a future post). I’m saying generally, as some have this functionality but many bloggers don’t know how to take advantage of it mostly because they don’t know HTML. It’s quite a chicken/egg problem.

I think it may be time for an example, as this ex-teacher knows I’ll only hold your attention but so long without a pretty picture. :)

Here’s a sample post.

The Best Blog Post EVER!

This is my best post ever. Let me tell you why.

Reasons Why This post is awesome!

It’s short.
It’s to the point.
It’s an example.

Conclusion

As you can see this really was the best post ever!

Here I have written the best blog post ever. Now I’m ready to past it into my blog’s Visual Editor…

screen shot - WordPress - showing the Path

Notice "Path" in the bottom left. This is probably something you never paid attention to but it’s telling you the HTML tag or element the selected content is. In this case p stands for paragraph. Watch what happens when I turn it into a list by highlighting and clicking the unordered list button.

screen shot - WordPress - showing list

When you clicked the button the WYSIWYG editor wrapped HTML tags around that content to mark it up as a list. Don’t believe me? Let’s check out the HTML view…

screen shot - WordPress - showing code view

Those things found in brackets wrapped around your list are HTML tags. <ul> stands for Unordered List and <li> stands for List Item. Now the browser knows to display that content as such.

Again why is all this important? You’ve been having no problems just cutting and pasting, you say? Well when your blog posts are marked up correctly in HTML they give more information to Search Engines about the content. Tags give the content context. Everything is not just a paragraph with a few bolds or strongs mixed in for display purposes. By doing so your posts have structure. There are headings and lists and quotes. Generally posts that are marked up correctly are easier to read. The are displayed nicer in browsers and translate better to portable devices, naturally.

Want to know more?

Sorry didn’t mean to leave you hanging… Stay tuned for Part 2 of HTML all Bloggers Should Know. I’ll be going over the basic HTML building blocks and how to use the visual editor to add them to your posts.

Please feel free to ask any questions or leave any comments!



Leave a comment

I’d love to hear your story or thoughts on mine.

However, to prevent the massive amounts of spam I was receiving I have turned off comments on any post older than 5 days old. If you'd like to leave me a note regarding this post or anything really try me on twitter (@RoniNoone,) my Facebook page, or even IG (@RoniNoone) I'm so sorry for the inconvenience. I never thought I'd have to do this but it's gotten way out of hand and comment management has become simply too time consuming to manage.

Discussion

There are 8 comments so far.

    Hallie

    March 5, 2009

    I am commenting on every post you write, Roni! Clearly I like this blog or something :-)

    I might be jumping the gun, but what I’m trying to figure out is how to merge the HTML that I know (very very basic, think Computer Programming 101 and Dreamweaver 102 in college) with the wizzywig :-) format of something like Wordpress or Windows Live Writer. Does that make sense? Like, I might want to start with Wordpress’s coding and then add my own things here and there to jazz it up. But…how?

    roni

    March 5, 2009

    Well I’m so glad someone likes it! Cause I’m sure having fun writing it! :)

    I do know what you mean. Wordpress does not put the <p> tags in. BUT that doesn’t mean you still can’t add your own tags. I will totally be covering this is Part 2 but copy and paste or write your content in the WYSIWYG view then switch over to the code view and add away! I do it all the time! Actually I don’t even use the visual editor at all.

    Berni

    March 5, 2009

    I am one of the total newbies you are writing for and I thank you. Looking forward to the next installment :)

    Diana (Soap & Chocolate)

    March 6, 2009

    Thanks for this kind of content! It’s really useful and I agree that bloggers should at least have some kind of concept of HTML. I have learned a bit about it crash-style just in my own blog-tinkerings, but to have it spelled out and taught to me is much better. Since I’ve gained a sense of code, even though I don’t know what all of it means, I always do a preview of my posts first and then if I see any wonkyness in the format I’ll go into the HTML view and fix it. It’s a small difference, but I think it makes my blog look more polished and I can tell which posts I made the effort on.

    Kerry

    March 6, 2009

    I know nothing about HTML and have really struggled with formatting my posts. So thanks for starting from the beginning, I look forward to learning!

    Lola Fierce

    March 10, 2009

    Thank you Roni! I’m so glad you are doing this. I am a new blogger and I am pretty much clueless. I didn’t even know how to link to someone else inside a post (I JUST googled that last week.) Anyway, I am enjoying your posts a lot.

    Maybe you could talk about how to edit specific things. Like in Wordpress, how do you edit the font of the blog? Or the tags? I’m figuring its in the CSS, but where do I see that? And, maybe you can cover basics about blog set up, like how do you make your blog able to read thru an RSS reader? Is there some option you have to pick?

    Hopefully I’m giving you content for future posts. I’ll be patient and just keep reading. Good job!

    Virginia

    April 2, 2009

    Good post on basic HTML. Glad to see it and to find your blog. A good reason to learn some basic HTML that you didn’t mention (maybe it’s coming in part 2) is so that you can create links in comments you leave on other people’s blogs.