FrontEnd.ro logo

Structura fiecărei pagini HTML

Stickman reprezentând elementele Head și Body

Orice website, fie că este un site de prezentare sau un complex editor video, conține aceeași structură de bază cu mai multe elemente descriptive și nu numai.

#Structura de bază

Fiecare pagină web este alcătuită din următoarele elemente principale:

  1. <!DOCTYPE html> îi specifică browserului că acest document este de tipul HTML
  2. <html> este elementul părinte al fiecărei pagini
  3. <head> și <body> sunt descendenți ai elementului <html> și vor fi definiți o singură dată
<!DOCTYPE html>
<html> 
  <head>
    <!--
      ...
    -->
  </head>
  <body>
    <!-- 
      ...
    -->
  </body>
</html>

În <head> vom introduce elemente ce ne descriu website-ul, precum:

  • titlul paginii
  • autorul
  • descrierea
<head>
  <title> FrontEnd.ro - Învață de la comunitatea open-source </title>

  <meta name="author" content="Alexandru Păvăloi">

  <meta 
    name="description"
    content="Vrei să înveți FrontEnd? Aici ai parte 
      de tutoriale gratuite și o comunitate de developeri care te vor ajuta să devii mai bun." 
  >
</head>

Titlul va apărea în tabul browserului, iar împreuna cu descrierea le vom vedea și în motoarele de căutare. Spre exemplu, uite cum arată site-ul nostru în urma unei căutări pe Google:

Titlul și descrierea vizible într-o căutare pe Google
Titlul și descrierea vizible într-o căutare pe Google

Mai mult, via taguri <meta> putem controla cum apare site-ul când e distribuit pe rețele sociale precum Facebook, LinkedIn etc. Adică noi ca și programatori alegem ce imagine, titlu și descriere vor vedea utilizatorii acestor site-uri:

Share pe Facebook
Share pe Facebook
Share pe LinkedIn
Share pe LinkedIn

Ca să obținem rezultatul de mai sus, am folosit următoarele taguri în <head>:

<meta property="og:type" content="website" />
<meta property="og:url" content="https://FrontEnd.ro" />

<meta 
  property="og:title" 
  content="FrontEnd.ro - Învață de la comunitatea open-source" 
/>
<meta 
  property="og:description"
  content="Vrei să înveți FrontEnd? Aici ai parte 
    de tutoriale gratuite și o comunitate de developeri care te vor ajuta să devii mai bun." />

<meta property="og:image" content="https://frontend.ro/main-seo-image.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Valorile pentru property="" și content="" din codul de mai sus sunt specifice standardului Open Graph.

Dar asta nu e tot. În <head> vom adăuga și linkuri spre alte resurse folosite de site-ul nostru. De exemplu: foi de stiluri CSS, fișiere JavaScript etc.

<link rel="stylesheet" href="/css/styles.css" />

<script src="/js/script.js"></script>

Nu uita că poți să vezi codul oricărui website prin Click Dreapta -> View Page Source

#Elementul <body>

De la sine prin denumirea lui, elementul body (trupul) este responsabil pentru conținutul care-l vedem și cu care interacționăm efectiv în website.

Aici vom adăuga toate elementele de care are nevoie pagina noastră: texte, butoane, imagini, video-uri, liste, tabele, șamd. Practic, aproape toate elementele HTML pot fi adăugate aici, cu câteva excepții.

<body>

  <header>
    <a href="https://FrontEnd.ro">
      FrontEnd.ro
    </a>
  </header>

  <main>
    <h1> Învață FrontEnd</h1>

    <ul>
      <li> HTML </li>
      <li> CSS </li>
      <li> JS </li>
    </ul>
  </main>

</body>

Mai sus e un mic demo la elementul<body>ce conține un link, titlu si o lista ordonată.

#Rezumat

În <head> adăugam două tipuri de elemente:

  • Elemente descriptive, care ne dau informații despre site/aplicație și sunt utile pentru SEO (search engine optimiation), inclusiv rețelele sociale
  • Linkuri către resurse folosite de site-ul nostru precum: foi de stiluri CSS, fisiere JavaScript, imagini și fonturi pentu a îmbunătăți performanța, etc.

În <body> adăugăm elementele ce fac parte efectiv din site-ul nostru, și cu care vor interacționa utilizatorii. Aproape toate elementele HTML (cu câteva excepții) vor fi adăugate aici.

Resurse suplimentare

  1. What's in head?
  2. View Source

Ai vreo sugestie de îmbunătățire a acestei lecții? Contribuie pe GitHub