HTML Bloklar ve Satır İçi Ögeler

Her HTML öğesinin, ne tür öğe olduğuna bağlı olarak varsayılan bir görüntüleme değeri vardır.

İki görüntüleme değeri vardır: blok ve satır içi.

Blok Düzeyindeki Ögeler

Blok düzeyindeki bir öğe her zaman yeni bir satırda başlar. Tarayıcılar öğenin önüne ve arkasına otomatik olarak bir miktar boşluk (kenar boşluğu) ekler. Blok düzeyindeki bir öğe her zaman mevcut olan tüm genişliği kaplar (olabildiğince sola ve sağa doğru uzanır).

En çok kullanılan iki blok etiketi vardır. Bunlar <p> ve <div> etiketleridir.

<p> etiketi daha önceki yazılarda da açıkladığımız gibi paragraf oluşturmak içindir.

<div> ögesi bir HTML şablonunda bir bölümü tanımlamak için kullanılır.

<!DOCTYPE html>
<html>
<body>

<p>Merhaba Dünya</p>
<div>Merhaba Dünya</div>

</body>
</html>

Blok Düzeyindeki Etiketler

İlerleyen bölümlerde daha detaylı şekilde açıklayacağız. Yine de bu bölüm gereği blok düzeyi etiketleri tanıyalım

<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>

Satır İçi Ögeler

Satır içi ögeler hiç bir durumda yeni satırda başlamazlar, satır içi ögeler, sadece gerektiği kadar genişlikte yer alır. Aşağıdaki örnekte <span> etiketi ile olan örneği incelediğimizde yeni satırda başlamadığını görebiliriz.

<!DOCTYPE html>
<html>
<body>

<span>Merhaba Dünya</span>
<span>Merhaba Dünya</span>

</body>
</html>

Aşağıda satır içi ögeleri inceleyebilirsiniz.

<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>

Not: Bir satır içi öğe, blok düzeyinde bir öğe içeremez.

HTML <div> Ögesi

<div> ögesi genellikle diğer HTML ögeleri için bir alan oluşturmak için kullanılmaktadır. Kendine özgü nitelikleri yoktur, ancak CSS style ile stil vermek mümkündür.

<!DOCTYPE html>
<html>
<body>

<div style="background-color:black;color:white;padding:20px;">
  <h2>Ankara</h2>
  <p>Ankara, Türkiye'nin başkentidir.</p>
</div>


</body>
</html>

HTML <span> Ögesi

<span> etiketi, bir metnin veya belgenin bir bölümünü işaretlemek için kullanılan satır içi kapsayıcı etikettir. Tek başına bir niteliği yoktur ancak style, class veya id ile stili veya niteliği değiştirilir.

<!DOCTYPE html>
<html>
<body>

<p>Ankara <span style="color:blue;font-weight:bold;">Türkiye'nin</span> Başkentidir. 
Nüfusu oldukça <span style="color:darkolivegreen;font-weight:bold;">Yüksek</span> bir şehirdir.</p>

</body>
</html>

Bölüm Özeti

  • Blok ve satır içi olmak üzere iki tür görüntüleme değeri vardır.
  • Blok düzeyi öge her zaman yeni satırdan başlar.
  • Satır içi ögeler yeni satırdan başlamaz. Sadece gerektiği kadar alan kaplar.
  • <div> ögesi blok düzeyindedir. Kapsayıcı olarak kullanılır.
  • <span> ögesi bir metnin, belgenin bir bölümünü işaretlemek için kullanılır.
3 Ekim 2023
Was this article helpful?

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir