HTML nədir və necə işləyir?

Frontend proqramlaşdırmaya yeni başlayırsınızsa, qarşınıza çıxan ilk texnologiyalardan biri HTML olacaq. Bəs HTML nədir, nə üçün istifadə olunur və brauzer yazdığımız HTML kodunu necə veb səhifəyə çevirir?

HTML veb səhifənin əsas strukturunu yaratmaq üçün istifadə olunan markup dilidir. Başlıq, mətn, şəkil, link, menyu, siyahı, forma və digər məzmunların səhifədə hansı məna və strukturla yerləşəcəyini HTML vasitəsilə müəyyən edirik.

Sadə desək, bir veb saytı bina kimi düşünsək, HTML həmin binanın əsas konstruksiyasıdır. CSS onun görünüşünü formalaşdırır, JavaScript isə səhifəyə interaktivlik əlavə edir.

Frontend sahəsinə başlamağı düşünürsünüzsə, əvvəlcə frontend developer-in nə iş gördüyünü başa düşmək HTML, CSS və JavaScript-in bir-biri ilə əlaqəsini daha rahat anlamağa kömək edə bilər.

HTML nədir?

HTML — HyperText Markup Language ifadəsinin qısaltmasıdır.

Burada vacib məqam HTML-in proqramlaşdırma dili olmamasıdır. HTML bir markup language, yəni işarələmə dilidir. Onun əsas işi hesablamalar aparmaq və ya proqram məntiqi qurmaq deyil, səhifədəki məzmunun strukturunu və mənasını müəyyən etməkdir.

Məsələn:

<h1>HTML nədir?</h1>

<p>
 HTML veb səhifənin strukturunu yaratmaq üçün istifadə olunur.
</p>

Burada <h1> səhifənin əsas başlığını, <p> isə paraqrafı göstərir.

Brauzer bu kodu oxuyur və istifadəçiyə artıq HTML kodunun özünü deyil, formatlaşdırılmış səhifəni göstərir.

HTML elementlərinin əksəriyyəti tag-lardan yaradılır və elementlər funksiyalarına görə mətn, multimedia, form, section və digər kateqoriyalara ayrılır.

HTML nə üçün istifadə olunur?

HTML-in əsas məqsədi veb səhifədəki məlumatı strukturlaşdırmaqdır.

Məsələn, bir blog səhifəsində aşağıdakı hissələr ola bilər:

• əsas başlıq;
• məqalənin mətni;
• şəkillər;
• digər səhifələrə keçidlər;
• müəllif haqqında məlumat;
• əlaqəli məqalələr;
• əlaqə forması.

Bunların hər biri HTML elementləri ilə səhifəyə əlavə edilə bilər.

Məsələn:

<h1>Frontend proqramlaşdırma</h1>

<p>Frontend istifadəçinin gördüyü interfeys hissəsidir.</p>

<img src="frontend.webp" alt="Frontend proqramlaşdırma">

<a href="/portfolio">Portfolioya bax</a>

Burada HTML bizə başlığın başlıq, mətnin paraqraf, şəklin şəkil və keçidin link olduğunu bildirir.

HTML necə işləyir?

İstifadəçi brauzerdə bir səhifəni açanda serverdən həmin səhifəyə aid resurslar əldə edilir.

Brauzer HTML sənədini oxuyur, elementləri analiz edir və səhifənin strukturunu qurur. CSS həmin strukturun necə görünəcəyini, JavaScript isə səhifədəki interaktiv davranışların necə işləyəcəyini müəyyən edə bilər.

Sadələşdirilmiş formada proses belədir:

1. HTML → struktur
2. CSS → dizayn
3. JavaScript → interaktivlik

Məsələn, HTML ilə bir button yarada bilərik:

<button>Ətraflı bax</button>

CSS ilə onun görünüşünü dəyişə, JavaScript ilə klikləndikdə hansı əməliyyatın baş verəcəyini müəyyən edə bilərik.

Buna görə HTML-i öyrənmək frontend proqramlaşdırmanın əsas mərhələlərindən biridir.

HTML tag və element nədir?

HTML öyrənərkən “tag” və “element” sözlərini tez-tez görəcəksiniz.

Məsələn:

<p>Salam dünya!</p>

Burada:

<p> — açılış tagıdır.

</p> — bağlanış tagıdır.

Bütün struktur isə HTML elementidir.

Başqa nümunə:

<h2>Frontend nədir?</h2>

h2 bu mətnin ikinci səviyyəli başlıq olduğunu bildirir.

HTML-də istifadə olunan elementlərin siyahısı kifayət qədər genişdir və onlar səhifədə gördüyümüz müxtəlif məzmun növlərini strukturlaşdırmağa imkan verir.

Ən çox istifadə olunan HTML tagları hansılardır?

Yeni başlayan zaman bütün HTML taglarını əzbərləməyə ehtiyac yoxdur. Əsas tagların hansı məqsədlə istifadə olunduğunu bilmək kifayətdir.

Məsələn:

<h1>Əsas başlıq</h1>

<h2>Alt başlıq</h2>

<p>Paraqraf mətni</p>

<a href="/about">Haqqımda</a>

<img src="image.webp" alt="Şəklin izahı">

<ul>
 <li>HTML</li>
 <li>CSS</li>
 <li>JavaScript</li>
</ul>

Burada:

h1-h6 — başlıqlar,

p — paraqraf,

a — link,

img — şəkil,

ul və li — siyahı yaratmaq üçün istifadə olunur.

Real layihələrdə bunlardan əlavə header, nav, main, section, article, footer, form, input və button kimi elementlərlə də tez-tez işləyəcəksiniz.

HTML attribute nədir?

HTML elementlərinə əlavə məlumat vermək üçün attribute istifadə olunur.

Məsələn:

<a href="https://example.com">Sayta keç</a>

Burada href linkin istifadəçini hansı ünvana aparacağını müəyyən edir.

Şəkildə isə:

<img src="html.webp" alt="HTML səhifə strukturu">

src şəklin ünvanını, alt isə şəklin məzmununu izah edir.

MDN-in HTML sintaksisi sənədlərində də attribute-ların element haqqında məzmunun özündə olmayan əlavə məlumat verdiyi izah edilir.

Sadə HTML səhifəsi necə yaradılır?

Ən sadə HTML sənədlərindən biri belə görünə bilər:

<!DOCTYPE html>
<html lang="az">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>Mənim ilk HTML səhifəm</title>
</head>

<body>
 <header>
   <h1>Salam!</h1>
 </header>

 <main>
   <p>Bu mənim ilk HTML səhifəmdir.</p>
 </main>
</body>
</html>

Burada hər hissənin öz funksiyası var.

<!DOCTYPE html> brauzerə sənədin müasir HTML sənədi olduğunu bildirir.

<html> sənədin əsas root elementidir.

<head> istifadəçinin əsas səhifə məzmununda görmədiyi metadata və digər texniki məlumatları saxlaya bilər.

<title> brauzer tabında göstərilən səhifə başlığını müəyyən edir.

<body> isə istifadəçinin səhifədə gördüyü əsas məzmunu saxlayır.

Semantic HTML nədir?

HTML yalnız elementləri səhifəyə yerləşdirmək üçün deyil, onların mənasını göstərmək üçün də istifadə olunur.

Məsələn, nəzəri olaraq səhifənin bir çox hissəsini div ilə qurmaq mümkündür:

<div>...</div>
<div>...</div>
<div>...</div>

Ancaq bəzi hallarda daha mənalı elementlərdən istifadə etmək mümkündür:

<header>...</header>

<nav>...</nav>

<main>
 <article>
   ...
 </article>
</main>

<footer>...</footer>

Buna semantic HTML yanaşması deyilir.

nav elementinin naviqasiya, article elementinin ayrıca məzmun, footer elementinin isə səhifənin və ya bölmənin footer hissəsi olduğunu struktur səviyyəsində göstərmək mümkündür.

Semantic elementlər düzgün istifadə edildikdə kodun strukturunu daha aydın və idarəolunan edir.

HTML və SEO arasında əlaqə nədir?

HTML frontend ilə SEO-nun bir-birinə ən çox toxunduğu nöqtələrdən biridir.

Google səhifənin məzmununu və strukturunu anlamaq üçün səhifədəki müxtəlif siqnallardan istifadə edir. Buna görə düzgün heading iyerarxiyası, səhifə title-ı, linklər, şəkillərin alt text-ləri və semantik struktur SEO baxımından da nəzərə alınmalıdır.

Məsələn:

<h1>HTML nədir?</h1>

<h2>HTML necə işləyir?</h2>

<h2>HTML tagları hansılardır?</h2>

