HTML Block and Inline Elements

In general, HTML elements can be divided into two categories. such as:

  • Block-level Elements
  • Inline Elements

Block-level Elements

Block-level elements in HTML are those that create a block of content that takes up the full width of their parent container and always start on a new line. They typically represent larger structures and content such as paragraphs, headings, lists, forms, and structural elements such as <div>, <section>, <article>, and <footer>.

The block-level has several distinct features:

  1. They create a new line before and after the element.
  2. They take up the full width of their parent container, unless otherwise specified through CSS.
  3. They can contain other block-level and inline elements.
  4. They can be nested within other block-level elements to create a hierarchy of content.

Some examples of block-level elements are:

  • <p>: Used to define a paragraph of text.
  • <h1> to <h6>: Used to define different levels of headings.
  • <ul> and <ol>: Used to create unordered and ordered lists.
  • <li>: Used to define list items.
  • <table>: Used to create a table.
  • <form>: Used to create a form.
  • <div>: Used to group elements together for styling or layout purposes.
  • <header>: Used to define the header of a web page or section.
  • <footer>: Used to define the footer of a web page or section.
  • <section>: Used to define a section of a web page.

Example of Block-level Elements

<!DOCTYPE html>
<html>
   <head>
      <title>Block-level Elements</title>
   </head>
	
   <body>
      <h1>This is a heading level 1</h1>

      <p>This is a paragraph of text.</p>

      <ul>
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
      </ul>

      <table border="1">
      <tr>
         <th>Column 1</th>
         <th>Column 2</th>
      </tr>
      <tr>
         <td>Row 1, Column 1</td>
         <td>Row 1, Column 2</td>
      </tr>
      <tr>
         <td>Row 2, Column 1</td>
         <td>Row 2, Column 2</td>
      </tr>
      </table><br>

      <form>
         <label for="name">Name:</label>
         <input type="text" id="name" name="name">
         <br>
         <br>
         <label for="email">Email:</label>
         <input type="email" id="email" name="email">
         <br>
         <br>
         <input type="submit" value="Submit">
      </form>

      <div>
         <h2>This is a subheading</h2>
         <p>This is some text within a div element.</p>
      </div>
       
   </body>
	
</html
Live Preview

This is a heading level 1

This is a paragraph of text.

  • Item 1
  • Item 2
  • Item 3
Column 1 Column 2
Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2





This is a subheading

This is some text within a div element.

In this example, the <h1> and <p> tags are both block-level elements used to create a heading and a paragraph of text, respectively. The <ul> and <li> tags are used to create an unordered list, while the <table> tag is used to create a table with rows and columns.

The <form> tag is used to create a form with input fields for users to fill out, and the <div> tag is used to group together elements for styling or layout purposes. All of these elements are block-level elements that take up the full width of their parent container and start on a new line.

Inline Elements

In HTML, inline elements are those that flow within the text of a block-level element without breaking the flow of the text. They typically represent smaller pieces of content such as individual words or phrases, and their main purpose is to add meaning, emphasis, or links to the text. Inline elements include:

  • <span>: Used to group inline elements for styling purposes or to apply a style to a specific part of text.
  • <a>: Used to create hyperlinks to other pages or resources.
  • <strong> and <em>: Used to add emphasis to text.
  • <img>: Used to display images within the text.
  • <input>: Used to create input fields within a form.
  • <label>: Used to associate a label with an input field.
  • <select> and <option>: Used to create dropdown menus within a form.
  • <textarea>: Used to create a multi-line text input within a form.

Some characteristics of inline elements include:

  1. They do not create a new line before or after the element.
  2. They take up only as much width as necessary to display their content.
  3. They cannot contain block-level elements, but they can be nested within other inline elements.
  4. They can be styled using CSS to change their appearance.

Example of Inline Elements

<!DOCTYPE html>
<html>
   <head>
      <title>Inline Elements</title>
   </head>
	
   <body>
      <p>This is a paragraph with some <strong>emphasized</strong> text and a <a href="https://www.google.com">link</a>.</p>

      <p>Here's an image: <img src="image.jpg" alt="A picture of a cat."></p>

      <form>
         <label for="name">Name:</label>
         <input type="text" id="name" name="name">
         <br>
         <label for="email">Email:</label>
         <input type="email" id="email" name="email">
         <br>
         <label for="reason">Reason for contacting:</label>
         <select id="reason" name="reason">
            <option value="question">Question</option>
            <option value="feedback">Feedback</option>
            <option value="other">Other</option>
         </select>
         <br>
         <label for="message">Message:</label>
         <br>
         <textarea id="message" name="message"></textarea>
         <br>
         <input type="submit" value="Submit">
      </form>
      
   </body>
	
</html
Live Preview

This is a paragraph with some emphasized text and a link.

Here's an image: A picture of a cat.






In this example, the <strong> tag is used to add emphasis to the word “emphasized”, and the <a> tag is used to create a hyperlink to the Google website. The tag is used to display an image within the text, and the <select> and <option> tags are used to create a dropdown menu within a form. All of these elements are inline elements that flow within the text of the block-level elements around them.

Previous
HTML - Phrase Tags
Next
HTML Images