Introduction

In the previous article we learned about how to organize data in tables. Block and Inline elements are the other constructive elements of the webpage. While using HTML and CSS, understanding the differences between block and inline elements is crucial to create  well-structured and visually appealing web pages. Block and inline elements serve different purposes and have unique styling characteristics that make them useful in different situations. In this article, we will explore the characteristics of block and inline elements and provide examples of how they are commonly used in web design.

Simplified

Block Elements

Block-level elements are those that take up the full width of their parent container and create a new line after the element. They are typically used to create major sections of a webpage, such as headers, footers, and main content areas. Examples of common block-level elements include <div>, <h1> through <h6>, <p>, and <ul>.

<h1>This is a Heading</h1>
<p>This is a paragraph of text. It might be several sentences long and contain multiple lines. Also occupies the full space on the browser.</p>
<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>
<div>This is a div element. It can be used to group other elements together and apply styles to them.</div>

Block elements can also contain other block elements or inline elements. When a block element contains another block element, the inner element becomes a child of the outer element and is indented or nested within it. This nesting can be repeated as necessary to create complex page layouts.

One key characteristic of block-level elements is that they can have their width and height specified with CSS. This means that they can be used to create visually distinct regions on a webpage, making them ideal for page layout and styling.

Inline Elements

Inline elements do not create new lines after them and only take the necessary space to display their content. The inline elements are mostly used to format text or content within a block element. Examples of common inline elements are <span>,<a>,<bold>,<strong>, and <em>.

<p>This is a paragraph of text with <strong>bold</strong> and <em>italic</em> words.</p>
<a href="https://www.example.com">This is a link</a>
<img src="image.jpg" alt="An image">

Inline elements cannot contain block elements. Inline elements are well suited for a small change on a line displayed on the webpage. Inline elements are not used to create layouts but they do play an impact on the layout with the Inline elements.

Conclusion:

Understanding block and inline elements is a good way to create beautiful layouts and designs for IoT and other web applications and websites. Now that you know how to create do adjustments in Layouts in HTML, you can start creating your layouts. Moreover, you will be able to create web server pages for the microcontrollers which are necessary for Internet of Things (IoT).