Uvod u web dizajn - 5. deo - HTML 5 struktura i tagovi - Podela stranice

Uvod

Kao i većina drugih računarskih jezika, HTML je tokom vremena prolazio kroz različite revizije. Svaka nova verzija podrazumevala je (između ostalog), dodavanje novih opcija, a kada su u pitanu opcije koje su se pojavile sa najnovijom (petom) verzijom HTML-a, posebno mesto zauzima veći broj specijalizovanih <div> tagova sa specifičnim nazivima i unapred pripisanim značenjem.

Novi tagovi svakako povećanju preglednosti HTML koda (odnosno, olakšavaju prepoznavanje uloge različitih elemenata stranice), međutim, pri prvom susretu sa prethodno pomenutim "HTML5 tagovima", prirodno se postavlja pitanje da li (uopšte) postoji prava potreba za specijalizovanim <div> tagovima, s obzirom na to da 'obični' <div> tagovi, koji su podešeni preko odgovarajućeg CSS koda, omogućavaju (baš kao što smo videli u prethodnom nastavku), da se struktura web stranice definiše korektno i prikaže na pregledan i vizuelno dopadljiv način.

U nastavku, pokušaćemo da odgovorimo na postavljeno pitanje (i, naravno, predstavićemo najvažnije HTML5 tagove) ....

Ukratko o preglednosti HTML koda

Problematika preglednosti može se svesti na dva glavna pitanja:

kako omogućiti programerima i web dizajnerima (korisnicima "ljudskog roda"), da što lakše razaznaju strukturu sajtova
kako omogućiti računarskim programima - da obave isti zadatak

Što se tiče programa, mislimo pre svega na tzv. "robote", specijalizovane programe koje internet pretraživači koriste zarad analize web stranica (pri čemu pravilna struktura sajta povoljno utiče na rang koji će sajt imati pri pokretanju pretrage).

Programi prepoznaju strukturu stranice preko tekstualnih obrazaca i svakako su u stanju da razaznaju hijerarhiju elemenata (koja, kao što znamo, u praktičnom smislu predstavlja stablo).

U današnje vreme postoje i tehnologije koje omogućavaju da se prepozna smisao <div> elemenata shodno pripisanim id-ovima, ali, u praksi se ipak očekuje od programera i web dizajnera da "i dalje" kreiraju optimalnu HTML strukturu.

Pogledajmo jednostavan primer koji potcrtava ono što smo do sada naveli ....

Primer HTML strukture - bez HTML5 tagova

Može se reći da sledeća (vrlo jednostavna) HTML struktura ....

		
<body>
	<div id='okvir'>
		<div id='navigacija'>
		</div>

		<div id='centralni'>
		</div>

		<div id='footer'>
		</div>
	</div>
</body>

Slika 1. - Osnovna struktura ('praznog') HTML dokumenta.

.... sama po sebi deluje veoma jasno i razumljivo, i recimo da bi se lako moglo zamisliti kako bi stranica koja je definisana preko gornjeg koda (uz dodatak odgovarajućeg CSS-a), mogla izgledati kada se otvori u browseru.

Međutim, da li smo (skroz) sigurni da bismo bili u stanju da razumemo istovetnu strukturu <div> elemenata, kojima je neko drugi dodelio id-ove?!

Na primer, struktura kakvu vidimo na gornjoj slici (spoljni <div> element sa tri unutrašnja <div> elementa), mogla bi - sa drugačijim id-ovima * - predstavljati i navigacionu traku sa tri linka, kao i mnoge druge strukture (u "neraspoznavanju" svrhe id-ova, posebno odmaže mogućnost definisanja id-ova preko reči iz nekog drugog jezika, ** ili, uz korišćenje tehničkih termina i drugih proizvoljnih odrednica).

Ljudi ne mogu razumeti sve jezike, web pretraživači se (tipično) neće truditi da razumeju jezik i neće "gledati blagonaklono" na sajtove sa nepreglednom HTML strukturom (odnosno, pri rangiranju stranica, web pretraživači se neće previše truditi da razumeju "šta smo hteli da kažemo" preko generičkih <div> elemenata), i stoga je jasno da proizvoljni id-ovi nisu najpraktičnija opcija.

