HTML Blok ve Satır İçi Öğe Yapıları!

Bütün html öğeleri genel anlamda satır içi ve blok olarak ikiye ayrılır. Bu makalede bu iki kategoriyi adım adım açıkladık.

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

İki ekran değeri: blok ve satır içi’dir.

Blok Seviyesi Elemanları

Blok seviyeli bir eleman her zaman yeni bir satırda başlar ve mevcut tüm genişliği alır (olabildiğince sola ve sağa doğru uzanır).

<div> öğesi blok düzeyinde bir öğedir.

<div>Hello World</div>

HTML’deki blok öğeleri;

<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 Elemanları

Bir satır içi öğe yeni bir satırda başlamaz ve yalnızca gerektiği kadar genişlik alır.

Bu, paragraf içindeki bir satır içi <span> öğesidir .

<span>Hello World</span>

HTML’deki satır içi öğeler:

<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>

<div> Elemanı

<div>etiketi html öğelerinin bir dış kalıbı olarak kullanılıyor. Bir evin duvarları gibi düşünebilirsiniz.

<div> etiketi zorunlu değildir ve style, id ve class ile istenilen düzen verilebilir.

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

Çıktısı;

See the Pen div style by ArmyYazılım (@armyyazilim) on CodePen.

<span> Elemanı

<span>Eleman sık sık bazı metin için bir kalıp olarak kullanılır.

<span> etiketi zorunlu değildir ancak style, id ve class ile beraber kullanılır.

<h1>My <span style="color:red">Important</span> Heading</h1>

Çıktısı;

See the Pen span text by ArmyYazılım (@armyyazilim) on CodePen.

HTML Gruplandırma Etiketleri

İlginizi çekebilir…

WordPress Kişisel Blog Temaları! (Ücretli – Ücretsiz)

Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz …