Loading Please Wait...

Logo Lynxsia IT Solutions

HTML Block & Inline Elements

Block & Inline Elements

Based on the display property, every HTML element has its own display value that is either Block or Inline.

Block Elements

A block level element always span the full width space available from left to right.

These elements start from new line and browser adds some space (margin) before and after the element.

Common block level elements are <h1> to <h6>, <p>, <div>

This is paragraph

Let's see with some example
					 
        
          <!DOCTYPE html>
          <html>
            <body>
              <p>This is paragraph</p>
              <div>This is div/section</div>
            </body>
          </html>
        
      
Block Level Elements In HTML
<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>
Inline Elements

An inline level element takes as much width as necessary/required.

These elements start just after (same line - on left) the previous element.

Common block level elements are <span>, <a>

This is span element inside paragraph

Let's see with some example
					 
        
          <!DOCTYPE html>
          <html>
            <body>
              <span>Span element</span>
              <a href="https://lynxsia.com/">Link element</a>
            </body>
          </html>
        
      
Inline Elements In HTML
<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>

How you feel about this blog:

Share this blog on:

Report Us

If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com

Contact Us
Ads
Logo
Lynxsia IT Solutions

We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..

Kotwali Road, Chhiptehri, Banda, 210001, UP, India

Copyright © 2022, Lynxsia IT Solutions, All rights reserved