HTML Block and Inline Elements

Element kasta oo HTML ah waxay leedahay nooc loo soo bandhigo ama muuqaal ugaar ah (default display), taas oo ku xidhan nooca element-iga uu yahay.

Waxaa jira laba nooc oo bandhig ah: block iyo inline.


1.Block-level Elements

Block element wuxuu had iyo jeer ku bilaabmaa khad cusub (new line), browser-ka waxaa uu si toos ah ugu daraa space (margin) ka hor iyo ka dib block elemet-iga.

Block element-igu marwalba wuxuu qaata ballaca buuxa ee la heli karo (full width) ee bogga (wuxuu u fidsan yahay bidix iyo midig ilaa inta uu awoodo).

Labada ugu caansan block elements ee sida caadiga ah loo isticmaalo waa: <p> iyo <div>.

Element-iga <p> wuxuu qeexayaa abuurida ama sameynta baragaraf (paragraph) HTML ah.Sidoo kale <div> wuxuu qeexayaa qayb ama part dukumeenti bogga HTML-ka kamid ah.

Tusaale:



Tusaalooyinka kale ee block elements waxaa ka mid ah:

  1. <address>
  2. <article>
  3. <aside>
  4. <blockquote>
  5. <canvas>
  6. <dd>
  7. <div>
  8. <dl>
  9. <dt>
  10. <fieldset>
  11. <figcaption>
  12. <figure>
  13. <footer>
  14. <form>
  15. <h1> - <h6>
  16. <header>
  17. <hr>
  18. <li>
  19. <main>
  20. <nav>
  21. <noscript>
  22. <ol>
  23. <p>
  24. <pre>
  25. <section>
  26. <table>
  27. <tfoot>
  28. <ul>
  29. <video>


2. Inline Elements

Inline elements kama bilowdaan khad cusub ama line cusub kaliya waxey qaadata ballac ku filan (enough width).

Inline elements-ka waa opposite ka (kasoo horjeedka) block elements oo marwalba way isku xigaan oo way isdaba galaan (inline).

Tusaalaha soo socdaa wuxuu muujinayaa inline elements sidey isugu xigsadaan:




Inline elements-ka HTML waxaa ka mid ah:

  1. <a>
  2. <abbr>
  3. <acronym>
  4. <b>
  5. <bdo>
  6. <big>
  7. <br>
  8. <button>
  9. <cite>
  10. <code>
  11. <dfn>
  12. <em>
  13. <i>
  14. <img>
  15. <input>
  16. <kbd>
  17. <label>
  18. <map>
  19. <object>
  20. <output>
  21. <q>
  22. <samp>
  23. <script>
  24. <select>
  25. <small>
  26. <span>
  27. <strong>
  28. <sub>
  29. <sup>
  30. <textarea>
  31. <time>
  32. <tt>
  33. <var>



Assalamu Caleykum,

Hassani at Gocoding!