Skip to content

Instantly share code, notes, and snippets.

@pierrealexaline

pierrealexaline/structure_of_html5_page.html

Last active April 16, 2020 21:17
Show Gist options
  • Save pierrealexaline/944fded582e579e7541f862d61fddbb2 to your computer and use it in GitHub Desktop.
Save pierrealexaline/944fded582e579e7541f862d61fddbb2 to your computer and use it in GitHub Desktop.
Download ZIP
Structure of an HTML page
Raw
structure_of_html5_page.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>
<nav>
<ul>
<li><a href="" title="">FindThePrecious.com</a></li>
<li><a href="" title="">Fellows</a></li>
<li><a href="" title="">Contact us</a></li>
</ul>
</nav>
<!-- We don't need to process slider for now ! -->
<figure>
<img src="https://via.placeholder.com/960x180" alt="Trulli" 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="Trulli" style="width:100%">
<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="Trulli" style="width:100%">
<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="Trulli" style="width:100%">
<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="" method="post">
<input type="email" name="email">
<input type="url" name="url">
<textarea></textarea>
<input type="submit" value="Send !">
</form>
</section>
</main>
<footer>
<section>
<ul>
<li><a href="" title="">About us</a></li>
<li><a href="" title="">Fellows</a></li>
<li><a href="" title="">Join our army</a></li>
</ul>
</section>
<section>
<ul>
<li><a href="" title="">FAQ</a></li>
<li><a href="" title="">Reward conditions</a></li>
<li><a href="" title="">Legal mentions</a></li>
</ul>
</section>
<section>
<p>
<a href="" title="">Sauron4Ever.com</a><br>
<a href="" title="">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