HTML Block and Inline Elements

HTML Elements are responsible for designing the webpage, It has a default display value depending on the type of element used. HTML Elements are broadly characterized in two categories of display value that is Block or Inline. let us understand the HTML Block-level Elements and Inline Elements in detail.

Block-Level Elements

A Block- Level Elements always starts on a new line and takes the entire space available from right to left on the line. It behaves as if it has a line break before and after the line on the webpage.

Syntax

<div>content of the line</div>.
some common block-level element which structure the line are <div>,<p>,<article>,<section>,<figure>,<footer>,<videos>,<h1>,<h2>,<blockquotes> etc.

Features of Block-Level Elements

  • The <div> tag –  It is a very important block-level tag often used as a container of the HTML Elements. It helps to create webpage layout and does not generally require Attributes in HTML but style, classes and id are commonly used in it.
  • It helps to design a block of content when used with cascading style sheets.
  • Block- Level Element create a larger structure than Inline elements.
  • Block-Level Elements contains another block-level and as well as inline elements.

Example of HTML Block-Level Element :

<!DOCTYPE html> 
<html> 
<body> 
  <style> 
    body { 
      text-align: left; 
    } 
    
    h1 { 
      color: maroon; 
    } 
  </style> 
  <div style="background-color:blue; 
        color:white; 
        padding:40px;"> 
    
    <h1>CODEBUN</h1> 
      <h3>Website for learing programming tutorials.</h3> 

    <h3>we higly apperciate feedbackds from you about the courses and the topics .</h3> 

</div> 

</body> 

</html>

output:

 

 

Inline Elements

An Inline Element does not start on a new line and takes only the required space within the sentence of the line that includes the main part of the text and not the entire line available on the webpage.

Syntax

<span>content of the element</span>.
some common Inline elements which takes the necessary part are <span>,<img>,<code>,<cite>,<button>,<input>,<a>,<script <br>,<abbr>,etc.

 

Features of Inline Elements

  • The <span> tag –  It is a very important Inline tag often used as a container  to markup a part of a sentence or a part of a text of the HTML Elements. It appears on the body of the HTML page and does not generally require Attributes in HTML but style, classes, and id are commonly used in it.
  • Inline Elements contain data and other Inline Elements.
  • Inline Element helps to design the part of the text when used with a cascading style sheet.
  • Inline Elements create shorter structures than Block-Level Elements.

Example of HTML Inline Element :

<!DOCTYPE html>
<html>
<body>

<h2>Exmaple of inline element</h2>

<p>My favourite color is <span style="color:red;font-weight:bold">red</span> and my favourite fruit is <span style="color:orange;font-weight:bold">orange</span> </p>

</body>
</html>

output: