HTML kod uslubi

Izchil, toza va joiz HTML kod boshqalar uchun sizning kodingizni o‘qish va tushunishni osonlashtiradi.

Bu yerda yaxshi HTML kod yaratish bo‘yicha ba’zi ko‘rsatmalar va maslahatlar keltirilgan.

Hujjat turini har doim e’lon qiling

Doim hujjat turini (document type) hujjatingizning birinchi satrida e’lon qiling.

HTML uchun to‘g‘ri hujjat turi:

<!DOCTYPE html>

Element nomlarini kichik harflarda yozing

HTML element nomlarida katta va kichik harflarni aralashtirishga ruxsat beradi.

Biroq, biz element nomlarida kichik harflardan foydalanishni tavsiya qilamiz, chunki:

Katta va kichik harflar aralashtirilgan nomlar yomon ko‘rinadi
Dasturchilar odatda kichik harflardan foydalanadi
Kichik harflar toza ko‘rinadi
Kichik harflarni yozish osonroq

Good:

<body>
<p>This is a paragraph.</p>
</body>

Bad:

<BODY>
<P>This is a paragraph.</P>
</BODY>

Barcha HTML elementlarini yoping

HTML da barcha elementlarni yopish shart emas (masalan <p> elementi).

Biroq, biz barcha HTML elementlarini yopishni kuchli tavsiya qilamiz, xuddi shunday:

Good:

<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>

Bad:

<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>

Atribut nomlarini kichik harflarda yozing

HTML atribut nomlarida katta va kichik harflarni aralashtirishga ruxsat beradi.

Biroq, biz atribut nomlarida kichik harflardan foydalanishni tavsiya qilamiz, chunki:

Katta va kichik harflar aralashtirilgan nomlar yomon ko‘rinadi
Dasturchilar odatda kichik harflardan foydalanadi
Kichik harflar toza ko‘rinadi
Kichik harflarni yozish osonroq

Good:

<a href="/html">Visit our HTML tutorial</a>

Bad:

<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

Atribut qiymatlarini har doim qo‘shtirnoqqa oling

HTML atribut qiymatlarini qo‘shtirnoqsiz yozishga ruxsat beradi.

Biroq, biz atribut qiymatlarini qo‘shtirnoq ichida yozishni tavsiya qilamiz, chunki:

Dasturchilar odatda atribut qiymatlarini qo‘shtirnoq ichida yozadi
Qo‘shtirnoq ichidagi qiymatlarni o‘qish osonroq
Agar qiymat bo‘sh joy (probel) o‘z ichiga olsa, qo‘shtirnoqdan FOYDALANISHINGIZ SHART

Good:

Bad:

Juda yomon:

Bu ishlamaydi, chunki qiymatda bo‘sh joylar bor:

Rasmlar uchun alt, width va heightni har doim ko‘rsating

Rasmlar uchun alt atributini doim belgilang. Rasm biror sababga ko‘ra ko‘rsatilmasa, bu atribut muhim ahamiyatga ega bo‘ladi.

Shuningdek, rasmlarning width va height qiymatlarini doim belgilang. Bu sahifa ko‘rinishining sakrab o‘zgarishini kamaytiradi, chunki brauzer rasm yuklanishidan oldin unga joy ajrata oladi.

Good:

Bad:

Bo‘sh joylar va tenglik belgilari

HTML da teng belgisi atrofida bo‘sh joylarga ruxsat beriladi. Lekin bo‘sh joysiz o‘qish osonroq va obyektlarni yaxshiroq guruhlaydi.

Good:

Bad:

Uzun kod qatorlaridan saqlaning

HTML muharriridan foydalanayotganda HTML kodni o‘qish uchun o‘ngga va chapga siljitish QULAY EMAS.

Juda uzun kod satrlaridan qochishga harakat qiling.

Bo‘sh qatorlar va chekinishlar

Sababsiz bo‘sh qatorlar, bo‘sh joylar yoki chekinishlar (indentation) qo‘shmang.

O‘qish qulay bo‘lishi uchun katta yoki mantiqiy kod bloklarini bo‘sh qatorlar bilan ajrating.

O‘qish qulayligi uchun ikkita bo‘sh joydan iborat muharrir (indentation) qo‘shing. Tab tugmasidan foydalanmang.

Good:

<body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>

<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom.</p>

<h2>Paris</h2>
<p>Paris is the capital of France. The Paris area is one of the largest population centers in Europe.</p>

</body>

Bad:

<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2><p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
<h2>London</h2><p>London is the capital city of England. It is the most populous city in the United Kingdom.</p>
<h2>Paris</h2><p>Paris is the capital of France. The Paris area is one of the largest population centers in Europe.</p>
</body>

To‘g‘ri yozilgan jadval misoli:

<table>
<tr>
    <th>Name</th>
    <th>Description</th>
</tr>
<tr>
    <td>A</td>
    <td>Description of A</td>
</tr>
<tr>
    <td>B</td>
    <td>Description of B</td>
</tr>
</table>

To‘g‘ri yozilgan ro‘yxat misoli:

<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>

<title> elementini tashlab ketmang

<title> elementi HTML da majburiy.

Sahifa sarlavhasining mazmuni qidiruv tizimi optimallashtiruvi (SEO) uchun juda muhim! Qidiruv tizimi algoritmlari sahifalarni qidiruv natijalarida qaysi tartibda ko‘rsatishni aniqlashda sahifa sarlavhasidan foydalanadi.

<title> elementi:

brauzer vositalar panelida sarlavha belgilaydi
sahifa sevimlilarga qo‘shilganda unga sarlavha beradi
qidiruv tizimi natijalarida sahifa uchun sarlavhani ko‘rsatadi

Shuning uchun sarlavhani imkon qadar aniq va mazmunli qilishga harakat qiling:

<title>HTML Style Guide and Coding Conventions</title>

<html> va <body>ni tashlab ketish mumkinmi?

HTML sahifa <html> va <body> teglarisiz ham tekshiruvdan (validate) o‘tadi:

Misol

<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

O‘zingiz sinab ko‘ring »

Biroq, biz doim <html> va <body> teglarini qo‘shishni kuchli tavsiya qilamiz!

<body> ni tashlab ketish eski brauzerlarda xatoliklar keltirib chiqarishi mumkin.

<html> va <body> ni tashlab ketish DOM va XML dasturlarini buzishi (crash) ham mumkin.

<head>ni tashlab ketish mumkinmi?

HTML <head> tegini ham tashlab ketish mumkin.

Brauzerlar <body> dan oldingi barcha elementlarni standart <head> elementiga qo‘shadi.

Misol

<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

O‘zingiz sinab ko‘ring »

Biroq, biz <head> tegidan foydalanishni tavsiya qilamiz.

Bo‘sh HTML elementlarini yopish kerakmi?

HTML da bo‘sh elementlarni yopish ixtiyoriy.

Allowed:

Bunga ham ruxsat beriladi:

Agar sizning sahifangizga XML/XHTML dasturlari murojaat qilishini kutsangiz, yopish belgisi (/) ni saqlang, chunki XML va XHTML da u majburiy.

lang atributini qo‘shish

Siz doim <html> tegi ichida lang atributini kiritishingiz kerak, veb-sahifa tilini e’lon qilish uchun. Bu qidiruv tizimlari va brauzerlarga yordam berish uchun mo‘ljallangan.

Misol

<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

O‘zingiz sinab ko‘ring »

Meta ma’lumotlar

To‘g‘ri talqin qilinishi va qidiruv tizimi tomonidan to‘g‘ri indekslanishini ta’minlash uchun til va belgilar kodlashi <meta charset="charset"> HTML hujjatida imkon qadar erta belgilanishi kerak:

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>

Viewport’ni sozlash

Viewport — bu foydalanuvchining veb-sahifaning ko‘rinadigan qismi. U qurilmaga qarab o‘zgaradi - mobil telefondada kompyuter ekraniga qaraganda kichikroq bo‘ladi.

Barcha veb-sahifalaringizga quyidagi <meta> elementini kiritishingiz kerak:

Bu brauzerga sahifa o‘lchamlari va masshtabini qanday boshqarish bo‘yicha ko‘rsatmalar beradi.

width=device-width qismi sahifa kengligini qurilma ekran kengligiga mos qiladi (qurilmaga qarab farq qiladi).

initial-scale=1.0 qismi sahifa brauzerda birinchi marta yuklanganda boshlang‘ich masshtab darajasini belgilaydi.

