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

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
Etiket | Açıklama |
---|---|
<div> | Belgedeki bir bölümü tanımlar (blok düzeyinde) |
<span> | Belgedeki bir bölümü tanımlar (satır içi) |
İ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 …