Templates are also having code for few Google search robots and others.

HTML5 Sample Blog Index Page. With correct Outline and some aria code


      
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<title>Blog Index Page HTML Ouline  </title>
<meta content='Satya Prakash, satya61229' name='author'/> 

<!--[if lt IE 9]>
    <script src="/wp-content/themes/satyaweblog/extras/js/html5shiv.js"></script>
<![endif]-->

</head>

<body  class="home blog">

<!-- container START -->
<div id="container"   >


<!-- Header and Nav -->
<!-- header START -->
<header id="header" role="banner">
    <div class="wrapper">

        <!-- Home link -->
        <a role="heading" aria-level="1" class="home-link" href="http://wp/" title="Satya's Weblog" rel="home">

                            <h1 class="site-title">Satya's Weblog                    <br/>
                    <span class="site-description">- a web technology blog</span>
                </h1>
               
        </a>

        <nav id="navbar" class="navbar navigation main-navigation" role="navigation">

            <!-- Nav Heading -->
            <h4 class="screen-reader-text">Topics:</h4>           
            <a class="screen-reader-text skip-link" href="#content" title="Skip to content">Skip to content</a>

            Menu DATA in UL LI

        </nav><!-- #site-navigation -->

        <aside class="top-bar-section">
            <h4 class="screen-reader-text">Follow: </h4>
            
<form role="search" method="get" class="search-form" name="searchfrm" id="searchfrm" action="http://wp/">
    <!-- Only return posts in search result -->
    <input type="hidden" value="post" name="post_type" id="post_type" />
    <label>
        <h4 class="screen-reader-text" >Search for:</h4>
        <input type="search" class="search-field" placeholder="Search …" 
               value="" name="s" id="search" title="Search for:" aria-labelledby="searchfrm" />
    </label>
    
    <button class="search-button" name="button" type="submit">
        <i class="icon-search fa fa-search fa-2x" id="submit-searchfrm"></i>
    </button>
    
    
</form>



          
        </aside>

    </div> <!-- End Wrapper -->

</header>
<!-- header END -->

<div class="no-head-foot">

<!--googleoff: all-->
<div class="announcement robots-nocontent" role="complementary">
        
        	
</div>

<div class="ad banner-ad robots-nocontent">
        
         
</div>
<!--googleon: all-->

<!-- content START -->
<div id="content" class="fullbody clearfix">

	<!-- main START -->
	<main id="main" role="main" class="col main">
         <!--[minify_skip]-->
          <!-- google_ad_section_start -->
          <!--[/minify_skip]-->


<!-- notice_content Removed-->

<div itemscope itemtype="http://schema.org/Blog" class="front-page index">
   
    <section>
        <h1 class="heading index-page-heading" role="heading">Recent Posts:</h1>
    
	<article class="post" id="post-4908">
            <header>
                <h2></h2>
            </header>
            
        </article>
	<article class="post" id="post-4900">
            <header>
                <h2></h2>
            </header>
            
        </article>
        
    </section>
</div>

	<nav class="navigation paging-navigation" role="navigation">
		<h5 class="screen-reader-text">Page navigation</h5>
		<div class="nav-links clearfix">

						<div class="nav-previous"><a href="http://wp/page/2" class="prev"><span class="meta-nav">&larr;</span> Older posts</a></div>
			
			
		</div><!-- .nav-links -->
	</nav><!-- .navigation -->
	

         
          <!--[minify_skip]-->
             <!-- google_ad_section_end -->
          <!--[/minify_skip]-->
	</main>
	<!-- main END -->

	
<!-- sidebar START -->
    
    <!-- showcase removed -->

    <aside id="sidebar" class="col sidebar aside-bar" role="complementary">
        <h3 class="screen-reader-text">Sidebar</h3>
        <section id="archives-3" class="widget widget_archive sidesec" ></section>

   </aside>

<!-- sidebar END -->
	</div>
<!-- content END -->

          </div> <!-- End no-head-foot -->
<!-- footer START -->
<footer id="footer" role="contentinfo">  
    <div class="wrapper">
 <!--[minify_skip]-->
<!-- google_ad_section_start(weight=ignore) -->
 <!--[/minify_skip]-->

 Footer Content
 
     <!--[minify_skip]-->
        <!-- google_ad_section_end -->
     <!--[/minify_skip]-->
    </div>
</footer>
<!-- footer END -->

</div>
<!-- container END -->
<!-- Js file Include Example -->
<script type='text/javascript' src='http://wp/wp-content/themes/satyaweblog/extras/js/jquery.min.js?ver=3.7.1'></script>
<script type='text/javascript' src='http://wp/wp-content/themes/satyaweblog/extras/prism/prism-min.js' defer=defer async='async '></script>

</body>
</html>

      
      

HTML5 Template for Blog Article/Post page


      
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="File Path"  media="screen,print" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<title>  Using Font Awesome 4 for Getting Icons</title>
<meta content='Satya Prakash, satya61229' name='author'/> 
<link rel='prev' title='How to Apply :hover to :before and :after Elements?' href='http://wp/2013/11/how-to-apply-hover-to-before-and-after-elements.html' />
<link rel="shortcut icon" href="http://wp/favicon.ico" type="image/x-icon" />
<!--[if lt IE 9]>
    <script src="/wp-content/themes/satyaweblog/extras/js/html5shiv.js"></script>
<![endif]-->

</head>

<body  class="single single-post postid-4908 single-format-standard">

<!-- container START -->
<div id="container"   >

<!-- Header and Nav -->
<!-- header START -->
<header id="header" role="banner">
    <div class="wrapper">

        <!-- Home link -->
        <a role="heading" aria-level="1" class="home-link" href="http://wp/" title="Satya's Weblog" rel="home">

                            <h1 class="site-title">Satya's Weblog</h1>
        </a>

        <nav id="navbar" class="navbar navigation main-navigation" role="navigation">

           Nav as Blog Index Page above
        </nav><!-- #site-navigation -->

        <aside class="top-bar-section">
            <h4 class="screen-reader-text">Follow: </h4>
           
            Search Form/ Follow Code etc

        </aside>

    </div> <!-- End Wrapper -->

</header>
<!-- header END -->

<div class="no-head-foot">

<!--googleoff: all-->
<div class="announcement robots-nocontent" role="complementary">
 
</div>

<div class="ad banner-ad robots-nocontent">

</div>
<!--googleon: all-->

<!-- content START -->
<div id="content" class="fullbody clearfix">

	<!-- main START -->
	<main id="main" role="main" class="col main">
         <!--[minify_skip]-->
          <!-- google_ad_section_start -->
          <!--[/minify_skip]-->

    <article id="post-4908" class="post-4908 post type-post status-publish format-standard hentry category-tech-talk" itemscope itemtype="http://schema.org/BlogPosting">

        <!-- POST Start -->
        <header>
            <h1 role="heading" aria-level="2" itemprop="headline">Using Font Awesome 4 for Getting Icons</h1>
        </header>
        

        <div class="content" itemprop="articleBody" >

            <p> Post Content </p>
            
        </div>

        <!-- End Post --> 
        
    <!--googleoff: all-->
    <div class="social-share share-links robots-nocontent" id="social-share">
        <div> SHARE<i class="fa fa-share fa-rotate-90"></i></div>
            <a target="_blank" href="http://www.facebook.com/sharer.php?u=http://wp/2013/11/using-font-awesome-4-for-getting-icons.html" title="Share on Facebook">
                <i  class="fa fa-facebook-square fa-2x"></i>
            </a>
         
        
    </div>
    <!--googleon: all-->

        <aside class="post-info clearfix">
            <h4 class="heading">Post Info:</h4>
            <div class="author-wrapper">
                <h5><address class="author" rel="author">By <a href="Author homepage url" title="" rel="author external">Satya Prakash</a></address> </h5>
            
            on <time itemprop="datePublished" datetime="2013-11-09">Nov 9th, 2013</time>.            </div>
            <div class="breadcrumb-wrapper">
            <h5><span class="cat">Categories</span> & <span class="tag">Tags</span></h5>
            <div id="breadcrumb" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                <a title="home page" href="http://wp/" >Home</a>
                ›             </div>
            </div>
            
        </aside>
        
         <aside class="related-posts">
            Related Post
        </aside>
        
    </article>
    
    	<nav class="navigation post-navigation" role="navigation">
		<h5 class="screen-reader-text">Post navigation</h5>
		<div class="nav-links clearfix">
                                                            
                    <a href="" rel="prev">Prev</a>                    			

		</div><!-- .nav-links -->
	</nav><!-- .navigation -->
	
    <div class="ads ad-below-post robots-nocontent" >
    </div>

    <!-- Comment Starts -->
    
<section id="comments" role="complimentary" class="comments-section">

    
        <div id="commentlist" class="commentlist">
            <!-- comments START -->
            <ul id="thecomments" >
                                    <li class="messagebox">
                    No comments yet.                    </li>
                                </ul>
            <!-- comments END -->

            
            <!-- trackbacks START -->
                            
            <!-- trackbacks END -->
        </div>

        								<div id="respond" class="comment-respond">
				<h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="" style="display:none;">Cancel reply</a></small></h3>
									Comment Form by Worpress
							</div><!-- #respond -->
			
    </section> <!-- #comments -->


          <!--[minify_skip]-->
             <!-- google_ad_section_end -->
          <!--[/minify_skip]-->
	</main>
	<!-- main END -->

	
<!-- sidebar START -->
    
    <!-- showcase removed -->

    <aside id="sidebar" class="col sidebar aside-bar" role="complementary">
     Sidebar as Index Page       
        
   </aside>

<!-- sidebar END -->
	</div>
<!-- content END -->




          </div> <!-- End no-head-foot -->
<!-- footer START -->

<footer id="footer" role="contentinfo">  
    <div class="wrapper">
    
 <!--[minify_skip]-->
<!-- google_ad_section_start(weight=ignore) -->
 <!--[/minify_skip]-->

    
    
</footer>
<!-- footer END -->

</div>
<!-- container END -->

Script File at the end

</body>
</html>

      
      

Tool Index Page