gregoirenoyelle/balise-ouverture-fermeture.html

## balise-ouverture-fermeture.html
<!DOCTYPE HTML>
<html>
	<head>
		<title>Ma page type</title>
		<meta charset="utf-8">
	</head>
	<body>

		<!-- commentaire dans le htlm -->
		<p>Mon paragraphe <br />
		avec un retour chariot.</p>

		<!-- ouverture de la div -->
		<div class="mon-image">
			<img src="__images/mon-image-1.jpg" alt="mon-image-1" width="686" height="594">
		</div>
		<!-- fermeture de la div -->

	</body>
</html>

## head-html5-n1.html
<!DOCTYPE html>
  <html lang="fr">
    <head>
      <!-- meta -->
      <meta charset="utf-8">
      <meta name="keywords" content="mots-clés">
      <meta name="description" content="description">
      <meta name="author" content="auteur">

      <!-- css -->
      <link rel="stylesheet" href="stylesheet.css">
      <link rel="icon" href="favicon.ico">

     <!-- script -->
      <script scr="file.js"></script>
      <script src="script-accueil.js"></script>

      <title>Titre de la page</title>
    </head>

## page-base-html5.html
<!DOCTYPE HTML>
<html>
	<head>
		<title>Ma page type</title>
		<meta charset="utf-8">
		<link rel="stylesheet" href="styles.css">
	</head>
	<body>
		<div id="wrapper">
			<h1>Mon titre</h1>
			<h2>Mon sous titre</h2>
			<div class="partie partie-1">
				<h3>Partie 1</h3>
				<p>Maecenas sed diam eget <strong>risus varius</strong> blandit sit amet non magna. <br> Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla. <em>Donec ullamcorper nulla</em> non metus auctor fringilla.</p>
			</div><!-- fin .partie-1 -->
			<div class="partie partie-2">
				<h3>Partie 2</h3>
				<p>Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Vivamus <strong>sagittis lacus vel</strong> augue laoreet rutrum faucibus dolor auctor.</p>
				<ul>
					<li>Liste 1</li>
					<li>Liste 2</li>
					<li>Liste 3</li>
					<li>Liste 4</li>
				</ul>
			</div><!-- fin .partie-2 -->
		</div><!-- fin #wrapper -->
	</body>
</html>

## page-type-html5.html
<!DOCTYPE HTML>
<!-- d'après cet article
http://www.digimantra.com/technology/html5/html5-page-structure/
par Sachin Khosla
 -->

<html>

    <head>
        <meta charset="utf-8">
        <title>Website Title</title>
    </head>

    <body>

        <header>
            <nav>
                <ul>
                    <li>Home</li>
                    <li>Contact</li>
                </ul>
            </nav>
        </header>

        <section>

            <article>
                <header>
                    <h2>Title Goes here</h2>
                    <p>Posted on <time datetime="2012-07-28T13:00:24+01:00">July 28th 2012</time> by <a href="#">Author</a> - <a href="#comments">12 comments</a></p>
                </header>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </article>

            <article>
                <header>
                    <h2>Article title</h2>
                    <p>Posted on <time datetime="2012-07-26T13:00:24+01:00">July 26th 2012</time> by <a href="#">Author</a> - <a href="#comments">9 comments</a></p>
                </header>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </article>

        </section>

        <aside>
            <h2>Contact Us</h2>
            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
        </aside>

        <footer>
            <p>Copyright 2012 DigiMantra Labs ©</p>
        </footer>

    </body>

</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>Ma page type</title>
	<meta charset="utf-8">
	</head>
	<body>

	<!-- commentaire dans le htlm -->
	<p>Mon paragraphe <br />
	avec un retour chariot.</p>

	<!-- ouverture de la div -->
	<div class="mon-image">
	<img src="__images/mon-image-1.jpg" alt="mon-image-1" width="686" height="594">
	</div>
	<!-- fermeture de la div -->

	</body>
	</html>
	<!DOCTYPE html>
	<html lang="fr">
	<head>
	<!-- meta -->
	<meta charset="utf-8">
	<meta name="keywords" content="mots-clés">
	<meta name="description" content="description">
	<meta name="author" content="auteur">

	<!-- css -->
	<link rel="stylesheet" href="stylesheet.css">
	<link rel="icon" href="favicon.ico">

	<!-- script -->
	<script scr="file.js"></script>
	<script src="script-accueil.js"></script>

	<title>Titre de la page</title>
	</head>
	<!DOCTYPE HTML>
	<!-- d'après cet article
	http://www.digimantra.com/technology/html5/html5-page-structure/
	par Sachin Khosla
	-->

	<html>

	<head>
	<meta charset="utf-8">
	<title>Website Title</title>
	</head>

	<body>

	<header>
	<nav>
	<ul>
	<li>Home</li>
	<li>Contact</li>
	</ul>
	</nav>
	</header>

	<section>

	<article>
	<header>
	<h2>Title Goes here</h2>
	<p>Posted on <time datetime="2012-07-28T13:00:24+01:00">July 28th 2012</time> by <a href="#">Author</a> - <a href="#comments">12 comments</a></p>
	</header>
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
	</article>

	<article>
	<header>
	<h2>Article title</h2>
	<p>Posted on <time datetime="2012-07-26T13:00:24+01:00">July 26th 2012</time> by <a href="#">Author</a> - <a href="#comments">9 comments</a></p>
	</header>
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
	</article>

	</section>

	<aside>
	<h2>Contact Us</h2>
	<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
	</aside>

	<footer>
	<p>Copyright 2012 DigiMantra Labs ©</p>
	</footer>

	</body>

	</html>