Mana viewport meta tegisiz veb-sahifa va shu veb-sahifaning viewport meta tegi bilan holatiga misol:

Maslahat: bu sahifani telefon yoki planshetda ko‘rayotgan bo‘lsangiz, farqni ko‘rish uchun quyidagi ikkita havolani bosishingiz mumkin.

Without the viewport meta tag

viewport meta tegi bilan

HTML izohlar

Qisqa izohlar bitta satrda yozilishi kerak, xuddi shunday:

Bir nechta satrga cho‘zilgan izohlar quyidagicha yozilishi kerak:

Uzun izohlar ikkita bo‘sh joy bilan muharrir (indentation) qilinganda kuzatish osonroq bo‘ladi.

Uslublar jadvallaridan foydalanish

Uslublar jadvallariga havola qilish uchun oddiy sintaksisdan foydalaning (type atributi shart emas):

Qisqa CSS qoidalari siqilgan holda yozilishi mumkin, xuddi shunday:

p.intro {font-family:Verdana;font-size:16em;}

Uzun CSS qoidalari bir nechta satrga yozilishi kerak:

body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}

Ochuvchi qavsni selektor bilan bir xil satrga joylashtiring
Ochuvchi qavsdan oldin bitta bo‘sh joydan foydalaning
Ikkita bo‘sh joydan iborat muharrirdan (indentation) foydalaning
Har bir xususiyat-qiymat juftligidan keyin, oxirgisidan ham, nuqtali vergul qo‘ying
Qiymat atrofida faqat qiymat bo‘sh joy o‘z ichiga olganda qo‘shtirnoqdan foydalaning
Yopuvchi qavsni bo‘sh joysiz, yangi satrga joylashtiring

HTML’ga JavaScript yuklash

Tashqi skriptlarni yuklash uchun oddiy sintaksisdan foydalaning (type atributi shart emas):

HTML elementlariga JavaScript orqali kirish

"Iflos" HTML koddan foydalanish JavaScript xatoliklariga olib kelishi mumkin.

Bu ikkita JavaScript operatori har xil natijalar beradi:

Misol

getElementById("Demo").innerHTML = "Hello";

getElementById("demo").innerHTML = "Hello";

O‘zingiz sinab ko‘ring »

JavaScript uslublar qo‘llanmasiga murojaat qiling.

Fayl nomlarida kichik harflardan foydalaning

Ba’zi veb-serverlar (Apache, Unix) fayl nomlarida katta-kichik harflarga sezgir: "london.jpg" ga "London.jpg" sifatida kirib bo‘lmaydi.

Boshqa veb-serverlar (Microsoft, IIS) katta-kichik harflarga sezgir emas: "london.jpg" ga "London.jpg" sifatida kirish mumkin.

Agar katta va kichik harflarni aralashtirib ishlatsangiz, bunga e’tiborli bo‘lishingiz kerak.

Agar katta-kichik harflarga sezgir bo‘lmagan serverdan katta-kichik harflarga sezgir serverga o‘tsangiz, hatto kichik xatoliklar ham veb-saytingizni buzadi!

Bu muammolardan qochish uchun doim kichik harfli fayl nomlaridan foydalaning!

Fayl kengaytmalari

HTML fayllari .html kengaytmasiga ega bo‘lishi kerak (.htm ham ruxsat etiladi).

CSS fayllari .css kengaytmasiga ega bo‘lishi kerak.

JavaScript fayllari .js kengaytmasiga ega bo‘lishi kerak.

.htm va .html o‘rtasidagi farq nima?

.htm va .html fayl kengaytmalari o‘rtasida farq yo‘q!

Ikkalasi ham har qanday veb-brauzer va veb-server tomonidan HTML deb qaraladi.

Standart fayl nomlari

URL oxirida fayl nomi ko‘rsatilmaganda ("https://www.w3schools.com/" kabi), server "index.html", "index.htm", "default.html" yoki "default.htm" kabi standart fayl nomini qo‘shadi.

Agar serveringiz faqat "index.html" standart fayl nomi bilan sozlangan bo‘lsa, faylingiz "default.html" emas, aynan "index.html" deb nomlanishi shart.

Biroq, serverlar bir nechta standart fayl nomlari bilan sozlanishi mumkin; odatda istagancha standart fayl nomlarini sozlashingiz mumkin.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish