HTML osnove: Vodič za početnike

HTML nije programski jezik već jezik za obeležavanje koji strukturira sadržaj na webu. Radi zajedno sa CSS-om i JavaScript-om kako bi kreirao interaktivne i vizuelno privlačne sajtove.

Razumevanje HTML tagova, atributa i semantičkih elemenata je prvi korak ka tome da postanete web developer.

Ovaj članak pruža jasan uvod sa primerima koje možete odmah isprobati.

Osnovna HTML struktura

Svaki HTML dokument počinje sa doctype deklaracijom i <html> elementom. Unutra se nalaze <head> za metapodatke i <body> za vidljiv sadržaj.

<!DOCTYPE html>
<html>
  <head>
    <title>Moja prva stranica</title>
  </head>
  <body>
    <h1>Zdravo svete</h1>
  </body>
</html>

`<head>` i metapodaci

Unutar <head> elementa nalaze se metapodaci o stranici. To su informacije koje nisu direktno vidljive korisniku, ali su ključne za funkcionisanje i optimizaciju sajta. Tu spadaju:

<title> – naslov stranice koji se prikazuje u tabu pregledača.
<meta> tagovi – opisuju karakteristike stranice (npr. jezik, opis, ključne reči).
linkovi ka CSS fajlovima – definišu stil stranice.
skripte – mogu se učitati u <head> da bi se izvršavale pre prikaza sadržaja.

Važno je naglasiti da se sadržaj <head> ne prikazuje direktno na stranici, već služi pregledaču, pretraživačima i drugim servisima da razumeju kontekst i strukturu.

`<body>` i vidljiv sadržaj

Element <body> sadrži sve što korisnik vidi kada otvori stranicu:

naslove (<h1>, <h2>…),
paragrafe (<p>),
slike (<img>),
linkove (<a>),
liste (<ul>, <ol>),
tabele, forme i druge interaktivne elemente.

Drugim rečima, <body> je glavni deo stranice namenjen korisniku. Sve što se nalazi unutra biće prikazano u pregledaču, dok <head> ostaje „iza kulisa“.

Zaključak

<!DOCTYPE html> definiše tip dokumenta.
<html> obuhvata ceo sadržaj.
<head> čuva metapodatke i tehničke informacije.
<body> prikazuje ono što korisnik vidi i koristi.

Na ovaj način, HTML struktura jasno razdvaja informacije o stranici od sadržaja stranice.

HTML tagovi i elementi

Tagovi su ključne reči u uglastim zagradama. Elementi obično imaju otvarajući i zatvarajući tag.

<p>Ovo je pasus.</p>
<h1>Ovo je naslov</h1>

HTML atributi

Šta su HTML atributi

HTML atributi daju dodatne informacije o elementima i menjaju njihovo ponašanje ili izgled.

Naučite HTML atribute

Česti tagovi: div, ul, li

<div> tag grupiše sadržaj, dok <ul> i <li> prave neuređene liste.

<div>
  <ul>
    <li>Stavka 1</li>
    <li>Stavka 2</li>
  </ul>
</div>

Semantički tagovi za strukturu

Semantički tagovi opisuju značenje sadržaja. Primeri su <main>, <section>, <article>, <header> i <footer>.

<main>
  <section>
    <article>
      <h2>Vesti</h2>
      <p>Najnovije informacije...</p>
    </article>
  </section>
</main>

Primer kompletne HTML stranice

Ovo je jednostavan primer kompletne HTML stranice koja kombinuje tagove, atribute i semantičku strukturu.

<!DOCTYPE html>
<html>
  <head>
    <title>Moja prva HTML stranica</title>
  </head>
  <body>
    <header>
      <h1>Dobrodošli</h1>
    </header>
    <main>
      <section>
        <article>
          <h2>Uvod</h2>
          <p>Ovo je moja prva HTML stranica.</p>
        </article>
      </section>
    </main>
    <footer>
      <p>© 2025 Moj sajt</p>
    </footer>
  </body>
</html>