HTML 5 Semantic Elements Meaning

html 5 semantic elements
HTML semantic elements are those elements that describe its meaning to the browser and designer and developer. Unlike the semantic elements non semantic elements does not define any meaning. We can take <div> and <span> as non semantic elements which give or describe nothing to browser and designer or developer.

So <table>, <form> and <img> can be taken as semantic because which clearly define its meaning why they are using and where they should be use. HTML 5 semantics are only supported by the new version of browsers like explorer 9+, safari, chrome etc. Actually html5 is induced to reduce the javascript from the document but it also reduces the unnecessary div.

Most of the existing sites still use <div> tag to create menu, footer, header but html 5 classes them as different tags. Here is the offers of html 5 new semantic elements that define a new different part of web document.

<header>,<nav>,<section>,<article>,<aside>,<figure>,<figcaption>,<footer>,<summary>,<details>,<time>,<mark> etc.

The given semantic elements clearly define its own meanings. header is for head section, nav is for navbar or menu, section is for particular section of document and then article is for the article of the page. Likewise all other elements have their different meaning.

In the above figure, you can see how we arrange html 5 semantic elements in designing. If it is not arrange in its real order, it can not function its real works. So think how it should be used and then apply it to your html document code.

JavaScript Language In HTML: Basic HTML

JavaScript Language
We will learn more about JavaScript in the next lesson, so here is you only can find the introduction of the javascript and how it is used in html document.

Javascript is client side scripting language which is one of the most important web designing langauge among the html, css and javascript. <script> tag is used to create a script in the html document. Basically javascript is used to manipulate the images, to validate the form and to change the content dynamically. JavaScript only work with HTML and CSS. The given below example can be the best for the basic of javascript.

Actually javascript is very easy language to learn. Nowadays, most of the designers use this language to develop webpages.

Javascript is very powerful language which can change HTML elements and it also can change the attributes of html and css elements. We will give all the examples that are needed for learning all the the html elements change, attributes change, css elements change.

var a="Excuse me";

document.write("Hello Dude!")

alert("Hi buddy");


If we use the <noscript> tag, When there is javascript disabled by the browser, the message written in the <noscript> tag will be shown by the browser. Lets see the given example how nosript tag is used and it works.

document.write("Excuse Me Buddy")
<noscript>Sorry, some problems occurred here.</noscript>
<p>Javascript doesnot work if the script is disabled in the browser.</p>

Indeed you should know that <script> and <noscript> both are reverse of each other. But <script> is mostly used by developer rather than <noscript>.

If you have any questions, please comment us. 
Thank you. 

What is Google Adwords

One of our visitor friend has asked us about the google adwords by commenting in our new page ask any questions page. So I am going to briefly tell about the adwords as much as I know.

Google Adwords

We know that google is one of the most popular company of the world. In the starting phase of the company, it is only search engine but now it has its products more than 40. Likewise, google adwords is one of the most famous product of google. Google Adwords is only for the online advertising channel of the products and places. Adwords program is the main source of income of google. Google offers the PPC program. In 2012 google's total advertising income were fourty two billion dollors. Google's PPC and CPC program offers many people to earn money too. Google distributes its PPC ad program all over the world.
Adwords offers every ads in related places and position or ads can be targetted into special places and position. Ads are only shown in related fields.
Google brought its site targeted advertising in 2003. Advertisers can place domain names, keywords, topic and google places the ads on where the advertisers want to place the ads by using adwords control panel.

So in general, you should know that adwords is one of the product of google which is used for online advertisement.

For more information, comment us.

What is HTML 5: Basic HTML

We have already learnt about the HTML. So here we are just going to discuss about the HTML 5
HTML 5 is the most new standard of HTML which induced being cooperation between the 2 company World Wide Web Consortium (W3C) and the WHATWFG (web hypertext application technology)
w3c and WHATWG both decided to create a new version of HTML, then they create HTML 5. In previous stage there were the version HTML, HTML 4, XHTML. After that HTML 5 was induced to replace the all of them oldies. Indeed. HTML 5 is very useful to the tablet, pc, smartphone etc. There are various advantages of HTML 5. Specially, it reduces the external plugins. It is also used for error handling. HTML 5 developement process is visible for public. New special features or characteristics of HTML 5 are:
  • <canvas> tag which is used for 2d drawing.
  • It is also supportable in local storage device.
  • There are various specific tags or elements. Such as <article>, <footer>, <header> etc which are completely new in HTML.
  •  Media elements are also very significant features of HTML 5
  • HTML 5 is started with the writing <!DOCTYPE html>. 

Yeh it is obvious that when a thing has advantages, it also has its various disadvantages. Thus there are also some disadvantages of HTML 5 ie it doesnot support in old browser. In short, HTML 5 is nothing, its same as the previous version of HTML but it has included and excluded some functions and features on it. So it is very powerfull language in web world.

Colors, Colorname and Color values In HTML: Basic HTML

Different colors are defined by different values in the web. Hexadecimal notation is used to define the values when values are defined by the hexa decimal code then that values define a color. We all know that there are 3 primary colors. They are Red, Green and Blue. The highest value of hex FFFFFF defines the white color and the lowest value 000000 defines the black color. Likewise all the colors are defined by different values. The hex values are defined by the 5 digits which start with a # sign.
different colors

Some color examples:
#000000 -> Black
#FF0000 -> Red
#0000FF -> Blue
#FFFF00 -> Yellow
#FF00FF -> Pink
#C0C0C0 -> Gray
#FFFFFF -> White

You can see some examples of color code in the above but you should also know that we can make 16 million differet colors using red, blue and green combination from the values 0 to 255. To say that most computers are only capable of displaying almost sixteen thousand three hundred and 4 colors.

You can also give the color by using different names of different colors. Some examples of color names are given below:-

AliceBlue   #F0F8FF
AntiqueWhite #FAEBD7
Beige         #F5F5DC
Black           #000000
Blue                 #0000FF
BlueViolet #8A2BE2
Brown         #A52A2A
Chocolate #D2691E
Coral        #FF7F50
Cyan        #00FFFF
Green        #008000
Gray       #808080
Indigo         #4B0082

div and span HTML Group Elements: Basic HTML

Basically, there are 2 html group tags in HTML elements. They are <div> and <span>. Div tag creates a section in a document with block level and as same the span tag creates section in html document in inline.
difference betweenn <div> and <span>

HTML Block Tags/ Elements:- Block Elements are those that occupied all the line that it is staying now. It means it normally starts or ends with new line when it is being displayed in any browser. Some examples are: <p>, <h1>, <table> <div> etc.

HTML Inline Tags/ Elements:- Inline tags displayed in the same line even starting a new tag. <img>, <a>, <span> etc tags are inline tags which don't break the line.

<div> Tag

So as HTML block element or tag, <div> is the block tag that is used to define section in html documents which groups all the elements of HTML. Simply it has no meaning but being a block tag it breaks a line before and after it. When it is being used with css, it has lots of attributes. Actually div tag replaces the old table tag for defining a document. Indeed table is used to show the data in tabular format.

<span> Tag

Span tag is same as the div tag which is used to create a section in html page but unlike the div tag, it is inline tag. <span> tag is mostly used for making text section.

Basic Singular Tags: Basic HTML

In previous post we learnt about the basic text formatting tags. Now this time we here discuss some other significant tags of html which are basics but very important in HTML. We have already known that basically there are 2 tags: Singular and Plural tags. So lets know about some singular tags. As we know, singular tags are those tags which does not have companion and ends with back slash. Some singular tags are:-
singular tags html

  1. Line Break Tag (<br/>): This tag is only used for breaking the line. It breaks the line, then the cursor goes to next line.
  2. Horizontal Line Tag (<hr/>): Horizontal Line Tag draws line in the page horizontally. This is also very important tag. Using this tag, you can make your site look beautiful. Some of the attributes of it are width, size, color etc. 
  3. Image Tag (<img/>): img tag is one of the most important tag. It is used to put the image in the web page. Almost in all of the web page, you can see this tag because without image your site does not look friendly, so most of the designers use this tag. There are some attributes of img tag, they are: src, width, height, border, alt, title, align, etc. 

How to Increase Visitors On your New Blog or Site

Many newer bloggers quit their blogging in blog because of just the reason of the low traffic in their site. Moreover that the old bloggers also do not find the traffic as they want. They do not get more visitors because they do not follow these simple tips. There is various ways that you should mention for increasing more traffic. The main recommendation for the increasing visitors is the using of facebook and twitter. Now here I am going to tell some tips for increasing genuine traffic on your site. This tips are for getting traffic to a new blog.
search engine optimization

1)  Link sharing in Facebook and Twitter:- 
Facebook is the most famous networking site that helps to doing internet market. Facebook has many functions and features. Joining in groups, making pages, creating pages and posting in their can be most benifit for your sites and blog.
Twitter is second most famous social media that also helps to increasing the visitors on your site. You can follow top bloggers and also follow their followers. Now once you did this, then you can tweet your articles.

2)  Comment in top blogs:- 
Commenting in other blog but do not make spam comment, it means do not spam their blogs by writing just single line comment.

3)  Write genuine and detailed articles:-
Content is great for the search engine optimization. You should write genuine content creating normally six hundred words.
For creating good content, spend more time. This is so important for all blogger to grab the attention of your visitors.

4)  Do SEO:-
Many people do not know about search engine optimization (SEO). But SEO is very important for good site and blog. You should just focus about the keywords, description, meta description etc.

Here I told some tips for increasing visitors to your site and also blog but do not think these are enough for your site there are some other offpage SEO techniques that you should consider properly.

Thank you all. 

Text Formatting Tags: Basic HTML

We already knew that in the previous tutorial tags are specific instruction which starts with '<' and end with '>'.  Here we are going to tell you about some of the text formatting tags.
text formatting tags for html

Text formatting tags:-

Text formatting tags are those tags which are used to format the text content of webpages.  It means text formatting tags are for formatting the text content of the web page. There are various text formatting tags. Some of the tags are we will discuss bellow:-

Preformatted tags:-
Preformatted tag is that tag which preformats the content written between the tag. When we write the content in between the tag, we can see the content as exactly what have written.
<pre> ........ </pre>

Bold tags:-
Bold tag is used to make specific text bold. When we want to highlight some text, we write bold tag.
There is two type of bold.
<b>......</b> or <strong>.......</strong>
Example:- <b> This is a example of bold tag. </b>
Basically there is no difference between <b> tag and <strong> but in the view of SEO <strong> tag is more preferrable than <b>.

Italic tag:-
This tag is actually used to italic the text or content. There is two italic tags.
<i>...............</i> and <em>.............</em>. Indeed there is no difference between these two tags but <em> (emphasize tag is more preferable for search engine optimization).
Example:- <i> This is a example of italic tag. </i>

Underline tag:-
For underlining the content or text, we use the underline tag. The syntax of underline tag is given below:
Example:- <u> This is a example of underline. </u>
Superscript and Subscript tags:-
Superscript tag is a kind of tag that is used to write some letter and number as superscript of a letter or text and subscript tag is used to write some letter or number as subscript of text or letter.
<sup>...........</sup> and <sub>....................</sub>
Example:- <sup> This is a example of superscript tag. x2 </sup>

Paragraph tag:-
Paragraph tag is mostly usable tag for web page designing. It is used to make paragraph in the webpage. The syntax of paragraph tag is given below:
Example:- <sub> This is a example of subscript tag log10 X.</sub>

Strike tag:-
strike tag is used to draw the line just middle of the text.
Example:- <strike> This is a example of strike tag </strike>

Heading tag:-
There is different 6 types of heading tags. They are <h1>, <h2>, <h3>, <h4>, <h5> and <h6>.
Often <h1> tag is used for the title of the web page. It makes the text larger than other 5 heading tags.
Example:- <h1> This is a example of heading tag.</h1>

How to Add Google Translate Gadget in Blogger

In the beginning, google started as a search engine but now it is getting popular by its various products. Not only it is in web world but also in technical world. But today I am not going to tell you about its biography. I am just trying to tell you one of its products: Google Translator which provides more than 70 languages sevice. I mean it can translate your content written in English into more than 70 language. Such as French, Russian, Hindi, Nepali etc.
Adding this widget/gadget helps your visitors about your blog or blog posts easily. Every people want to know what is written in this site and that site but it is not possible to write the same content in all the languages of the world. S this can be best widget for the all users or visitors.
The google translator plugin is provided by Google only. It can be add into any websites but when you want to put into your blogger blog, it is also more simple. You should just add the gadget that provides on add gadget section. Just follow these instruction for detail.

  1. Go to Blogger dashboard
    blogger dashboard
  2. Then click on Layout>>Add Gadget
    google gadget
  3. Choose Google Translate
  4. Now Save it.
Congratulation, you have done. 

How to Display Your Posts in Different Menus

Blogger has provided to display your post in different labels or categories but not provided directly to display posts in pages. Now we are going to learn the displaying posts in different menus techniques. It is too easy to do this. If you display your posts in different menus then it seems quite good because, visitors want to find easily what he want to find, so that when you make showing of posts in menu that can be awesome for the visitors. In blogger menus can be put horizontally and vertically too. When you put the page gadget just after the header gadget and blog posts gadget, then it is shown as horizontal and if you put the gadgets except just before and after the header gadget and blog posts gadget, then you can find it is shown as vertical.

Now just follow this tutorial step by step to display posts in different menus:
  • In the starting, go to your dashboard of blogger and then make a new post and give it a label name
    new post
    otherwise,if you have already many posts and also label, then just follow the below points.
  • Then copy the link of the labels as given picture because it is needed.
    copy link
  • Now just go to the layout and then click on add gadget and choose HTML/JAVASCRIPT.
    add gadget
  • After that find page gadet and click it. Now click on link page to add the name of menu.
    blogger gadgets
  • Now give the page title and paste the URL of label that we already created.
    label page
  • Then click on save link button.
You just added the one page in menu. To add more pages, just follow the above points again and again. It depends how many of pages you need. 

How to Make Dofollow Comment Blog

dofollow comment blog pic
Do you want to make your blog dofollow comment blog? This question also arise when you want more visitors and more comments on your blog because most of the people want to comment on those blogs which are dofollow. Dofollow blog is that blog which induce backlinks for other. I will say next time about what backlink is. So the most bloggers and users want to comment on those blog and make backlink.

By the way, blogger blog is nofollow blog in default. Nofollow is not important for SEO. When you make your blog dofollow, you might get lots of comment as well as spam comments. So you should able to face with spamming because webmasters search dofollow blogs and treat them for backlinks. However, you get also lot of original comment if your blog is unique and good. In order to make your blog dofollow comment blog, just follow the given steps:-

Step 1: Lets enter into the blogger dashboard.
Step 2: And then just click on template and edit html.
Step 3. Now let just find the given code. Press CTRL and F then find this code
<a expr:href='data:comment.authorUrl' rel='nofollow'><></a>
Step 4: Just replace the code nofollow by dofollow otherwise just delete the above code.
Step 5: Now click on Save Template.

Displaying and Hiding Widgets of Blogger in Specific Pages

blogger widgetsHey guys, do you want to make your blog same like the websites? If you want, then you should modify your widget position and widget location in specific place only because there can be lot of widgets in your blog. So all of them showing in all the pages looks some what badly organized. Blogger does not have facility to arrange the widgets in particular fields but now here we are going
to write about some well tips for displaying and hiding your widgets in particular pages or fields.
It is easy to show and hide widget in particular pages in the blogger blog. Lets go through step by step solution to know hiding and displaying the widget in particular place.

Warning: Don't change any code of your template without keeping back up of that template.

  • First of all, add a widget by going in dashboard of blogger and clicking on layout then selecting the   html/javscript. 
  • After adding gadget, go to template and click on edit html.
  • Now find the the name of that widget simply pressing ctrl and f. Such as if your widget name is label, find label. When you find your widget name that should seem same like the following code
<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'><b:includable id='main'><!-- only display title if it's non-empty --><b:if cond='data:title != ""'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div><b:include name='quickedit'/></b:includable></b:widget>
  • then when you find your widget name add given tags colored with blue as the given style.
# Put as following code to display widget only in homepage.
<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'><!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
<div class='widget-content'>
<b:include name='quickedit'/>
  • Add same as following to display in a specific page.
In the above code you should replace the URL of your blog link.<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "URL of the page"'><!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
<div class='widget-content'>
<b:include name='quickedit'/>

# Put the code as following to display widgets in static pages only

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "static_page"'><!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
<div class='widget-content'>
<b:include name='quickedit'/>

# Add code as given below codes to hide widget in particular pages only

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url != "URL of the page"'><!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
<div class='widget-content'>
<b:include name='quickedit'/>

  • Here also your should put the URL of your blog in URL of the page

# Add the codes as give to hide blogger widget in static pages only

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'><!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
<div class='widget-content'>
<b:include name='quickedit'/>

# To display particular widget in archive page only, add the code as following 

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'><!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
<div class='widget-content'>
<b:include name='quickedit'/>

  • At last save the template after adding the codes.
  • Thank you, you have successfully done.

Add Image Icon Next to The Post Title of Blog

It is said that picture speaks itself. So as in our daily life picture is also important in web world. I mean to say that if you make your blog or site's looking good, then many unique visitors can also return in your blog or site. So that adding the image icon just before your post title may a good idea for increasing the visitors.

Here is some steps that you should consider to add image icon:

1. First of all you should make a good icon that suits your sits. Then you should upload it into and then copy the link of this picture. But your image icon size should be appropriate.

2. And then go to Dashboard and click on template>>edit html

3. Find the code below

<b:includable id='post' var='post'>

4. When you find this code then you should click on the left arrow seeing there to expand that widget code.

5. After that you should delete until you reach to <div class='post-header'>

6. And then paste the following codes in that place.
 <b:includable id='post' var='post'>  <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype=''>    <b:if cond='data:post.firstImageUrl'>      <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>    </b:if>    <meta expr:content='data:blog.blogId' itemprop='blogId'/>    <meta expr:content='' itemprop='postId'/>
    <a expr:name=''/>    <b:if cond='data:post.title'>      <table><tr>        <td class='posttitle'>           <img src='IconUrl'/></td>        <td><h3 class='post-title entry-title' itemprop='name'>      <b:if cond=''>        <a expr:href=''><data:post.title/></a>      <b:else/>        <b:if cond='data:post.url'>          <b:if cond='data:blog.url != data:post.url'>            <a expr:href='data:post.url'><data:post.title/></a>          <b:else/>            <data:post.title/>          </b:if>        <b:else/>          <data:post.title/>        </b:if>      </b:if>      </h3>        </td>        </tr></table>           <style> {          margin: 0px !important;        }      </style>       </b:if>

8. At last you should replace the IconUrl text in red color URL

9. Finally click on save template.

Wow You have successfully done.

How to Add Gadget/Widget Section Above the Blogger Title

Some bloggers want to add their adsense ads on the top of the blog. In that situation, they can use this method to do what want to. This trick can help them to increase their adsense earnings. Here you can see how to add gadget or widget section above the blog title.

  1. First go to the template section and while you enter in your blogger dashboard. After that click on Edit Html.
  2. Then find the given code <div id=’header-wrapper’> or <div class=’region-inner header-inner’>. To find this code first of all press CTRL + F and paste the any above code.
  3. And then you can see the following code after any one of above codes.
  4. <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
  5. Replace the value of green 1 into 3 and no into yes just like below
  6. <b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
  7. And then click on the save template button. 
  8. Now you have done successfully. 
After saving the template you can see the layout like this
Adding gadget section just above the blog title
This is the very simplest method to add widget or gadget section just above the blog title.
If you want to add adsense ad unit in this section you can.
Too ad adsense ad just follow the following steps:

  • Go to the adsense account and copy the ad code and then just enter into the blogger dashboard where you can find the gadget section top of the header and click on that section ‘add gadet’ then choose adsense or html/javascript
  • Then paste the ad code into there.
  • At last click on the save arrangement button.
  • Congrats you did well.