Skip to content

Cum să scrii corect structura unui document HTML — ghid începător

DodaTech Updated 2025-01-15 2 min read

In this tutorial, you'll learn about Cum să scrii corect structura unui document HTML. We cover key concepts, practical examples, and best practices.

Un document HTML valid începe cu o structură corectă — DOCTYPE-ul potrivit, elementele <html>, <head> și <body> bine configurate asigură compatibilitatea între browsere și indexarea corectă de către motoarele de căutare.

The Problem

Mulți începători sar peste DOCTYPE, uită să declare limba documentului sau confundă ce merge în <head> vs <body>. Fără DOCTYPE, browserul intră în "quirks mode" și afișează pagina inconsecvent.

The Wrong Way

<html>
  <head>
    <title>Pagina mea</title>
  </head>
  ...
</html>

Probleme: Fără <!DOCTYPE html>, browserul activează quirks mode. Fără lang="ro", cititoarele de ecron folosesc limba greșită. Fără <meta charset>, caracterele speciale pot fi afișate incorect.

The Right Way

<!DOCTYPE html>
<html lang="ro">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Titlu Pagină | DodaTech</title>
  <meta name="description" content="Descrierea paginii pentru SEO.">
</head>
<body>
  <header>
    <h1>Bun venit la DodaTech</h1>
  </header>
  <main>
    <p>Conținutul principal al paginii.</p>
  </main>
  <footer>
    <p>&copy; 2025 DodaTech</p>
  </footer>
</body>
</html>

Step-by-Step Fix

1. Începe cu <!DOCTYPE html>

<!DOCTYPE html>

Acesta activează standards mode în toate browserele moderne. Fără el, paginile pot arăta diferit în IE, Chrome și Firefox.

2. Înfășoară totul în <html lang="...">

<html lang="ro">

Atributul lang ajută cititoarele de ecran, traducătoarele automate și motoarele de căutare.

3. Adaugă <head> cu metadatele esențiale

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Titlu unic și descriptiv</title>
  <meta name="description" content="Descriere SEO de 140-160 caractere.">
  <link rel="stylesheet" href="style.css">
</head>

4. Adaugă <body> cu conținutul vizibil

<body>
  <header> ... </header>
  <main> ... </main>
  <footer> ... </footer>
  <script src="script.js"></script>
</body>

Prevention Tips

  • DOCTYPE-ul e obligatoriu și trebuie să fie prima linie
  • <title> e obligatoriu și trebuie să fie unic per pagină
  • Scripturile se pun la finalul lui <body> pentru performanță
  • lang trebuie să reflecte limba conținutului

Common Mistakes

  1. Fără DOCTYPE — browserul intră în quirks mode și pagina arată diferit
  2. <title> lipsă — Google nu poate afișa titlul în rezultatele căutării
  3. Conținut direct în <head> — textul vizibil trebuie să fie doar în <body>
  4. Fără lang — cititoarele de ecron folosesc limba implicită greșită
  5. Scripturi în <head> — blochează randarea paginii; pune-le la finalul <body>

FAQ

### Ce este DOCTYPE și de ce e necesar?

<!DOCTYPE html> instruiește browserul să ruleze în standards mode, asigurând randare consistentă între browsere.

Care e diferența dintre <head> și <body>?

<head> conține metadate invizibile (titlu, stiluri, meta tag-uri). <body> conține tot conținutul vizibil al paginii.

Ce limbă ar trebui să folosesc în lang?

Limba în care scrii conținutul. În cazul acestui articol, lang="ro" pentru română. Pentru pagini bilingve, poți folosi lang pe elemente individuale.

Construit de dezvoltatorii Doda Browser, DodaZIP și Durga Antivirus Pro. Uneltele DodaTech se integrează perfect cu HTML pentru productivitate și securitate sporită.

← Previous Cum să desenezi cu Canvas API în HTML — ghid începător Next → Cum să creezi formulare HTML — ghid pas cu pas

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Quick Fix