Elemente semantice HTML

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elementul Section</title>
</head>
<body>

<section>
  <h1>WWF</h1>
  <p>Fondul Mondial pentru Natură (WWF) este o organizație internațională care lucrează pe probleme legate de conservarea, cercetarea și restaurarea mediului, numită anterior World Wildlife Fund. WWF a fost fondat în 1961.</p>
</section>

<section>
  <h1>Simbolul Panda al WWF</h1>
  <p>Panda a devenit simbolul WWF. Cunoscutul logo cu panda al WWF a provenit de la o panda pe nume Chi Chi, transferată de la grădina zoologică din Beijing la cea din Londra în același an în care a fost înființat WWF.</p>
</section>

</body>
</html>

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elementul Article</title>
</head>
<body>

<article>
  <h2>Google Chrome</h2>
  <p>Google Chrome este un browser web dezvoltat de Google, lansat în 2008. Chrome este astăzi cel mai popular browser web din lume!</p>
</article>

<article>
  <h2>Mozilla Firefox</h2>
  <p>Mozilla Firefox este un browser web open-source dezvoltat de Mozilla. Firefox a fost al doilea cel mai popular browser web din ianuarie 2018.</p>
</article>

<article>
  <h2>Microsoft Edge</h2>
  <p>Microsoft Edge este un browser web dezvoltat de Microsoft, lansat în 2015. Microsoft Edge l-a înlocuit pe Internet Explorer.</p>
</article>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.all-browsers {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}

.all-browsers > h1, .browser {
  margin: 10px;
  padding: 5px;
}

.browser {
  background: white;
}

.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>

<article class="all-browsers">
  <h1>Cele mai populare browsere</h1>
  <article class="browser">
    <h2>Google Chrome</h2>
    <p>Google Chrome este un browser web dezvoltat de Google, lansat în 2008. Chrome este astăzi cel mai popular browser web din lume!</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox este un browser web open-source dezvoltat de Mozilla. Firefox a fost al doilea cel mai popular browser web din ianuarie 2018.</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge este un browser web dezvoltat de Microsoft, lansat în 2015. Microsoft Edge l-a înlocuit pe Internet Explorer.</p>
  </article>
</article>

</body>
</html>

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elementul Header</title>
</head>
<body>

<article>
  <header>
    <h1>Ce face WWF?</h1>
    <p>Misiunea WWF:</p>
  </header>
  <p>Misiunea WWF este de a opri degradarea mediului natural al planetei noastre și de a construi un viitor în care oamenii trăiesc în armonie cu natura.</p>
</article>

</body>
</html>

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elementul Footer</title>
</head>
<body>

<footer>
  <p>Autor: Hege Refsnes</p>
  <p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>

</body>
</html>

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elementul Nav</title>
</head>
<body>

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

</body>
</html>

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elementul Aside</title>
</head>
<body>

<p>Familia mea și cu mine am vizitat centrul Epcot vara aceasta. Vremea a fost frumoasă, iar Epcot a fost minunat! Am avut o vară grozavă alături de familia mea!</p>

<aside>
  <h4>Centrul Epcot</h4>
  <p>Epcot este un parc tematic la Walt Disney World Resort, cu atracții interesante, pavilioane internaționale, artificii premiate și evenimente speciale sezoniere.</p>
</aside>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;
  background-color: lightgray;
}
</style>
</head>
<body>

<p>Familia mea și cu mine am vizitat centrul Epcot vara aceasta. Vremea a fost frumoasă, iar Epcot a fost minunat! Am avut o vară grozavă alături de familia mea!</p>

<aside>
  <p>Centrul Epcot este un parc tematic la Walt Disney World Resort, cu atracții interesante, pavilioane internaționale, artificii premiate și evenimente speciale sezoniere.</p>
</aside>

<p>Familia mea și cu mine am vizitat centrul Epcot vara aceasta. Vremea a fost frumoasă, iar Epcot a fost minunat! Am avut o vară grozavă alături de familia mea!</p>
<p>Familia mea și cu mine am vizitat centrul Epcot vara aceasta. Vremea a fost frumoasă, iar Epcot a fost minunat! Am avut o vară grozavă alături de familia mea!</p>

</body>
</html>

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elementul Figure</title>
</head>
<body>

<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italia.</figcaption>
</figure>

</body>
</html>