Bu struktur həm istifadəçiyə məqaləni rahat oxumağa imkan verir, həm də məzmunun iyerarxiyasını aydın saxlayır.

Heading, title, daxili link və şəkil optimizasiyasının SEO daxilində necə istifadə olunduğunu ayrıca On-page SEO bələdçisində izah etmişəm.

HTML strukturunun real layihələrdə frontend və SEO ilə birlikdə necə tətbiq olunduğuna baxmaq istəyirsinizsə, SEO və frontend layihələrimə də nəzər sala bilərsiniz. Portfolio daxilində HTML, CSS, JavaScript və digər frontend texnologiyalarından istifadə edilmiş müxtəlif layihələr mövcuddur.

HTML öyrənərkən ən çox edilən səhvlər

Yeni başlayanların etdiyi səhvlərin böyük hissəsi mürəkkəb koddan yox, əsas strukturu düzgün qurmamaqdan yaranır.

Tagları düzgün bağlamamaq

Məsələn:

<p>Salam

əvəzinə:

<p>Salam</p>

yazmaq daha düzgün strukturdur.

Bəzi HTML elementləri ayrıca closing tag tələb etmir, ona görə hər elementin sintaksisini ayrıca öyrənmək lazımdır.

Heading-ləri yalnız ölçüsünə görə seçmək

h1, h2 və h3 yalnız mətnin böyük və ya kiçik görünməsi üçün seçilməməlidir.

Onlar məzmun iyerarxiyasını ifadə edir.

Vizual ölçü və dizayn CSS ilə idarə edilməlidir.

Hər yerdə div istifadə etmək

div çox faydalı elementdir, amma səhifənin bütün strukturunu yalnız div elementləri ilə qurmaq həmişə yaxşı seçim deyil.

Uyğun yerdə header, nav, main, article, section və footer kimi semantik elementlərdən istifadə etmək kodu daha aydın edir.

Şəkillərdə alt attribute-u nəzərə almamaq

Şəkillərin məqsədinə uyğun alt mətninin verilməsi accessibility baxımından vacibdir və axtarış sistemlərinə şəkil haqqında kontekst verə bilər.

HTML, CSS və JavaScript-i qarışdırmaq

Başlanğıcda bu üç texnologiyanın rolunu ayırmaq vacibdir:

HTML səhifənin strukturunu yaradır.

CSS görünüşünü idarə edir.

JavaScript davranış və interaktivlik əlavə edir.

Bu fərqi başa düşdükdən sonra frontend öyrənmək xeyli rahatlaşır.

HTML öyrəndikdən sonra nə öyrənmək lazımdır?

HTML frontend üçün başlanğıcdır, amma təkbaşına müasir veb tətbiq hazırlamaq üçün kifayət etmir.

Normal öyrənmə ardıcıllığı belə ola bilər:

HTML → CSS → JavaScript → Git → React

HTML ilə struktur qurmağı öyrəndikdən sonra CSS vasitəsilə həmin strukturu dizayn etməyi, daha sonra JavaScript ilə səhifəyə interaktivlik əlavə etməyi öyrənmək məntiqlidir.

Bundan sonra React kimi texnologiyalara keçmək daha rahat olur.

Frontend və SEO-nun eyni layihədə necə birlikdə istifadə oluna bildiyini real iş nümunələri ilə görmək istəyirsinizsə, portfolio səhifəsinə baxa bilərsiniz.

Nəticə

HTML nədir sualının ən sadə cavabı budur: HTML veb səhifənin məzmununu və strukturunu yaratmaq üçün istifadə olunan işarələmə dilidir.

Başlıqlar, paraqraflar, linklər, şəkillər, formalar və səhifənin semantik hissələri HTML elementləri vasitəsilə qurulur. CSS və JavaScript daha sonra bu strukturun görünüşünü və davranışını inkişaf etdirir.

Frontend proqramlaşdırmaya yeni başlayırsınızsa, HTML-i sadəcə tagları əzbərləməklə deyil, kiçik səhifələr quraraq öyrənmək daha faydalıdır. Bir başlıq, menyu, mətn, şəkil, link və formadan ibarət sadə səhifə hazırlamaq belə əsas anlayışları praktikada görməyə kömək edir.

Növbəti mərhələdə isə HTML ilə yaratdığımız bu strukturun CSS vasitəsilə necə dizayn edildiyini öyrənəcəyik.