Inline and Block elements in HTML

Inline And Block Elements In HTML

This is the Seventh part of the HTML course for front-end web development. Starting with HTML is like making a skeleton of a website. and today we will learn about, Inline And Block Elements In HTML. block level elements and inline elements in html difference between inline and block elements in html inline and block element in html.


Join us on Telegram (NEW)


Inline Elements

The first line of an inline element does not begin on a new line.

An inline element takes up only as much space as is required.
Within a paragraph, there is a <span> element.

<body>
    <span>Inline Elements</span>
    <span>Doesn't start from</span>
    <span>a new line</span>
</body>
Inline Elements Doesn’t start from a new line

List of Inline elements in HTML

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

Block Elements

Every block-level element begins on a new line.

A block-level element always occupies the entire available width (stretches out to the left and right as far as it can).

An inline element does not have a top or bottom margin, whereas a block level element has.

<body>
    <div>Block Elements</div>
    <p>starts from</p>
    <p>a new line</p>
</body>
Block Elements

starts from

a new line


List of Block Elements in HTML

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

Learn full front end web development course.

IPhone 13 pro features, display, price is not better ?


Topic Covered Previously



Join us on Telegram (NEW)


Leave a Comment

Your email address will not be published. Required fields are marked *

0

Tech Info