Block ve Inline Öğeler

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 54 / 76.

HTML'de öğeler, sayfada nasıl görüntülendiklerine bağlı olarak blok düzeyi veya satır içi öğeler olarak kategorize edilir. Bu iki öğe türü arasındaki farkı anlamak, iyi yapılandırılmış ve görsel olarak çekici düzenler oluşturmak için çok önemlidir. Blok düzeyi ve satır içi öğelerin özelliklerini ve davranışlarını inceleyelim.

Blok Seviyeli Öğeler

Blok düzeyi bir öğe her zaman yeni bir satırdan başlar ve mevcut tüm genişliği kaplayarak mümkün olduğunca sola ve sağa doğru uzanır. Bir içerik "bloğu" oluşturur.

Blok düzeyi öğe örnekleri şunları içerir:

<div>
<h1> - <h6>
<p>
<ul>, <ol>, <li>
<form>
<table>
<header>, <footer>, <section>, <article>, <nav>

Satır İçi Öğeler

Satır içi (inline) bir öğe yeni bir satırdan başlamaz ve yalnızca içeriğine sığacak kadar genişlik kaplar. Satır içi öğelerin bir metin satırı içinde veya blok düzeyinde bir öğenin içinde akmasına olanak tanır.

Satır içi (inline) öğe örnekleri şunlardır:

<span>
<a>
<img>
<strong>, <em>
<input>, <button>, <label>
<textarea>

Görev

Kolay

Çeşitli öğeler içeren bir HTML belgesi size verilmiştir. Göreviniz hangi öğelerin blok düzeyinde (block-level) ve hangilerinin satır içi (inline) olduğunu belirlemek ve ardından farkları vurgulamak için bazı temel CSS'ler uygulamaktır. Aşağıdaki adımları izleyin:

Tüm blok düzeyi öğeleri (div, p, h1) hedefleyen bir CSS kuralı yazın. Bunların background-color değerini lightgray olarak ayarlayın ve 1px solid blue değerinde bir border ekleyin.
Tüm satır içi öğeleri (span, a, img) hedefleyen bir CSS kuralı yazın. Bunların background-color değerini lightyellow olarak ayarlayın ve 1px solid red değerinde bir border ekleyin.

Blok düzeyi öğelerin mevcut tam genişliği nasıl kapladığını ve yeni satırlarda başladığını, satır içi öğelerin ise yalnızca gerektiği kadar yer kapladığını ve satır içinde akış sağladığını gözlemleyin.

Kopya kağıdı

HTML öğeleri, görüntüleme davranışlarına göre blok düzeyi veya satır içi öğeler olarak kategorize edilir.

Blok Düzeyi Öğeler

Blok düzeyi öğeler yeni bir satırdan başlar ve mevcut olan tüm genişliği kaplayarak mümkün olduğunca sola ve sağa doğru uzanır.

Örnekler: <div>, <h1>-<h6>, <p>, <ul>, <ol>, <li>, <form>, <table>, <header>, <footer>, <section>, <article>, <nav>

Satır İçi Öğeler

Satır içi öğeler yeni bir satırdan başlamaz ve yalnızca içeriklerini sığdırmak için gereken genişliği kaplarlar. Bir metin satırı içinde veya blok düzeyi öğelerin içinde akarlar.

Örnekler: <span>, <a>, <img>, <strong>, <em>, <input>, <button>, <label>, <textarea>

Kendin dene

<html>
<head>
    <title>Block vs Inline Elements</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>This is a div element.</div>
    <p>This is a paragraph with a <span>span element</span> inside.</p>
    <h1>This is a heading element.</h1>
    <a href="#">This is a link</a>
    <img src="https://img.freepik.com/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-54865.jpg" alt="Image" width="100">
</body>
</html>