Friday, May 16, 2014

Using HTML5 semantic tags (Part 2) : aside, nav, main


Good day everyone! this is Part2 of sematic tag tutorials for beginners, before moving on we would like you to go through the Part1 of this tutorial for better understanding. In this Part 2 of our semantic tags tutorials we are going to show how to use & define your related, navigation and main contents using <aside>, <nav> and <main> semantic tags.

<aside> : aside semantic tags in HTML5 is used to define contents that are not part of your article or page but are still related to them. Mostly all designers think of aside as an element to design the sidebar which is not the perfect way to use <aside> but still you can use it for sidebar. The best example for the use of <aside> is to provide article, post or page's author information as it is no part of the article or post but still is related to it. You can notice in the left side of this page which you are viewing right now contains the information of the author of this blog which is something not a part of this post but still is related to it providing you with the information bout the author, this is where you can use the <aside>. Look at the example below :

    <body>
            <aside>
               <h3>About Me</h3>
               <p>I am a designer based in San Francisco</p>
            </aside>
    </body>

<nav> : From the name itself we guess that you have guessed this tag's use. The <nav> tag is a very simple tag of HTML5 which is used to define any type of navigations on your web page.
The use is very simple just enclose your entire navigation markup tat you previously created inside your <nav> and you are done. Anyone looking at your markup even a naive can make out that it is your navigation. If a naive can make out then why not the smart search engines. Look at the example below:

    <body>        
        <nav>
          <ul>
            <li><a href="www.google.com">Google</a></li>
            <li><a href="www.yahoo.com">Yahoo</a></li>
            <li><a href="www.msn.com"></a>MSN</li>
          </ul>
        </nav>
    </body>

<main> : The <main> is used to define the main part of your web page. It can contain any number of contents which we will make the main part of your page. Unlike other tags the <main> tag can be used only once in a document with contents representing the main items, this can even be your articles part contained inside your <main> tag. Look at the example below :

    <body>
         <main>   
            <article>
               <h1>Introduction to semantic tags</h1>
               <span>Sematic tags are
               used to define content in HTML5</span>
            </article>
         </main>
    </body>


Click here to view the demo example. You can also download it by clicking the below link:

Download

We hope you liked this post if you did make sure you share it with your social networks.

Happy Designing !

Saturday, May 10, 2014

Document Type Definition in HTML5


Hello everyone! in today's post we are going to discuss about the changes to "document type definition" declaration in HTML5. As you all may know prior to HTML5 i.e in HTML 4.01 declaring the type of document was a hectic task as it was very lengthy and had multiple types like ("transitional","strict","frameset") depending on what we are building. The declaration for these three types are given below:

Transitional :

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">

Strict :

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">

Frameset :

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
  "http://www.w3.org/TR/html4/frameset.dtd">

As you can see the above document type declarations from version 4 of HTML is quiet tricky and very much time consuming proccess. But with the rise of HTML5 it brought with it a new dawn of ease for declaring your document type definition. Just look at the below HTML5 code for declaring document type and you just compare both the versions,

The one and only document type declaration

  <!DOCTYPE html>

We guess till now you must have compared both the version of document type declaration and understood the difference in power and ease of use. In HTML5 just 1 declaration covers every aspect and type of documnet, thats the power of HTML5.

Hope you liked our post if you did please link this post to you blog our website and do comment.

Happy Designing !

Tuesday, May 6, 2014

Using HTML5 semantic tags (Part 1) : header, footer, article.


Good day everyone! In this post we are going to introduce you to the semantic tags. Prior to HTML5 we lacked the ability to define our contents completely for every now and then we relied on <div> tag to group our content. It was good to group our content but lacked the ability to define contents which made a big confusion for web crawlers to search for a content and even developers and designers found it hard to identify and maintain a particular contents.
However, the new HTML5 has introduced several semantic tags to define our contents and in this part 1 of our semantic tags tutorials we are going to show how to define your header, footer and article contents using <header>, <footer> and <article> semantic tags.

<header> : header semantic tags in HTML5 is used to define & group header contents. All you have to do is whatever header contents like name of the site, logo, slogan etc that you were previously grouping under the <div> group it under the <header> element. This will clearly specify that the contents are header contents. Look at the example below :

    <body>
            <header>
               <img src="logo.jpg"></img>
               <span id="slogan">All good</span>
            </header>
    </body>

<article> : Now this is the tag we really wanted "the article semantic tag". Article semantic tag is used to define articles and posts on our blog or website. This tag can be very useful as unlike header and footer there can be multiple articles on page or website. This tag clearly specifies and define its contents. It is very useful to you and web crawlers. Look at the example below:

    <body>
            <header>
               <img src="logo.jpg"></img>
               <span id="slogan">All good</span>
            </header>
        
            <article>
               <h1>Introduction to semantic tags</h1>
               <span>Sematic tags are
               used to define content in HTML5</span>
            </article>
    </body>

<footer> : Unlike the header tag footer semantic is used to define and group footer contents that can be the copyright information of your site, contacts, recent links, Quick links etc. Use footer tag to specify and group all these footer contents. Look at the example below :

    <body>
            <header>
               <img src="logo.jpg"></img>
               <span id="slogan">All good</span>
            </header>

            <article>
               <h1>Introduction to semantic tags</h1>
               <span>Sematic tags are
               used to define content in HTML5</span>
            </article>

            <footer>
                  copyright © 2014
            </footer>
    </body>

So don't you think the new HTML5 tags are worth using, yes it is as it makes things a lot more easier for designers as well as for the search engines. So keep practicing and after that you can read partII of this article. We hope you liked this post if you did make sure you share it with your social networks.

Happy Designing !

Monday, May 5, 2014

How to make it to the wall?


Hello Programmers ! I hope all of you reading this want to make your way to the wall, and we are very glad to inform you that it is as easy as sending a mail or asking a question, and that is exactly what you need to do. Here at techTutorz our priority is "IDEA" because as always said "an idea can change the world". All you need to do is send us a mail from your own mail asking us any doubts or Question you may have on any programming & web designing technologies preferably (C, C++, .Net, JAVA, PHP, HTML/HTML5, CSS/CSS3, JQUERY) or even a suggestion for a new article along with the following details :

  • name
  • country/city [optional]
  • photo (your own photo or any image you would like to appear on the wall) [optional]
  • social network links (Facebook, Twitter, Google+) etc. [optional]
  • Your own blog or website link [optional]

and we will not only mail you the link to your solution but will also post the solution to the wall with your name, photo and blog or social links. You can also send us a full article if you wish and we will also be glad to post it to the wall. In short your Question when it reaches us becomes an "idea" and we respect people with IDEA.

You can send us your Questions (IDEAS) & above details at : techtutorz.idea@gmail.com