Praktično rešenje predstavlja, upravo - standardizacija koja je došla sa 5. verzijom jezika HTML (sa kojom su uvedeni, ranije pomenuti, <div> elementi sa posebnim nazivima i unapred određenom namenom).

HTML 5 specifikacija - specijalizovani div tagovi

Zarad upoznavanja sa HTML5 tagovima, osvrnućemo se (u ovom članku), pre svega na tagove <main>, <header>, <nav> i <footer> - najvažnije i najčešće korišćene HTML5 tagove, ali, svakako ćemo se osvrnuti i na nekolicinu drugih zanimljivih tagova.

Tagovi header, nav, main i footer

Pogledajmo kako se malopređašnja struktura stranice može zapisati uz korišćenje HTML5 tagova ....

		
<body>
	<div id='okvir'>
		<header>
			<nav>
			</nav>
		</header>

		<main>
		</main>

		<footer>
		</footer>
	</div>
</body>

Slika 2. - Osnovna struktura (praznog) HTML dokumenta - definisana preko HTML5 tagova.

header

main

footer

Slika 3. - Primer HTML5 strukture.

Tag <header>

Tag <header> koristi se za definisanje zaglavlja na različitim odeljcima stranice:

'glavni' <header> tag stoji pri vrhu stranice (direktno unutar body tagova, ili unutar glavnog uokvirujućeg <div> elementa), odnosi se na "celu stranicu", i tipično sadrži: logotip sajta, <nav> tagove sa navigacionim linkovima ("početna", "o nama", "kontakt" i sl), formular za pretragu i druge slične elemente
<header> tag može stajati i na vrhu 'unutrašnjih' odeljaka stranice (koji se tipično definišu preko taga <section>, * ali i na druge načine)

Tag <nav>

Tag <nav> koristi se kao okvir za kolekciju navigacionih linkova prema drugim stranicama sajta (navigacioni linkovi su najčešće postavljeni pri vrhu stranice, ali, često se pojavljuju i na drugim mestima)

Tag <footer>

Tag <footer> specifično je namenjen definisanju "podnožja" stranice, u koje se tipično smeštaju: kratak opis sajta (odnosno, firme/preduzeća i sl), kontakt informacije, nekoliko najvažnijih navigacionih linkova, linkovi ka pravilniku korišćenja, i druge srodne informacije

Tag <main>

Tag <main> namenjen je centralnom delu stranice, u kome se nalazi glavni sadržaj

Struktura HTML dokumenta je sada univerzalna i lako je razumeti šta je prava namena pojedinačnih elemenata (odnosno tagova).

Definisanje finalne strukture stranice

Da bismo upotpunili (HTML5) strukturu stranice dodaćemo i tagove <head> kao i uokvirujuće <html> tagove.

Ali, pre svega (doslovno - pre ostatka sadržaja), navešćemo direktivu <!DOCTYPE html> sa kojom smo se već susretali, preko koje se browseru sugeriše da je stranica formatirana po standardu HTML5 (i da stranicu tako treba interpretirati).

		
<!DOCTYPE html>

<html>
	<head>
		<meta charset='UTF-8'/>
		<title>Web dizajn 5</title>
		<link rel='stylesheet' href='stil.css'>
	</head>

	<body>
		<div id='okvir'>
			<header>
				<img id='nav_logo' src='/slike/logo.png' alt='logo' title='logo'/>

				<div id='nav_razdvajac'>
				</div>

				<nav>
					<a href='index.html'>Početna</a>
					<a href='o_nama.html'>O nama</a>
					<a href='kontakt.html'>Kontakt</a>
				</nav>
			</header>

			<main>
				<h1>Naslov stranice</h1>
				
				<p>
					Prvi pasus
				</p>
				
				<p>
					Drugi pasus
				</p>
			</main>

			<footer>
			</footer>
		</div>
	</body>
</html>

Slika 4. - Dopunjen primer HTML strukture, sa HTML5 tagovima i id-ovima.

