danielck/html5-esimerkki.html

## html5-esimerkki.html
<!DOCTYPE html>
<html lang="fi">
<head>
	<meta charset="utf-8" />
	<!-- Varmistetaan, että sivusto näkyy mobiililaitteissa oikein -->
	<meta name="viewport" content="width=device-width">

	<!-- Varmistetaan, että HTML5-elementit toimivat vanhoissa Internet Explorer-versioissa -->
	<!--[if lt IE 9]>
	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<title>HTML5 ja CSS3</title>

	<!-- Linkitetään tyylitiedostoon -->
	<link rel="stylesheet" type="text/css" href="css3-tyylit.css">
</head>
<body>
	<!-- Käytetään header-elementtiä div id="header" -rakenteen sijaan -->
	<header>
		<h1>Uutissivusto</h1>

		<nav>
			<ul>
				<li><a href="#">Etusivu</a></li>
				<li><a href="#">Toinen sivu</a></li>
				<li><a href="#">Kolmas sivu</a></li>
			</ul>
		</nav>
	</header>

	<!-- Section-elementillä voi rajata sisällöltään itsenäisen alueen -->
	<section>
		<h1>Uutiset</h1>

		<!-- Article-elementtiä voi käyttää kaikkeen itsenäiseen sisältöön, jota tyypillisesti tilataan, esim uutisiin, blogikirjoituksiin, kommentteihin -->
		<article>
			<header>
				<h1>Korkeita kupari- ja nikkelipitoisuuksia Sodankylässä</h1>

				<time datetime="2011-11-02" pubdate="2011-11-02">2. marraskuuta 2011</time>
			</header>

			<p>
			Kaivosyhtiö Anglo American kertoi tänään, että Lapissa Sodankylässä
			sijaitsevasta malmiossa on mitattu laajalta alueelta hyvin korkeita kupari- ja
			nikkelipitoisuuksia.
			</p>

			<p>
			Geologian tutkimuskeskuksen mukaan ne ovat moninkertaisia Talvivaaran ja
			Kevitsan kaivosten pitoisuuksiin nähden.
			</p>

			<p>
			Anglo-Americanin tutkimustoiminnasta vastaavan aluejohtajan mukaan
			Viiankiaavalta tehdyn löydön tarkka koko ei ole vielä selvillä.
			</p>
		</article>

		<article>
			<h1>Kreikan kriisi</h1>

			<time pubdate datetime="2011-11-02">2. marraskuuta 2011</time>

			<figure>
				<img src="uutisdemo.jpeg" alt="Sarkozy ja Merkel" />

				<figcaption>Kreikan pääministeri Georgios Papandreou (vas.) joutuu selittämään
				kansanäänestysaikeitaan Ranskan presidentille Nicolas Sarkozylle ja Saksan
				liittokanslerille Angela Merkelille.
				</figcaption>
			</figure>

			<p>
			Kreikan pääministeri Georgios Papandreou joutuu kovaan testiin tänään
			tavatessaan Saksan liittokanslerin Angela Merkelin ja Ranskan presidentin
			Nicolas Sarkozyn ylimääräisessä kriisikokouksessa. Tapaaminen järjestetään
			Ranskassa G20-maiden kokouksen yhteydessä.</p>

			<p>Papandreoun maanantainen ilmoitus kansanäänestyksen järjestämisestä EU:n
			velka-apupaketista on hämmentänyt suuresti eurojohtajia ja herättänyt suoranaista raivoa
			osassa maita.</p>
		</article>


	</section>

	<!-- Aside-elementin sisältö liittyy sivun muun sisältöön, mutta on silti erillinen kokonaisuus
		 Yksittäiset article-elementit voivat myös sisältää omia aside-elementtejään (voisi sisältää esim uutiseen liittyviä linkkejä)
	 -->
	<aside>
		<h1>Sivupalkki</h1>
		<article>
			<a href="#">
			<h1>Aiheeseen liittyvä juttu</h1>
			<p>Hieman lisätietoa jutusta ...</p>
			</a>
		</article>

		<article>
			<a href="#">
			<h1>Aiheeseen liittyvä juttu</h1>
			<p>Hieman lisätietoa jutusta ...</p>
			</a>
		</article>

		<article>
			<a href="#">
			<h1>Aiheeseen liittyvä juttu</h1>
			<p>Hieman lisätietoa jutusta ...</p>
			</a>
		</article>

		<article>
			<a href="#">
			<h1>Aiheeseen liittyvä juttu</h1>
			<p>Hieman lisätietoa jutusta ...</p>
			</a>
		</article>
	</aside>

<!-- Korvattiin div id="footer" erillisellä footer-elementillä -->
<footer>
	<p>Sivu julkaistu <time pubdate>2.11.2011</time></p>
</footer>

