What do you need to write a blog ? Some good ideas and the ability to convey your message effectively to the audience. That's it.Though knowledge of HTML or CSS is not essential to writing a blog, it is always nice to have some basic idea of these languages to make your blog posts stand-out - after all, readers have such short attention spans and we, as bloggers, desperately want them to read our content.
We will share a couple of very simple HTML styling tricks that may make your blog stories more appealing and attractive to readers:
Highlight Important Text Inside HTML Boxes
This is a technique commonly used in newspapers - enclose the text inside a box with borders and wrap the story content around that box. First a live example and then the actual solution.
-- Begin Example --
This is an important text. Please do not skip reading this.
Ut eget ligula sit amet ante aliquet nonummy. Sed dignissim tempor nisi. Curabitur laoreet consectetuer nibh. Ut sollicitudin vestibulum mauris.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse ultricies, leo ut porta rhoncus, magna eros adipiscing enim, ac suscipit mi diam vitae sem.
-- End Example --
The highlighted text is floating on the left - you can achieve the effect by enclosing any text inside the following div tag.
<div style="width:200px;height:100px;float: right;border-top: 1px solid #000; border-bottom: 2px solid #000; padding: 5px;">Sample Text Goes Here.</div>
Replace float:right with float:left to move the box on the left side of the screen.
The Right way to Quote A Person
Enclose the quoted passage inside the <blockquote> tag. You may also want to add the left and right double quotation signs (“ - “ ” - ”)
Never use Ampersands or Quotes in Titles
While there's nothing wrong with using Ampersand signs (&) or double-quotes(") in your blog titles, in some cases they may break your social bookmarking URLs like "Post to del.icio.us", etc. You should use HTML special characters like
& for & [ampersand]
" for " [double quote]
' for ' [single quote]
Bullets and Lists are boring, try something different
HTML has tons of pointers and bullet styles that can be used as substitute for bullets which generally look dull. Here are some examples:
» with » | º with º | · with ·
Wrap Text around ImagesImages are perhaps the easiest way to grab the attention of your blog readers. Take a step further and blend your pictures around text by adding the following style attribute to your img tag.
For right alignment - <img style="margin: 0 0 2px 5px; float: right;" src="file_name_here" />
For left alignment - <img style="margin: 0 5px 2px 0; float: left;" src="file_name_here" />
Side Note: While these styles can be embedded inside a CSS stylesheet which makes code maintainence much simple, the only drawback is that the formatting is not retained in RSS feed readers. That's where inline styles can help.
Points to remember
» Use strong instead of b tag for making the text bold.
» The tag <hr /> add a horizontal line
» Browsers ignore white spaces in HTML code. Use to hard-code spaces or enclose the text inside <pre> tag.
Reader Comments
yes they are really use full specially for new bloggers those have no knowledge of html codes .
Written on 3/1/07 1:25 AM
“...in RSS feed readers. That's where inline styles can help.”
Nope, doesn't work in FeedDemon 2.
Written on 3/1/07 3:10 AM
Just one word - 'Cool'
Thanks Amit!
Written on 3/1/07 6:29 AM
I don't have much knowledge about HTML but you really gave a nice idea how to express your thoughts and give them a different look how to show important thoughts so more and more people should come to your blog. Everyone wants that more people should come and visit their blog.
Written on 3/1/07 10:08 AM
Hello Amit,
With reference to the new Blogger (formerly Blogger Beta), I have observed that using div tags anywhere in the post editor has adverse affects on font size and font/line spacing. span tags serve as a good replacement most of the times. I think that the new blogger users are better off avoiding div tags.
While its is safer that we ourselves avoid ampersands and quotes in titles, again with reference to the new blogger (perhaps even old) it automatically eliminates all such characters when forming the page URL for that post.
Thanks for your wonderful and informative blog.
Regards,
Vivek
Written on 3/1/07 11:17 AM
Still not much of a fan of using STRONG over B just to make something bold. Semantically misleading from a reader's perspective. It's still just styling.
Written on 3/1/07 2:49 PM
thanks for the tips buddy. I liked the first one. I shall incorporate this into my blog. I am a new blogger started this year.
Written on 3/1/07 3:21 PM
Interesting!
Thanks for the tips
Written on 3/1/07 4:33 PM
Excellent post. This is a great resource for beginners and non-beginners alike.
Written on 3/1/07 6:35 PM
Very helpful - thanks! I always forget those fancy HTML bullets.
Written on 3/1/07 7:05 PM
Nice tips...the first one is the best, the rest I already knew....thanks for the nifty info!
Written on 3/1/07 7:36 PM
Thanks for the blogger tips...if anyone can use blog help...it would be me :P
Written on 3/1/07 7:47 PM
I didn't intend to eat up all the comment space but the more I thought about this particular post on "Useful HTML Tricks" I started to think about some of the comments made by those who made a big deal about the Ferrari laptops. So many people made comments regarding how bloggers aren't journalists or professional writers...so on and so on. Well with this post and all that really goes into the layout of a blog, professional blogs anyhow, and the amount of time that must go into authoring the blog post at any given time...I beg to differ on the professionalism or journalistic prowess of bloggers on your level Amit. I think that professional bloggers go one step further in that not only do they have to concern themselves with the blog/article but also the layout and overall readability...you guys are a one man office...whereas the professional journalists and such end their involvment at the story.
Thanks again for helpful information!
Written on 3/1/07 8:06 PM
ctrl - "professional bloggers ..not only do they have to concern themselves with the blog/article but also the layout and overall readability...whereas the professional journalists and such end their involvement at the story."
well said. can't agree more.
Written on 3/1/07 8:17 PM
Thanks for those tips. I am a beginning blogger, and am going to use your tips today!
Written on 3/1/07 9:17 PM
@ Amit"whereas the professional journalists and such end their involvement at the story."
That said, there is a small, but very important different. Accountability. Professional Bloggers don't have to account for anything they say, whereas a professional Journalist's career hangs on his words !
Written on 3/1/07 9:46 PM
I beg to differ on what "anonymous" has to say regarding accountability and the assertion that professional bloggers do not have to be accountable. Sure they do, as much if not more than a professional writer/journalist. In both you are in essence giving your view or account on any given subject...with research and so on to back up your view or account. Yeah that is pretty tough and I don't knock that at all...and because they work for someone...yes their careers hang on their articles.
On the same account most professional bloggers are reporting or passing on information to a smaller more critical group of readers in most cases....some of which rely solely on the information that a professional blogger will pass out...so, I think that professional bloggers are held just as accountable as the professional reporter/journalist...if not more accountable to their niche.
I also tend to think that when one considers themselves a professional in anything they decide to pursue as a career or past-time...at that point they have decided that they will in fact be held accountable for what they report or in regards to the information they pass on.
If the reporter/journalist loses his job...maybe blogging would be a good outlet for their skill...thus in that hypothetical case...reporters/journalist and bloggers are in fact equals...lol!
Written on 4/1/07 12:58 AM
This is a most useful article, I have linked directly to it from Affiliate-Support.org, Take care fellow RPM friend.
managedspaces
footprintsdoenunder
Written on 4/1/07 1:40 AM
The idea of HTML boxes for important text is interesting. I have used that on my webpages in the past quite effectively, but never on my blog. I don't know why I forgot about it!
Written on 4/1/07 1:56 AM
I have no idea why you recommend that one use strong instead of b tag for making the text bold.
Written on 4/1/07 4:17 AM
I hate that the "strong" vs "b" issue came up really...cause I am the type of neurotic person that will search at no end to find information on things. With that...here is a good link discussing this very matter:
strong vs b
Thanks for a challenge :P
Written on 5/1/07 12:54 AM
I would discourage the use of those entities in place of UL and LI tags, because you lose both proper alignment and semantic information (namely that this is an unordered list and should be treated as such, were a computer program processing it). You can hack around this as described here, but it'd be better to use CSS2's li:before to automatically generate them. You can also just use an image.
Written on 23/2/07 3:44 AM