Bhawan Singh

Semantic HTML elements which are now neglected

Semantic HTML elements which are now neglected


If everything goes good HTML5.0 will be recommended standard for web in late 2014. HTML5 comes with some new text markup semantic elements but i am not going into them.I’m going to highlight few less commonly used tags and their place in HTML5 recommendations

<q> and <blockquote>

<q> and <blockquote>  tags serve the same purpose that is  to mark up a section that is quoted from another source. <q> tag is used for short quotations and its cousin <blockquote> for large text.HTML5 specifications continues to be same for both.


<i> and ><b>

These two old good fellas were used extensively during easily days of internet boom but slowly pattern shifted to use CSS for italicising and bolding text.They both are used to emphasise on a term or make some text standout from rest.The <i> tag defines a part of text in an alternate voice or mood.The <b> tag identifies text that is stylistically different than normal text, but doesn’t have any semantically different meaning.

According to the HTML 5 specification, the <b> tag should be used as a LAST resort when no other tag is more appropriate.HTLM5 specification for <i> tag ins’t that harsh.HTML5 specifications encourages developers to use CSS Style sheets  for italicising and other markup elements to emphasise text <strong> , <mark> , <em> .

As HTML5 dawns upon us these tags have their one foot in graveyard. They had a good run though.

Basic snippet to get started with Zurb foundation 5

Basic snippet to get started with Zurb foundation 5


What exactly is CSS Framework?

There is no point reinventing the wheel again or writing all the basic code required to run website again. CSS Framework is collection of stylesheet, couple of HTML pages along with Javascript file that together can help you quickly prototype web page.It reduces the front-end development website. As the Framework is already tested on various platforms and devices so you will be sure that your web page will not break on them.

I’ll explain basic of HTML, CSS here in this post.Here are prerequisite required to get going

  • You know what CSS and HTML is and it will be helpful if you have hands on practical experience
  • Downloaded the required files from  Zurb Foundation site on your PC and “localhost” is running.
  • Know what responsive design is.
  • Web browser any will do even IE but we don’t recommend for obvious reasons.
  • Code editor no no not the notepad or Dreamweaver,Sublime Text or Notepad++ is preferred.
Lets get rollin’

We will try to build 2 column layout.Header, footer, side menu, main content area.



At this moment you should have foundation files in your localhost folder.If everything  is fine  point your browser to


and you should see Welcome to foundation page in your browser.Now open index.html in your editor and change the content betweentag.

Now try reducing the size of your browser and you will notice webpage is totally responsive. See  you just nailed responsive design with just few lines of code and Was it difficult? absolutely not. It is incredible easy to create  quick prototype using foundation but hold on its just the bare help you get going  we have handy code snippets of foundation 5 you can read it here – Quick guide to Foundation 5 : Handy code snippets


Quick guide to Foundation 5 : Handy code snippets

Quick guide to Foundation 5 : Handy code snippets

Foundation 5



Hi! today i’ll post some handy shortcuts to Foundation V5. Lets start with brief intro – The Latest version of Foundation Framework V5 was released by ZURB on 21 Nov. It is similar to foundation 4 with perfomace gaines and more developer tools. Transition are better and smoother in newest version thanks to fastclick.js and support of jquery instead of Zepto.

Before starting development using Foundation 5 make sure your majority end users fall under these broswer versions

Desktop: Chrome, Firefox, Safari, IE9+
Mobile: iOS (iPhone, iPad), Android 2.4 (Phone, Tablet), Windows Phone 7+, Surface

Without getting in much details of foundation 5 i’ll just post handy guide to it.


Single column class syntax

Two column class syntax

Row syntax


Gutter-free row syntax


Nested column syntax


Offset column syntax


Centered syntax


Ordering syntax


Four column mobile syntax


Block grids syntax


Visibility class syntax screen size based:

Visibility class syntax orientation based:

Visibility class syntax device based:


Visibility class syntax media queries syntax


Happy Coding with Foundation 5!

HTML5  structural elements  and SEO

HTML5 structural elements and SEO

SEO-HTML5 goes hand in hand

SEO-HTML5 goes hand in hand

HTML5 comes with few nice structural  tags  that can really help in SEO and reduces  <div> tag clutter. The word SEO covers a large hidden treasue, hidden beacauss google (and others) search engines never reveales how some websites rank up to their first page but there is still many areas of website developement that can be helpful in better SEO and HTML5 has added few more things


The Navigation Tag

When it comes hyperlinks no one wants them to be ignored by  search engines specially google, So why not to highlight the important links of your site.Though google will most likely index almost all hyperlinks but its always a good idea to tell “Hey! google buddy these and these are important links please don’t ignore them!”

HTML5 specifies a  <nav> tag. If you are serious about SEO, wrap-up your important links inside Navigation tag


Header , Footer and Article

HTML5 specification adds simple (but important in SEO perspective)<header> , <article>  and <footer> tags.Articles based websites blogs,news  consists – Header,content and Footer.Header section specifies title of article whereas footer may consist authors name.<Header> , <Footer> and <Article>  tags help bots differentiate between article’s header ,footer and main content.

Google has not yet revealed  anything how he sees these tag but in most likely scenarios search engine crawlers  will use these tags to understand web page content.Google search result(other too) show snippets of webpage so wrapping up your content in article tag might be good idea.

As  header and footer are structural elements so these can  also be used with table headings or overall heading of page.


In plain words <aside> tag refers to sidebar you see on right of this post. As per HTML5 Specifications, if <aside> tag is used inside an article tag ,content of aside should be related to article but if used outside  content in aside tag should be related to website as whole. <aside> tag is a good way to include hyperlinks of related content in your article or separating other links from articles.

One NeXT step by Steve jobs one giant step for Applekind

One NeXT step by Steve jobs one giant step for Applekind

A thing of beauty is a joy forever ,Well its not just the design of hardware that makes Apple products so intimidating but the apple ecosystem as a whole gives you warm and cozy feeling.Every thing you buy from apple is interconnected seamlessly.Steve jobs was known to go deep into smaller details of hardware of software that may otherwise goes unnoticed but if they were not there we’ll definitely feel its absent.

When people talk about Steve jobs accomplishments they usually talk about Steve at apple but quite few people know about the fact the work Steve did when he was ousted from apple become the foundation of innovation at apple and thereon its success.
NeXT cube logo

NeXT Logo

Steve founded NeXT after being ousted from the company he founded and started developing an NeXTstep OS based on objective c.NeXTSTEP’s user interface was refined and consistent, and introduced the idea of the Dock (carried through OpenStep and into OS X and iOS) NeXTSTEP also created or was among the very first to include a large number of other GUI concepts now common in other operating systems: 3D “chiseled” widgets, large full-color icons, system-wide drag and drop of a wide range of objects beyond file icons, system-wide piped services, real-time scrolling and window dragging, properties dialog boxes (“inspectors”), window modification notices (such as the saved status of a file), etc.
NeXTSTEP OS screenshot

NeXTSTEP OS screenshot

While I was learning iOS development i used many classes starting with two capital letters “NS”. Upon googling I came to know that these classes were derived from NeXTStep’s OS . Both iOS and Mac OS all are based on cocoa touch and cocoa which is based on NeXT STEP operating system same which was developed by Steve jobs’s NeXT company.

To say his “next step” after exit from apple was actually a giant step for apple kind just like In 1970 when Neil Armstrong become first person to step on moon and he said “one small step for man one giant step for mankind ” indeed his success proved to be giant step for future space missions.

– Small tribute to a “visionary man”