Block-level vs Inline HTML Elements

#html #webdev #beginners #tutorial

HTML'ni inline va blok elementlari ko'plab veb dasturchilar uchun chalkashliklar tug'diradigan mavzu hisoblanadi. Chunki ko'plab hollarda dasturchilar inline elementni block yoki aksincha block elementni inline deb o'ylab kod yozib yuborishadi.

Shuning uchun keling, HTML'dagi inline va block elementlarni o'rtasidagi farqni va tez-tez uchrab turadigan turli xil inline va block elementlarni ko'rib chiqamiz.

Blok elementlar: Mavjud bo'lgan butun kenglikni egallaydi. Ular har doim yangi qatordan boshlanadi va yuqori va pastki qismidan margin'ga ega. Uning yonida boshqa elementlar mavjud bo'lmaydi.

Blok elementlarga misollar:

<h1> - <h6> : Bu element 1 dan 6 gacha boʻlgan turli oʻlchamdagi sarlavhalarni kiritish uchun ishlatiladi.
<div>: Bu konteyner, veb-sahifadagi kontentning alohida bo'limlarini yaratish uchun ishlatiladi.
<hr>: Bu boʻsh teg boʻlib, kontentni gorizontal chiziqlar bilan ajratish uchun ishlatiladi.
<li>: Bu teg tartiblangan yoki tartiblanmagan roʻyxat elementlarini kiritish uchun ishlatiladi.
<ul>: Bu teg tartiblanmagan roʻyxat yaratish uchun ishlatiladi.
<ol>: Bu teg tartiblangan roʻyxatni tuzish uchun ishlatiladi.
<p>: Bu teg veb-sahifadagi kontent paragraflarini kiritish uchun ishlatiladi.
<table>: Bu teg jadval ma'lumotlariga ehtiyoj tug'ilganda veb-sahifaga jadvallarni kiritish uchun ishlatiladi.

HTML 5 semantik blok elementlari:

<header>: Bu teg veb-sahifaning barcha asosiy narsalarni, masalan, navbar, logotiplar va veb-sahifa sarlavhasini kiritish uchun ishlatiladi.
<nav>: Bu teg veb-sahifadagi hyperlinklarining turli bloklarini qo'shish orqali turli bo'limlar bo'ylab harakatlanishga yordam beradi.
<footer>: Bu veb-sahifaning avtorizatsiyasi, aloqa va mualliflik huquqlari haqidagi barcha ma'lumotlarni o'z ichiga oladi.
<main>: Veb-sahifaning asosiy mazmuni ushbu tegda joylashgan bo'ladi.
<section>: Bu veb-sahifaning alohida turli bo'limlarida ishlatiladi.
<article>: Bu teg veb-sahifadagi turli mustaqil maqolalarni kiritish uchun ishlatiladi.
<aside>: Bu teg asosiy ma'lumotlarni chetda ko'rsatish uchun ishlatiladi.

<!DOCTYPE html>
<html lang="en">
<head>
    <!--Meta data-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
        content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">

    <style>
        h1 {
            color: #006600;
            text-align: center;
            border: 2px solid #091418;
            background-color: #EEB0B0;
        }
        .container {
            border: 2px solid #040804;
            background-color: slategray;
        }
        p{
            border: 2px solid #040804;
            background-color: #4089c5;
        }
    </style>
</head>
<body>
    <div class="container" >
        <h1>Davron_js</h1>  
<p>
            Bu Butun qatorni egallaydigan blok elementga misol bo'la oladigan (p) element
        </p>
    </div>
</body>

</html>

NATIJA:

Yuqoridagi natijada 3 ta turli xil orqa fon rangiga ega blok elementlar qanday qilib butun qatorni egallagani va ularni atrofidagi marginni ko'rish mumkin. Ushbu holatda h1, p va div blok elementlardan foydalanilgan.

Inline Elementlar:

Inline elementlar faqat o'zlari uchun yetarlicha kenglikni egallaydi va yonida boshqa inline elementlarga joylashishga ruxsat beradi. Inline elementlar yangi satrdan boshlanmaydi va blok elementlari kabi yuqori va pastki qismida marginlarga ega bo'lmaydi.

Inline elementlarga misollar:

<a>: Bu teg veb-sahifaga hyperlinklar kiritish uchun ishlatiladi.
<br>: Bu teg kerak bo'lganda veb-sahifadagi qator uzilishini eslatish uchun ishlatiladi.
<script> : Bu teg tashqi va ichki JavaScript kodlarini kiritish uchun ishlatiladi.
<input>: Bu teg foydalanuvchilardan ma'lumot olish uchun ishlatiladi va asosan formalarda qo'llaniladi.
<img>: Ushbu teg veb-sahifaga go'zallik qo'shish uchun, veb-sahifaga turli xil tasvirlarni kiritish uchun ishlatiladi.
<span>: Bu faqat kerakli joyni egallagan inline konteyner.
<b>: Bu teg qalin(jirniy) matn kerak bo'lgan joylarda qo'llaniladi.
<label>: HTML-dagi teg foydalanuvchilar uchun qulaylikni yaxshilash uchun ishlatiladi, ya'ni agar foydalanuvchi <label>elementidagi matnni bossa, u boshqaruvni almashtiradi.

<!DOCTYPE html>
<html lang="en">

<head>
    <!--Meta data-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">

    <style>
        h1 {
            color: #006600;
            text-align: center;
        }

        span {
            border: 2px solid #040804;
            background-color: #4089c5;
        }

        a {
            border: 2px solid #040804;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Davron_js</h1>

<p>
            Bu <span>span element </span>
            <span>va </span><b>bu</b> esa
            <a href="#">link</a> qaysiki, inline elementga misol bo'la oladigan, faqat o'zlari uchun kerakli joyni egallaydifan.
        </p>
    </div>
</body>

</html>

NATIJA:

Yuqoridagi natijadan faqat yetarlicha kenglikni egallagan va boshqa elementlarga yonma-yon joylashishiga imkon beruvchi <span>, <b>,<a> inline elementlarni ko'rish mumkin.

Inline va Blok elementlar o'rtasidagi farqlar:

Inline Elementlar:

Inline elementlar faqat kerakli kenglikni egallaydi.
Inline elementlar yangi qatordan boshlanmaydi.
Inline elementlar boshqa inline elementlarning orqasida joylashishga imkon beradi.
Inline elementlarning yuqorisida va pastida marginlari yo'q.

Block Elementlar:

Blok elementlari, o'zlari uchun yetarli bo'lgan joy hajmidan qat'iy nazar, to'liq bir qatordagi kenglikni egallaydi.
Blok elementlari har doim yangi qatordan boshlanadi.
Blok elementlar boshqa elementlarga ular bilan yonma-yon joylashishga imkon bermaydi.
Blok elementlarda yuqori va pastida marginlari mavjud.