1
Ce este Hero Section?
Ce este Hero Section?
Hero section este prima sectiune mare pe care o vede vizitatorul - un titlu de impact, o descriere scurta si poate un buton. E ca si coperta unei carti - trebuie sa atraga atentia!
De ce conteaza? Ai doar 3 secunde sa captezi atentia cuiva. Hero section-ul face prima impresie!
2
Exemplu complet: index.html cu hero section
Exemplu complet: index.html
Tag-urile semantice dau structura clara paginii. Iata cum arata index.html cu hero section si sectiunea "Despre mine":
<header> - Antetul paginii (titlu, logo, meniu)
<main> - Continutul principal al paginii
<section> - O sectiune tematica
<footer> - Subsolul paginii (copyright, linkuri)
De ce le folosim? Ajuta browserele si motoarele de cautare (Google) sa inteleaga structura paginii tale!
index.html
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<title>Site-ul meu personal</title>
</head>
<body>
<!-- MENIU de navigare -->
<nav>
<a href="index.html">Acasa</a> |
<a href="despre.html">Despre mine</a> |
<a href="proiecte.html">Proiecte</a> |
<a href="contact.html">Contact</a>
</nav>
<main>
<!-- HERO SECTION - prima impresie! -->
<section>
<h1>Buna! Ma numesc [Numele tau]</h1>
<p>Sunt elev in clasa a 7-a si imi place informatica.</p>
<a href="despre.html">Afla mai multe despre mine →</a>
</section>
<!-- SECTIUNEA "Despre mine" - pe scurt -->
<section>
<h2>Despre mine</h2>
<p>Hobby-urile mele: [scrie hobby-urile tale].</p>
<p>Ce imi place la informatica: [scrie ce iti place].</p>
</section>
</main>
<footer>
<p>© 2026 [Numele tau]</p>
</footer>
</body>
</html>
3
💡 Sfaturi pentru continut
💡 Sfaturi pentru continut
- Fii autentic - Scrie despre tine, nu copia
- Tine-l scurt - Nimeni nu citeste texte lungi online
- Foloseste paragrafe - Un bloc mare de text sperie cititorii
- Evita informatii personale sensibile - Nu pune adresa, numarul de telefon, fotografia ta, adresa de email personala sau profiluri de retele sociale pe un site public