kublaj · September 27, 2013 11:15
diff --git a/raleway-google-font.html b/raleway-google-font.html
 <!DOCTYPE html>
 <html lang="en"> <!-- Set this to the main language of your site -->
 <head>
  <meta charset="utf-8">
 	<title>HTML5</title>
 	<!-- Enter a brief description of your page -->
 	<meta name="description" content="">
 	<!-- Define a viewport to mobile devices to use - telling the browser to assume that the page is as wide as the device (width=device-width) and setting the initial page zoom level to be 1 (initial-scale=1.0) -->
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<!-- Add normalize.css which enables browsers to render all elements more consistently and in line with modern standards as it only targets particular styles that need normalizing -->
    <!-- 
    <link href="css/normalize.css" rel="stylesheet" media="all">
    For legacy support (IE 6/7, Firefox < 4, and Safari < 5) use normalize-legacy.css instead -->
 	<!--<link href="css/normalize-legacy.css" rel="stylesheet" media="all">-->

 	<!-- Include the site stylesheet <link href="css/styles.css" rel="stylesheet" media="all"> 
    -->
    <!-- Include the HTML5 shiv print polyfill for Internet Explorer browsers 8 and below -->
 	<!--[if lt IE 9]><script src="js/html5shiv-printshiv.js" media="all"></script><![endif]-->
    <link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,800,700,900' rel='stylesheet' type='text/css'>
    <style>
    /*  */
 	body {font-family: 'Raleway', sans-serif;}
 	.thin {font-weight:100;font-family: 'Raleway', sans-serif;}
 	h1 { font-size:44px; font-weight:200;font-family: 'Raleway', sans-serif;}
 	h2 {font-size:33px; font-weight:300;font-family: 'Raleway', sans-serif;}
 	h3 {font-size:22px; font-weight:700;font-family: 'Raleway', sans-serif;}
 	h4, h5 {font-weight:800;font-family: 'Raleway', sans-serif;}
 	.bold, strong  {font-weight:600;font-family: 'Raleway', sans-serif;}
 	.extrabold {font-weight:800;font-family: 'Raleway', sans-serif;}
 	.ultrabold {font-weight:900;font-family: 'Raleway', sans-serif;}
    </style>
 </head>
 <body>

 	<!-- The page header typically contains items such as your site heading, logo and possibly the main site navigation -->
 	<!-- ARIA: the landmark role "banner" is set as it is the prime heading or internal title of the page --> 
 	<header role="banner">

 		<h1><abbr title="HyperText Markup Language 5">HTML5</abbr> Bones</h1>

 		<!-- ARIA: the landmark role "navigation" is added here as the element contains site navigation
 		NOTE: The <nav> element does not have to be contained within a <header> element, even though the two examples on this page are. -->
 		<nav role="navigation">
 			<!-- This can contain your site navigation either in an unordered list or even a paragraph that contains links that allow users to navigate your site -->			
 		</nav>

 	</header>

 	<!-- If you want to use an element as a wrapper, i.e. for styling only, then <div> is still the element to use -->
 	<div class="wrap">

 		<!-- The <main> element is used to enclose the main content, i.e. that which contains the central topic of a document -->
 		<!-- ARIA: the landmark role "main" is added here as it contains the main content of the document, and it is recommended to add it to the
 		<main> element until user agents implement the required role mapping. -->
 		<main role="main">

 			<!-- The <section> element can be used to enclose content that comes under a related heading. 
 			NOTE: The <section> element can contain <article> elements and vice versa, if you think the content warrants it. -->		
 			<section>

 				<!-- This is the section's header. It contains the heading and navigation links for within the section -->
 				<header>
 					<h2>Getting Started</h2>
 					<!-- ARIA: the landmark role "navigation" is added here as the element contains page navigation -->
 					<nav role="navigation">
 						<ul>
 							<li><a href="#introduction">Introduction</a></li>
 							<li><a href="#instructions">Instructions</a></li>
 						</ul>
 					</nav>
 				</header>

 				<!-- The <article> element can be used to enclose content that still makes sense on its own and is therefore "reusable" -->
 				<article id="introduction">

 					<!-- A <header> element is not required here as the heading only contains a single <h3> element -->				
 					<h3>Introduction</h3>

 					<!-- Content -->
 					<p class="thin">Welcome to <abbr title="HyperText Markup Language 5">HTML5</abbr> Bones. This is a template that contains comments to aid you with setting up your <abbr title="HyperText Markup Language 5">HTML5</abbr> document.</p>

 				</article>

 				<!-- The <article> element can be used to enclose content that still makes sense on its own and is therefore "reusable" -->
 				<article id="instructions">

 					<!-- A <header> element is not required here as the heading only contains a single <h3> element -->	
 					<h3>Instructions</h3>

 					<!-- Content -->
 					<ol>
 						<li>Read the comments in this template</li>
 						<li>Decide how you think your content may fit into the template</li>
 						<li>Start building your document</li>
 					</ol>

 				</article>

 			</section>

 		</main>

 		<!-- An <aside> is used to enclose content that is additional to the main content but not essential. If it were removed, the meaning of the main content should not be lost, but the content of the <aside> also retains its meaning.
 		NOTE: the aside is placed outside of the <main> element as while its content is related to the content that is within the <main>
 		element, it is not part of it -->
 		<!-- ARIA: the landmark role "complementary" is added here as it contains supporting information for the main content that remains meaningful even when separated from it -->
 		<aside role="complementary">

 			<!-- A <header> element is not required here as the heading only contains a single <h3> element -->	
 			<h3>Did you know?</h3>

 			<!-- Content -->
 			<p class="ultrabold">The article and section elements cause a lot of confusion when people are trying to decide how and when to use them. The article: <a href="http://www.iandevlin.com/blog/2011/04/html5/html5-section-or-article">section or article?</a> might help you choose.</p>

 		</aside>
 	</div>

 	<!-- The main page footer can contain items such as copyright and contact information. It can also contain a duplicated navigation of your site which is not usually contained within a <nav> -->
 	<!-- ARIA: the landmark role "contentinfo" is added here as it contains metadata that applies to the parent document -->
 	<footer role="contentinfo">

 		<!-- Copyright information can be contained within the <small> element. The <time> element is used here to indicate that the '2013' is a date -->
 		<small>Copyright &copy; <time datetime="2013">2013</time></small>

 	</footer>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en"> <!-- Set this to the main language of your site -->
	<head>
	<meta charset="utf-8">
	<title>HTML5</title>
	<!-- Enter a brief description of your page -->
	<meta name="description" content="">
	<!-- Define a viewport to mobile devices to use - telling the browser to assume that the page is as wide as the device (width=device-width) and setting the initial page zoom level to be 1 (initial-scale=1.0) -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- Add normalize.css which enables browsers to render all elements more consistently and in line with modern standards as it only targets particular styles that need normalizing -->
	<!--
	<link href="css/normalize.css" rel="stylesheet" media="all">
	For legacy support (IE 6/7, Firefox < 4, and Safari < 5) use normalize-legacy.css instead -->
	<!--<link href="css/normalize-legacy.css" rel="stylesheet" media="all">-->

	<!-- Include the site stylesheet <link href="css/styles.css" rel="stylesheet" media="all">
	-->
	<!-- Include the HTML5 shiv print polyfill for Internet Explorer browsers 8 and below -->
	<!--[if lt IE 9]><script src="js/html5shiv-printshiv.js" media="all"></script><![endif]-->
	<link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,800,700,900' rel='stylesheet' type='text/css'>
	<style>
	/* */
	body {font-family: 'Raleway', sans-serif;}
	.thin {font-weight:100;font-family: 'Raleway', sans-serif;}
	h1 { font-size:44px; font-weight:200;font-family: 'Raleway', sans-serif;}
	h2 {font-size:33px; font-weight:300;font-family: 'Raleway', sans-serif;}
	h3 {font-size:22px; font-weight:700;font-family: 'Raleway', sans-serif;}
	h4, h5 {font-weight:800;font-family: 'Raleway', sans-serif;}
	.bold, strong {font-weight:600;font-family: 'Raleway', sans-serif;}
	.extrabold {font-weight:800;font-family: 'Raleway', sans-serif;}
	.ultrabold {font-weight:900;font-family: 'Raleway', sans-serif;}
	</style>
	</head>
	<body>

	<!-- The page header typically contains items such as your site heading, logo and possibly the main site navigation -->
	<!-- ARIA: the landmark role "banner" is set as it is the prime heading or internal title of the page -->
	<header role="banner">

	<h1><abbr title="HyperText Markup Language 5">HTML5</abbr> Bones</h1>

	<!-- ARIA: the landmark role "navigation" is added here as the element contains site navigation
	NOTE: The <nav> element does not have to be contained within a <header> element, even though the two examples on this page are. -->
	<nav role="navigation">
	<!-- This can contain your site navigation either in an unordered list or even a paragraph that contains links that allow users to navigate your site -->
	</nav>

	</header>

	<!-- If you want to use an element as a wrapper, i.e. for styling only, then <div> is still the element to use -->
	<div class="wrap">

	<!-- The <main> element is used to enclose the main content, i.e. that which contains the central topic of a document -->
	<!-- ARIA: the landmark role "main" is added here as it contains the main content of the document, and it is recommended to add it to the
	<main> element until user agents implement the required role mapping. -->
	<main role="main">

	<!-- The <section> element can be used to enclose content that comes under a related heading.
	NOTE: The <section> element can contain <article> elements and vice versa, if you think the content warrants it. -->
	<section>

	<!-- This is the section's header. It contains the heading and navigation links for within the section -->
	<header>
	<h2>Getting Started</h2>
	<!-- ARIA: the landmark role "navigation" is added here as the element contains page navigation -->
	<nav role="navigation">
	<ul>
	<li><a href="#introduction">Introduction</a></li>
	<li><a href="#instructions">Instructions</a></li>
	</ul>
	</nav>
	</header>

	<!-- The <article> element can be used to enclose content that still makes sense on its own and is therefore "reusable" -->
	<article id="introduction">

	<!-- A <header> element is not required here as the heading only contains a single <h3> element -->
	<h3>Introduction</h3>

	<!-- Content -->
	<p class="thin">Welcome to <abbr title="HyperText Markup Language 5">HTML5</abbr> Bones. This is a template that contains comments to aid you with setting up your <abbr title="HyperText Markup Language 5">HTML5</abbr> document.</p>

	</article>

	<!-- The <article> element can be used to enclose content that still makes sense on its own and is therefore "reusable" -->
	<article id="instructions">

	<!-- A <header> element is not required here as the heading only contains a single <h3> element -->
	<h3>Instructions</h3>

	<!-- Content -->
	<ol>
	<li>Read the comments in this template</li>
	<li>Decide how you think your content may fit into the template</li>
	<li>Start building your document</li>
	</ol>

	</article>

	</section>

	</main>

	<!-- An <aside> is used to enclose content that is additional to the main content but not essential. If it were removed, the meaning of the main content should not be lost, but the content of the <aside> also retains its meaning.
	NOTE: the aside is placed outside of the <main> element as while its content is related to the content that is within the <main>
	element, it is not part of it -->
	<!-- ARIA: the landmark role "complementary" is added here as it contains supporting information for the main content that remains meaningful even when separated from it -->
	<aside role="complementary">

	<!-- A <header> element is not required here as the heading only contains a single <h3> element -->
	<h3>Did you know?</h3>

	<!-- Content -->
	<p class="ultrabold">The article and section elements cause a lot of confusion when people are trying to decide how and when to use them. The article: <a href="http://www.iandevlin.com/blog/2011/04/html5/html5-section-or-article">section or article?</a> might help you choose.</p>

	</aside>
	</div>

	<!-- The main page footer can contain items such as copyright and contact information. It can also contain a duplicated navigation of your site which is not usually contained within a <nav> -->
	<!-- ARIA: the landmark role "contentinfo" is added here as it contains metadata that applies to the parent document -->
	<footer role="contentinfo">

	<!-- Copyright information can be contained within the <small> element. The <time> element is used here to indicate that the '2013' is a date -->
	<small>Copyright © <time datetime="2013">2013</time></small>

	</footer>
	</body>
	</html>