Skip to content

Instantly share code, notes, and snippets.

@pierrealexaline

pierrealexaline/html_good_practices.html

Created April 16, 2020 17:55
Show Gist options
  • Save pierrealexaline/535a18b3e02e653a8ace9849900ecba3 to your computer and use it in GitHub Desktop.
Save pierrealexaline/535a18b3e02e653a8ace9849900ecba3 to your computer and use it in GitHub Desktop.
Download ZIP
HTML : les bonnes pratiques
Raw
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="[email protected]" 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment