Proper markup

Gruntfile.js

@@ -31,7 +31,7 @@ module.exports = function(grunt) {
 					src: [
 						'**',
 						'!package.json',
-						'!Readme.md'
+						'!README.md'
 					],
 					dest: 'temp/pres/shower/'
 				},{
@@ -40,7 +40,7 @@ module.exports = function(grunt) {
 					src: [
 						'**',
 						'!package.json',
-						'!Readme.md'
+						'!README.md'
 					],
 					dest: 'temp/pres/shower/themes/ribbon/'
 				},{

index.html

@@ -12,10 +12,10 @@
 		<h1>Shower Presentation Engine</h1>
 		<p>Yours Truly, Famous Inc.</p>
 	</header>
-	<section class="slide cover" id="Cover"><div>
+	<section class="slide" id="Cover">
 		<h2>Shower Presentation Engine</h2>
 		<p>Brought to you by <a href="http://pepelsbey.net">Vadim Makeev</a></p>
-		<img src="pictures/cover.jpg" alt="">
+		<img src="pictures/cover.jpg" alt="" class="cover">
 		<!--
 			To apply styles to the certain slides
 			set slide ID to get needed elements
@@ -38,8 +38,8 @@
 					color:#FFF;
 					}
 		</style>
-	</div></section>
-	<section class="slide"><div>
+	</section>
+	<section class="slide">
 		<h2>Shower Key Features</h2>
 		<ol>
 			<li>Built on HTML, CSS and vanilla JavaScript</li>
@@ -49,12 +49,12 @@
 			<li>Printable to PDF</li>
 		</ol>
 		<p class="note">Shower ['ʃəuə] noun. A person or thing that shows.</p>
-	</div></section>
-	<section class="slide"><div>
+	</section>
+	<section class="slide">
 		<h2>Plain Text on Your Slides</h2>
 		<p>Lorem ipsum dolor sit amet, consectetur <a href="#4">adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <em>quis nostrud</em> exercitation ullamco laboris <strong>nisi ut aliquip</strong> ex ea commodo consequat. Duis aute irure <i>dolor</i> in reprehenderit in voluptate velit esse cillum <b>dolore</b> eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in <code>&lt;culpa&gt;</code> qui officia deserunt mollit anim id est laborum.</p>
-	</div></section>
-	<section class="slide"><div>
+	</section>
+	<section class="slide">
 		<h2>All Kind of Lists</h2>
 		<ol>
 			<li>Simple lists are marked with bullets</li>
@@ -68,8 +68,8 @@
 			</li>
 			<li>Look, seven rows exactly!</li>
 		</ol>
-	</div></section>
-	<section class="slide"><div>
+	</section>
+	<section class="slide">
 		<h2>Serious Citations</h2>
 		<figure>
 			<blockquote>
@@ -77,8 +77,8 @@
 			</blockquote>
 			<figcaption>Marcus Tullius Cicero</figcaption>
 		</figure>
-	</div></section>
-	<section class="slide"><div>
+	</section>
+	<section class="slide">
 		<h2>Code Samples</h2>
 		<pre>
 			<code>&lt;!DOCTYPE html&gt;</code>
@@ -89,8 +89,8 @@
 			<code>    &lt;link rel="stylesheet" href="screen.css"&gt;</code>
 			<code><mark>&lt;/head&gt;</mark></code>
 		</pre>
-	</div></section>
-	<section class="slide"><div>
+	</section>
+	<section class="slide">
 		<h2>Even Tables</h2>
 		<table>
 		<tr>
@@ -125,20 +125,20 @@
 		</tr>
 		</table>
 		<p>It’s good to have information organized.</p>
-	</div></section>
-	<section class="slide cover" id="Picture"><div>
+	</section>
+	<section class="slide" id="Picture">
 		<h2>Pictures</h2>
-		<img src="pictures/picture.jpg" alt="">
+		<img src="pictures/picture.jpg" alt="" class="cover">
 		<style>
 			#Picture h2 {
 				color:#FFF;
 				}
 		</style>
-	</div></section>
-	<section class="slide shout"><div>
-		<h2>You can even shout this way</h2>
-	</div></section>
-	<section class="slide"><div>
+	</section>
+	<section class="slide">
+		<h2 class="shout">You can even shout this way</h2>
+	</section>
+	<section class="slide">
 		<h2>Inner Navigation</h2>
 		<ol>
 			<li>Lets you reveal list items one by one</li>
@@ -147,9 +147,9 @@
 			<li class="next">But it will work only once</li>
 			<li class="next">Nobody wants to see the same joke twice</li>
 		</ol>
-	</div></section>
-	<section class="slide shout" id="SeeMore"><div>
-		<h2><img src="pictures/logo.svg" alt=""> <a href="https://github.com/shower/shower">See more on GitHub</a></h2>
+	</section>
+	<section class="slide" id="SeeMore">
+		<h2 class="shout"><img src="pictures/logo.svg" alt=""> <a href="https://github.com/shower/shower">See more on GitHub</a></h2>
 		<style>
 			#Picture h2 {
 				color:#FFF;
@@ -162,7 +162,7 @@
 				height:0.72em;
 				}
 		</style>
-	</div></section>
+	</section>
 	<p class="badge"><a href="https://github.com/shower/shower">Fork me on Github</a></p>
 	<!--
 		To hide progress bar from entire presentation