HTML 101 for bloggers - simple HTML to improve your blog

You don't have to be a computer geek to be able to use some simple HTML to improve your blog by leaps and bounds. Don't be put off by the technical jargon but let me show you some example how you will become a better blogger just by learning minimal HTML and improving on the codes generated while using the COMPOSE mode.

I have already made a post on Anchor text and how to make hyperlink open in new window or tab which has very clear explanation on hyperlinks and how you can easily make them open in new windows and if you have to read that post, you should and it should confirm that you too can easily master the essentials of HTML and how it can help you become a better blogger.

Let us take uploading of a picture as the next example. Many bloggers uses the COMPOSE (VISUAL or WYSIWYG -What You See Is What You Get) mode when uploading which will result in actually being able to see the actual picture in the post editor, but not the codes behind it. Below is an uploaded image:



Using the HTML mode on the other hand will result in a mass of codes which may be incomprehensible to some. However, all you need to do is to concentrate on this little HTML image tag - <img> and ignore the rest for the time being. On changing from COMPOSE mode to the EDIT HTML mode will result the display of the picture changing to this bunch of codes (just concentrate on img and the closing bracket /> in red):

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHR9A5lnF0azlSIjfjaUNTxHvm8Tc-2cZDOnCKt9YoWB69mcGBJf8JIjC9UwNYk1UmFZeud6iGcYm_V3iLsiH5Gzo0f5YuNkzq5xJZqVKUw6HhG-fnoXVODuR638SS5EDaRM6TmvIZfwQ/s1600/Compose+and+Edit+HTML+mode+tags.jpg" imageanchor="1" style=""><img border="0" height="28" width="136" src="http://cdn.as7.org/40_Compose2Band2BEdit2BHTML2Bmode2Btags.jpg" /></a>

Now if for some reason a visitor to your blog is unable to see the picture, what he may see is just an empty box. On the other hand, if you had just added a simple attribute alt="some text" where alt is short for alternate and the text should be descriptive of the picture, the visitor will see that text instead of an empty box so will not be left in puzzlement.

Also, a blind or visually impaired visitor who can't see images but using a screen reader will hear the alt text read out and thus not be left in the dark.

Another advantage of adding the alt attribute is to help search engines understand what the picture is all about and this will improve the SEO (search engine optimization) of your post or blog, will improve SEO and will probably help bring more traffic to your blog via the image search.

So on adding the alt="text descriptive of picture" we will get the audited codes as follows:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHR9A5lnF0azlSIjfjaUNTxHvm8Tc-2cZDOnCKt9YoWB69mcGBJf8JIjC9UwNYk1UmFZeud6iGcYm_V3iLsiH5Gzo0f5YuNkzq5xJZqVKUw6HhG-fnoXVODuR638SS5EDaRM6TmvIZfwQ/s1600/Compose+and+Edit+HTML+mode+tags.jpg" imageanchor="1" style=""><img border="0" height="28" width="136" src="http://cdn.as7.org/40_Compose2Band2BEdit2BHTML2Bmode2Btags.jpg" alt="text descriptive of picture" /></a>

So not too difficult after all if one just concentrate on the basic.

Source : bloggertipsandtricks[dot]com