</body>
</html>
	<!DOCTYPE html>
	<html lang="fi">
	<head>
	<meta charset="utf-8" />
	<!-- Varmistetaan, että sivusto näkyy mobiililaitteissa oikein -->
	<meta name="viewport" content="width=device-width">

	<!-- Varmistetaan, että HTML5-elementit toimivat vanhoissa Internet Explorer-versioissa -->
	<!--[if lt IE 9]>
	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<title>HTML5 ja CSS3</title>

	<!-- Linkitetään tyylitiedostoon -->
	<link rel="stylesheet" type="text/css" href="css3-tyylit.css">
	</head>
	<body>
	<!-- Käytetään header-elementtiä div id="header" -rakenteen sijaan -->
	<header>
	<h1>Uutissivusto</h1>

	<nav>
	<ul>
	<li><a href="#">Etusivu</a></li>
	<li><a href="#">Toinen sivu</a></li>
	<li><a href="#">Kolmas sivu</a></li>
	</ul>
	</nav>
	</header>

	<!-- Section-elementillä voi rajata sisällöltään itsenäisen alueen -->
	<section>
	<h1>Uutiset</h1>

	<!-- Article-elementtiä voi käyttää kaikkeen itsenäiseen sisältöön, jota tyypillisesti tilataan, esim uutisiin, blogikirjoituksiin, kommentteihin -->
	<article>
	<header>
	<h1>Korkeita kupari- ja nikkelipitoisuuksia Sodankylässä</h1>

	<time datetime="2011-11-02" pubdate="2011-11-02">2. marraskuuta 2011</time>
	</header>

	<p>
	Kaivosyhtiö Anglo American kertoi tänään, että Lapissa Sodankylässä
	sijaitsevasta malmiossa on mitattu laajalta alueelta hyvin korkeita kupari- ja
	nikkelipitoisuuksia.
	</p>

	<p>
	Geologian tutkimuskeskuksen mukaan ne ovat moninkertaisia Talvivaaran ja
	Kevitsan kaivosten pitoisuuksiin nähden.
	</p>

	<p>
	Anglo-Americanin tutkimustoiminnasta vastaavan aluejohtajan mukaan
	Viiankiaavalta tehdyn löydön tarkka koko ei ole vielä selvillä.
	</p>
	</article>

	<article>
	<h1>Kreikan kriisi</h1>

	<time pubdate datetime="2011-11-02">2. marraskuuta 2011</time>

	<figure>
	<img src="uutisdemo.jpeg" alt="Sarkozy ja Merkel" />

	<figcaption>Kreikan pääministeri Georgios Papandreou (vas.) joutuu selittämään
	kansanäänestysaikeitaan Ranskan presidentille Nicolas Sarkozylle ja Saksan
	liittokanslerille Angela Merkelille.
	</figcaption>
	</figure>

	<p>
	Kreikan pääministeri Georgios Papandreou joutuu kovaan testiin tänään
	tavatessaan Saksan liittokanslerin Angela Merkelin ja Ranskan presidentin
	Nicolas Sarkozyn ylimääräisessä kriisikokouksessa. Tapaaminen järjestetään
	Ranskassa G20-maiden kokouksen yhteydessä.</p>

	<p>Papandreoun maanantainen ilmoitus kansanäänestyksen järjestämisestä EU:n
	velka-apupaketista on hämmentänyt suuresti eurojohtajia ja herättänyt suoranaista raivoa
	osassa maita.</p>
	</article>


	</section>

	<!-- Aside-elementin sisältö liittyy sivun muun sisältöön, mutta on silti erillinen kokonaisuus
	Yksittäiset article-elementit voivat myös sisältää omia aside-elementtejään (voisi sisältää esim uutiseen liittyviä linkkejä)
	-->
	<aside>
	<h1>Sivupalkki</h1>
	<article>
	<a href="#">
	<h1>Aiheeseen liittyvä juttu</h1>
	<p>Hieman lisätietoa jutusta ...</p>
	</a>
	</article>

	<article>
	<a href="#">
	<h1>Aiheeseen liittyvä juttu</h1>
	<p>Hieman lisätietoa jutusta ...</p>
	</a>
	</article>

	<article>
	<a href="#">
	<h1>Aiheeseen liittyvä juttu</h1>
	<p>Hieman lisätietoa jutusta ...</p>
	</a>
	</article>

	<article>
	<a href="#">
	<h1>Aiheeseen liittyvä juttu</h1>
	<p>Hieman lisätietoa jutusta ...</p>
	</a>
	</article>
	</aside>

	<!-- Korvattiin div id="footer" erillisellä footer-elementillä -->
	<footer>
	<p>Sivu julkaistu <time pubdate>2.11.2011</time></p>
	</footer>

	</body>
	</html>