04 - HTML : les bonnes pratiques

<!DOCTYPE html>
<html lang="en">


<head>

    <title>FindThePrecious</title>

    <meta charset="UTF-8">

    <meta name="author" content="Lionel Rouge">

    <meta name="description" content="A website to look for a bunch of fellows">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>


<body>

    <header id=find>

    <nav>
        <a href="#find" title="find the precious">Findtheprecious.com </a>
        <a href="#fellows" title="See the fellows"">Fellows</a>
        <a href="#contact" title="get in touch">contact us</a>
    </nav>

    </header>

    <section>

        <article>
            <h2>Dangerous fellowship try to destroy the ring</h2>

            <a href="http://placeholder.com">   <img src="https://via.placeholder.com/150" alt="this is a slideshow showing dangerous fellows"></a>

        </article>

    </section>


    <section >

        <h1 id="fellows"> Fellows wanted dead (or alive if you want to eat them later)</h1>

        <article>


            <a href="http://placeholder.com">   <img src="https://via.placeholder.com/150" alt='This is an image of a first fellow'> </a>
            <h2>The Wizard</h2>
            <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. </h3>

        </article>

        <article>

            <a href='http://placeholder.com'>   <img src = 'https://via.placeholder.com/150' alt='this is an image of a second fellow'> </a>
            <h2> Hobbit 3 </h2>
            <h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit </h3>

        </article3

        <article>

            <a href="http://placeholder.com">   <img src='https://via.placeholder.com/150' alt='this is an image of another fellow'></a>
            <h2>Yummy Dwarf</h2>
            <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>

        </article>

    </section>


    <section >
        <h2 id='contact'> Contact US</h2>

        <form action="/my-handling-form-page" method="post">
            <ul>
                <li>
                    <label for="name">Name:</label>
                    <input type="text" id="name" name="user_name">
                </li>
                <li>
                    <label for="mail">E-mail:</label>
                    <input type="email" id="mail" name="user_mail">
                </li>
                <li>
                    <label for="msg">Message:</label>
                    <textarea id="msg" name="user_message"></textarea>
                </li>
            </ul>
        </form>

    </section>


    <footer>
        <nav>
            <a href="#contact" title="get in touch">contact us</a>
            <a href="#fellows" title="see the fellows">Fellows</a>

        </nav>

    </footer>


</body>
</html>