pierrealexaline/html_good_practices.html

## html_good_practices.html
<!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" />
        <title>FindThePrecious.com</title>
        <link rel="icon" href="images/favicons/favicon.ico" />
    </head>
    <body>

        <header>
            <h1>FindThePrecious.com</h1>
            <nav>
                <ul>
                    <li><a href="" title="Homepage">FindThePrecious.com</a></li>
                    <li><a href="" title="Fellows">Fellows</a></li>
                    <li><a href="" title="Contact us">Contact us</a></li>
                </ul>
            </nav>
            <!-- We don't need to process slider for now ! -->
            <figure>
                <img src="https://via.placeholder.com/960x180" title="Fellowship try to destroy the ring" alt="Catch the Felons" style="width:100%">
                <figcaption>
                    <h2>Dangerous fellowship try to destroy the ring</h2>
                    <p>Orcs,Goblins,Balrogs, protect your masster Sauron !</p>
                </figcaption>
            </figure>
        </header>
        <main>
            <section>
                <h2>Fellows wanted dead (or alive if u want to eat them after !)</h2>
                <article>
                    <h3>The Wizard</h3>
                    <figure>
                        <img src="https://via.placeholder.com/180" alt="The WIzard" title="the Wizard - Reward 1000 gold coins !" style="width:180px">
                        <figcaption>
                            Reward 1000 gold coins
                        </figcaption>
                    </figure>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        Ut enim ad minim veniam.
                    </p>
                </article>
                <article>
                    <h3>Hobbit #3</h3>
                    <figure>
                        <img src="https://via.placeholder.com/180" alt="Hobbit #3" title="Hobbit #3 - Dead for now !" style="width:180px">
                        <figcaption>
                            <span>Dead</span>
                        </figcaption>
                    </figure>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        Ut enim ad minim veniam.
                    </p>
                </article>
                <article>
                    <h3>Yummy Dwarf</h3>
                    <figure>
                        <img src="https://via.placeholder.com/180" alt="Yummy Dwarf" title="Yummy Dwarf - 250 gold coins" style="width:180px">
                        <figcaption>
                            Reward 250 gold coins
                        </figcaption>
                    </figure>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        Ut enim ad minim veniam.
                    </p>
                </article>
            </section>
            <section>
                <form action="index.html" method="post">
                    <label for="email">Email : </label> <input placeholder="myemail@myregistar.com" type="email" name="email" id="email">
                    <label for="url">Site : </label> <input placeholder="https://www.mysite.com" type="url" name="url" id="url">
                    <label for="message">Message : </label> <textarea placeholder="write your message here !" name="message" id="message"></textarea>
                    <input type="submit" value="Send !">
                </form>
            </section>
        </main>
        <footer>
            <section>
                <ul>
                    <li><a href="about_us" title="About us">About us</a></li>
                    <li><a href="fellows" title="Fellows">Fellows</a></li>
                    <li><a href="join_us" title="Join us">Join our army</a></li>
                </ul>
            </section>
            <section>
                <ul>
                    <li><a href="faq" title="FAQ">FAQ</a></li>
                    <li><a href="reward" title="Reward conditions">Reward conditions</a></li>
                    <li><a href="legal_mentions" title="Legal mentions">Legal mentions</a></li>
                </ul>
            </section>
            <section>
                <p>
                    <a href="https://www.sauron4ever.com" title="Sauron4ever.com">Sauron4Ever.com</a><br>
                    <a href="https://www.twitter.com" title="Follow us on twitter">Follow him also on twitter</a>
                </p>
            </section>
        </footer>
    </body>
</html>
	<!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" />
	<title>FindThePrecious.com</title>
	<link rel="icon" href="images/favicons/favicon.ico" />
	</head>
	<body>

	<header>
	<h1>FindThePrecious.com</h1>
	<nav>
	<ul>
	<li><a href="" title="Homepage">FindThePrecious.com</a></li>
	<li><a href="" title="Fellows">Fellows</a></li>
	<li><a href="" title="Contact us">Contact us</a></li>
	</ul>
	</nav>
	<!-- We don't need to process slider for now ! -->
	<figure>
	<img src="https://via.placeholder.com/960x180" title="Fellowship try to destroy the ring" alt="Catch the Felons" style="width:100%">
	<figcaption>
	<h2>Dangerous fellowship try to destroy the ring</h2>
	<p>Orcs,Goblins,Balrogs, protect your masster Sauron !</p>
	</figcaption>
	</figure>
	</header>
	<main>
	<section>
	<h2>Fellows wanted dead (or alive if u want to eat them after !)</h2>
	<article>
	<h3>The Wizard</h3>
	<figure>
	<img src="https://via.placeholder.com/180" alt="The WIzard" title="the Wizard - Reward 1000 gold coins !" style="width:180px">
	<figcaption>
	Reward 1000 gold coins
	</figcaption>
	</figure>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit,
	sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	Ut enim ad minim veniam.
	</p>
	</article>
	<article>
	<h3>Hobbit #3</h3>
	<figure>
	<img src="https://via.placeholder.com/180" alt="Hobbit #3" title="Hobbit #3 - Dead for now !" style="width:180px">
	<figcaption>
	<span>Dead</span>
	</figcaption>
	</figure>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit,
	sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	Ut enim ad minim veniam.
	</p>
	</article>
	<article>
	<h3>Yummy Dwarf</h3>
	<figure>
	<img src="https://via.placeholder.com/180" alt="Yummy Dwarf" title="Yummy Dwarf - 250 gold coins" style="width:180px">
	<figcaption>
	Reward 250 gold coins
	</figcaption>
	</figure>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit,
	sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	Ut enim ad minim veniam.
	</p>
	</article>
	</section>
	<section>
	<form action="index.html" method="post">
	<label for="email">Email : </label> <input placeholder="myemail@myregistar.com" type="email" name="email" id="email">
	<label for="url">Site : </label> <input placeholder="https://www.mysite.com" type="url" name="url" id="url">
	<label for="message">Message : </label> <textarea placeholder="write your message here !" name="message" id="message"></textarea>
	<input type="submit" value="Send !">
	</form>
	</section>
	</main>
	<footer>
	<section>
	<ul>
	<li><a href="about_us" title="About us">About us</a></li>
	<li><a href="fellows" title="Fellows">Fellows</a></li>
	<li><a href="join_us" title="Join us">Join our army</a></li>
	</ul>
	</section>
	<section>
	<ul>
	<li><a href="faq" title="FAQ">FAQ</a></li>
	<li><a href="reward" title="Reward conditions">Reward conditions</a></li>
	<li><a href="legal_mentions" title="Legal mentions">Legal mentions</a></li>
	</ul>
	</section>
	<section>
	<p>
	<a href="https://www.sauron4ever.com" title="Sauron4ever.com">Sauron4Ever.com</a><br>
	<a href="https://www.twitter.com" title="Follow us on twitter">Follow him also on twitter</a>
	</p>
	</section>
	</footer>
	</body>
	</html>