HTML - Bloklar
Tüm HTML öğeleri iki kategoriye ayrılabilir (a) Blok Seviyesi Elemanları (b)Satır İçi Elemanlar.
Blok Elemanları
Blok öğeleri, kendilerinden önce ve sonra satır sonu varmış gibi ekranda görünür. Örneğin, <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote> ve <address> öğelerinin tümü blok düzeyi öğelerdir. Hepsi kendi yeni çizgisinde başlar ve onları takip eden her şey kendi yeni çizgisinde görünür.
Satır İçi Öğeler
Öte yandan satır içi öğeler cümlelerin içinde görünebilir ve kendilerine ait yeni bir satırda görünmek zorunda kalmazlar. <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, < code>, <cite>, <dfn>, <kbd> ve <var> öğelerinin tümü satır içi öğelerdir.
HTML Öğelerini Gruplama
Diğer çeşitli HTML etiketlerini gruplamak için çok sık kullandığımız iki önemli etiket vardır (i) <div> etiketi ve (ii) <span> etiketi
<div> etiketi
Bu, çeşitli diğer HTML etiketlerinin gruplanmasında ve öğe grubuna CSS uygulanmasında büyük rol oynayan çok önemli blok seviyesi etiketidir. Şimdi bile <div> etiketi, <div> etiketi kullanarak sayfanın farklı bölümlerini (Sol, Sağ, Üst vb.) Tanımladığımız web sayfası düzeni oluşturmak için kullanılabilir. Bu etiket blokta herhangi bir görsel değişiklik sağlamaz ancak bu CSS ile kullanıldığında daha fazla anlam kazanır.
Misal
Aşağıda <div> etiketinin basit bir örneği verilmiştir. Basamaklı Stil Sayfasını (CSS) ayrı bir bölümde öğreneceğiz, ancak burada <div> etiketinin kullanımını göstermek için kullandık -
<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
</head>
<body>
<!-- First group of tags -->
<div style = "color:red">
<h4>This is first group</h4>
<p>Following is a list of vegetables</p>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</div>
<!-- Second group of tags -->
<div style = "color:green">
<h4>This is second group</h4>
<p>Following is a list of fruits</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</div>
</body>
</html>Bu, aşağıdaki sonucu verecektir -
<span> etiketi
HTML <span> bir satır içi öğedir ve bir HTML belgesindeki satır içi öğeleri gruplamak için kullanılabilir. Bu etiket aynı zamanda blokta herhangi bir görsel değişiklik sağlamaz ancak CSS ile kullanıldığında daha fazla anlam kazanır.
<span> etiketi ile <div> etiketi arasındaki fark, <span> etiketinin satır içi öğelerle, <div> etiketinin ise blok düzeyindeki öğelerle kullanılmasıdır.
Misal
Aşağıda, <span> etiketinin basit bir örneği verilmiştir. Basamaklı Stil Sayfasını (CSS) ayrı bir bölümde öğreneceğiz, ancak burada <span> etiketinin kullanımını göstermek için kullandık -
<!DOCTYPE html>
<html>
<head>
<title>HTML span Tag</title>
</head>
<body>
<p>This is <span style = "color:red">red</span> and this is
<span style = "color:green">green</span></p>
</body>
</html>Bu, aşağıdaki sonucu verecektir -