Specijalizovanim tagovima koje smo koristili, mogu se pripisivati i id-ovi (naravno, i klase), ali, u slučaju jednostavnih sajtova može se čak i izbeći upotreba id atributa (tj. mogu se pisati CSS selektori koji se direktno obraćaju HTML elementima kao što su <main>, <nav>, <footer> i sl).

Prethodno definisanoj HTML strukturi može se pripisati sledeći CSS kod:

		
* {
	margin:          0;
	padding:         0;
	font-family:     Arial, sans-serif;
	text-decoration: none;
}

#okvir {
	width:           100vw;
	height:          100vh;
	
	display:         flex;
	flex-direction:  column;
	justify-content: flex-start;
	align-items:     stretch;
}

header {
	height:          60px;
	background:      #707070;

	display:         flex;
	flex-direction:  row;
	justify-content: flex-start;
	align-items:     center;
}

nav {
	display:         flex;
	flex-direction:  row;
	justify-content: flex-start;
	align-items:     stretch;

	margin-right:    20px;
}

#nav_logo {
	width:  24px;
	height: auto;
	margin: 0 0 0 18px;
}

#nav_razdvajac {
	flex: 1;
}

nav a {
	color:       #ffffff;
	font-weight: bold;
	margin:      0 24px 0 0;
}

main {
	flex:    1;
	padding: 10vh 30vw 10vh 30vw;

	display:         flex;
	flex-direction:  column;
	justify-content: flex-start;
	align-items:     stretch;
}

footer {
	height:      100px;
	background:  #999999;
}

Slika 5. - CSS kod koji se povezuje sa HTML strukturom sa prethodne slike.

Dodatna objašnjenja

Iako HTML struktura koju smo definisali nije komplikovana (a isto važi i za pripadajući CSS kod), pozabavićemo se ipak detaljnijom analizom (slobodno proučite kod više puta, dok vam svi detalji ne budu sasvim jasni).

Navodimo detalje na koje treba obratiti najviše pažnje:

ponovo koristimo univerzalni selektor *, da pristupimo svim elementima (naravno, univerzalni selektor sadrži samo atribute opšteg tipa)
unutar flex kontejnera "okvir", elementi <header> i <footer> imaju zadatu fiksnu visinu, dok se element <main> (posredstvom parametra flex), širi i skuplja
elementi <header> i <main> su (kao što smo videli), unutrašnji elementi kontejnera "okvir", ali - sami po sebi su takođe i flex kontejneri (odnosno, nosači za svoje unutrašnje elemente), a tako nešto, ne samo da je moguće - već je i krajnje neophodno (i vrlo praktično)
unutar taga <header> mogu se zapaziti tri elementa: slika, prazan <div> i <nav> element sa linkovima, a svrha navedenog praznog <div> elementa je da se širi i skuplja, tako da "otera" sliku levo, a <nav> element sa linkovima desno
budući da <nav> element nema eksplicitno zadate dimenzije (niti koristi atribut flex), dimenzije <nav> elementa prilagodiće se sadržaju
visina slike (nav_logo), nije zadata eksplicitno, već je korišćena vrednost auto, čime se postiže da se visina slike proporcionalno prilagodi širini
u CSS-u, navigacionim linkovima smo pristupali metodom vezivanja selektora (nav a)

Za kraj, izdvojili smo nekolicinu popularnih tagova koji su takođe vredni pažnje pri početnom upoznavanju sa HTML-om (još nekoliko HTML5 tagova i nekoliko tagova iz prethodnih verzija HTML-a).

Drugi popularni HTML5 tagovi

Pored tagova <main>, <header>, <nav> i <footer>, koji su (praktično) neizostavan deo modernog web dizajna (odnosno, još praktičnije - neizostavan deo velike većine modernih sajtova), postoji još nekoliko HTML5 tagova sa kojima je potrebno upoznati se još na početku.

HTML5 tagovi koje ćemo navesti u nastavku, nisu 'neizostavan deo modernih sajtova', * ali, svakako igraju bitnu ulogu u dobroj organizaciji web stranica (i svakako ćete se i sa njima sretati vrlo često).

<article>

Preko taga <article> uokviruju se zaokružene celinu u HTML kodu, formatirane po obrascu "naslov-sadržaj" i uobličene tako da bi i na "drugim" mestima mogle stajati samostalno.

Na primer, tag <article> često se koristi za pojedinačne oglase na sajtovima sa oglasima, komentare korisnika, pojedinačne poruke u chat aplikacijama (ili na forumima), i naravno - kako sam naziv taga nagoveštava - tekstualne članke (kao što je na primer članak koji trenutno čitate).

<section>

Tagovi <section> tipično se koriste za uokviravanje različitih odeljaka stranice koji su formatirani po obrascu "naslov - sadržaj", pri čemu nisu u pitanju celine koje mogu samostalno stajati i na drugim mestima * (kao što je slučaj sa odeljcima za koje se koristi tag <article>).

Za primer možemo uzeti strukturu sajta koja se često pojavljuje na web stranicama na kojima softverske kompanije promovišu različite programe:

		
<section>
	<h2>Prednosti</h2>
	<ul>
		<li>Pouzdanost</li>
		<li>Moderan dizajn</li>
		<li>Tehnička podrška 24/7</li>
	</ul>
</section>
<section>
	<h2>Kompanije koje koriste naša rešenja</h2>
	<a href='https://komapnija1.com'>Kompanija 1</a>
	<a href='https://komapnija2.com'>Kompanija 2</a>
	<a href='https://komapnija3.com'>Kompanija 3</a>
</section>
<section>
	<h2>Preuzmite probnu verziju</h2>
	<div>
		<a href="/download/windows">Windows</a>
		<a href="/download/macos">MacOS</a>
		<a href="/download/linux">Linux</a>
	</div>
</section>

Slika 6. - Primer upotrebe tagova section.

header

main

footer

Slika 7. - Primer HTML5 strukture sa prethodne slike.

* Primera radi, ako uredno formatiran oglas za prodaju automobila premestimo na stranicu koja se bavi istraživanjem iz oblasti medicine, pojava auto oglasa svakako bi delovala čudno u navedenom kontekstu, ali, sam po sebi, oglas je zaokružena celina i "ima smisla" (ili, malo drugačije, ako vidimo takav oglas na "čudnom mestu", možda ćemo se pitati zašto je oglas "tu gde jeste", ali, prepoznaćemo da je u pitanju oglas).

Ako (nasuprot prethodnom primeru), na medicinski sajt "presadimo" neki od <section> odeljaka iz gornjeg primera, takav odeljak na drugom mestu neće imati smisla sam po sebi, tj. neće imati samostalno značenje (npr. ako na stranici koja inače opisuje procedure za lečenje sportskih povreda i sl. vidimo odeljak koji sadrži linkove za preuzimanje probne verzije softvera - doći će do zabune).

<aside>

Preko taga <aside> definišu se sporedni odeljci stranice sa informacijama koje su vezane za glavni sadržaj, a pored toga, tagovi <aside> često se koriste i za uokviravanje usputnih napomena unutar pasusa, ili između pasusa.

<canvas>

Preko taga <canvas> ....

		
<canvas id='canvas_1'>
</canvas>

Slika 8. - Tag canvas, preko koga se definišu (virtuelna) platna za iscrtavanje grafičkih elemenata.

.... uz malo CSS-a ....

		
#canvas_1 {
	border:        solid 1px #5599ff;
	border-radius: 12px;
	background:    #fcfcfd;
}

Slika 9. - CSS kod za canvas element sa prethodne slike.

.... i JavaScript-a * ....

		
let cnv = document.getElementById("canvas_1");
let ctx = cnv.getContext("2d");

ctx.beginPath();
ctx.arc(45, 40, 25, 0, 2 * Math.PI);
ctx.stroke();
	
// Sami dodajte preostale dve kružnice

Slika 10. - JS kod za iscrtavanje kružnica.

.... mogu se definisati "platna" za iscrtavanje 2D grafičkih elemenata.

<figure> i <figcaption>

Tag <figure> definiše celinu koju čine određeni element i tekstualni opis datog elementa.

U najpraktičnijem smislu, u većini situacija je u pitanju slika sa opisom (preko taga <img> definisana je sama slika, a preko taga <figcaption> definiše se opis slike).

Bez pravih semantičkih tagova, ne bi bilo lako razumeti da li se određeni opis odnosi na određenu sliku ili treba da stoji samostalno.

		
<figure>
	<img src='slika.png' alt='figure i figcaption'/>
	<figcaption>
		Slika 12. - Primer upotrebe tagova figure i figcaption.
	</figcaption>
</figure>

Slika 11. - Primer upotrebe tagova figure i figcaption.

Ostali popularni tagovi

Da bismo upotpunili diskusiju o osnovama HTML-a, pomenućemo još nekoliko često korišćenih tagova (koji su deo HTML-a duži niz godina unazad, tj. pojavili su se pre specifikacije HTML5).

<pre>, <code> i <samp>

Za pravilan prikaz programskog koda na sajtovima, koristi se kombinacija tagova <pre>, <code> i <samp>, kao što ste do sada mnogo puta mogli videti na našim stranicama:

		
let a = [ 1, 2, 3 ]
// .... ali, niz je tu samo za ukras;
// zapravo se bavimo HTML tagovima :)

Slika 12. - Primer upotrebe tagova pre i code.

Tag <pre> ("preformatted"), obezbeđuje da tekst unutar taga bude prikazan u browseru - doslovno onako kako je napisan u izvornoj datoteci (podsetimo se da, inače, interpretacija HTML koda unutar tagova kao što su <p>, <div> i sl, podrazumeva da će znaci za prelazak u novi red, kao i višestruke uzastopne pojave ostalih whitespace znakova - biti zanemarene)
Tagovi <code> i <samp> su (praktično), semantički tagovi, koji označavaju delove programskog koda (code) i simulirani rezultat izvršavanja programa u terminalu (samp)

<q> (quote)

Za označavanje citata u HTML kodu, koristi se tag <q> (quote), semantički tag koji automatski dodaje znake navoda.

Naredni odeljak sadrži citat uokviren <q> tagovima (koji se nalaze unutar tagova <aside>):

<em>, <strong> i <mark>

Za posebno označavanje pojedinih reči i celina u pasusima (ili na drugim mestima), koriste se sledeći tagovi:

<em> - naglašavanje delova teksta (naizgled deluje kao da je upotrebljen tag <i>)
<strong> - posebno naglašavanje delova teksta (naizgled deluje kao da je upotrebljen tag <b>)
<mark> - markiranje teksta bojom

<sub> i <sup>

Za zapis _indeksa i ^eksponenata koriste se tagovi <sub> (subscript) i <sup> (superscript).

Sledeći koraci ....

Pre svega, ponovimo da postoje i HTML 5 tagovi koje u članku nismo navodili (kao i mnogi 'stariji' tagovi), ali, budući da naš serijal članaka o web dizajnu ne pretenduje da bude 'enciklopedija internet jezika' (već nam je namera da čitaocima približimo tematiku web dizajna i pomognemo u samostalnom kreiranju prvih sajtova), moramo biti praktični i negde ipak 'podvući granicu' (s tim što u budućnosti svakako možete očekivati još članaka na temu osnovne HTML strukture i, naravno, članke o izradi web stranica u opštem smislu).

Primere gotove stranice možete pronaći na sledećoj adresi:

Web dizajn 05 - primer

.... a u sledećem članku bavićemo se responzivnim web dizajnom.

Autor članka Nikola Vukićević Za web portal codeblog.rs

Napomena: Tekstovi, slike, web aplikacije i svi ostali sadržaji na sajtu codeblog.rs (osim u slučajevima gde je drugačije navedeno) predstavljaju intelektualnu svojinu autora sajta codeblog.rs i zabranjeno je njihovo korišćenje na drugim sajtovima i štampanim medijima, kao i bilo kakvo drugo korišćenje u komercijalne svrhe, bez eksplicitnog pismenog odobrenja autora.