Programming

What is the difference between a display block and an inline element in HTML?

Every web developer especially frontend developer is confused about what block and inline elements are and how they work.

In this article, I will explain to you what block elements and inline elements are and what they do. First, let’s start with some basic concepts. Block and inline elements are display properties. Many HTML tags by default are block-level elements and many are inline elements. Now, let’s know more about them. 

Block Elements

In HTML, block-level elements are those that typically start on a new line and occupy the full width available to them.

Some block-level tags in HTML are:

  • <p></p>: HTML represents paragraphs inside its tag, and paragraphs can be any structural grouping of related content.
  • <h1> – </h6>: This tag creates a heading on the webpage by default and takes some margin or padding.
  • <div></div>: The div tag is defined like a container in an HTML document, this tag takes many children elements that’s why this tag is like a container.
  • <section></section>: Usually section tags define sections of the document such as group, header, paragraph, footer, or any other section, by default cover full width & some margin or padding and height depending on the content.
  • <nav></nav>: The nav tag defines a navigation section in HTML This tag takes many navigation links, and then the user can access various pages on the website.
  • <main></main>: This tag specifies the main content of our document. This tag should not contain any repeating section or document like footer, navigation bar, sidebar, logo, or any elements, it should be a unique and different document.
  • <footer></footer: The footer element identifies the footer on our webpage, this tag takes the logo and many links and copyright sections.
  • <li></li>: The html document represents a list of items. This tag creates an ordered or unordered list of web pages.
  • <article></article>: The article element represents a self-contained composition in a document, page, or application on a web page.
  • <hr></hr>: usually this tag defines a thematic or horizontal break in a document.

Example Code:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Block level element</title>

<style>
div {
border: 2px solid purple;
background-color: beige;
}

div>h1 {
border: 1px solid black;
text-align: center;
background-color: aqua;
}

div>p {
border: 2px solid dodgerblue;
font-size: 18px;
background-color: blanchedalmond;
color: blueviolet;
}
</style>
</head>

<body>
<div>
<h1>Hello , Techview 71 follower's</h1>
<p> In This article I'll discuss the difference between block and inline element .</p>
</div>

</body>

</html>

Output:

HTML

Above the picture, there are three different types of block elements, div, h1, and p tags have some border and different background colors. They all are elements that contain full width and they have some margin or padding and height depending on their content.

When we should use block-level elements?

Block-level elements are used when you want content to appear on a new line, taking up the full available width. They are commonly used for larger sections of content such as paragraphs, headings, sections, and lists.

When we create a simple webpage header, main content, and footer, they are all block-level elements. Suppose we create a webpage header then we use a div tag and nav tag an h1 to h6 tag and many paragraph tags. Example code below.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Block element html</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Courier New', Courier, monospace;
            font-size: 16px;
            max-width: 100vw;

        }

        header {
            background-color: black;
            color: white;
            padding: 10px 12px;

        }

        header>nav {
            display: flex;
            align-items: center;
        }

        header>nav>div>ul {
            display: flex;
            list-style: none;
            align-items: center;
        }

        header>nav>div>ul>li {
            margin-left: 7px;
            font-size: 16px;
            font-weight: 600;
        }
    </style>
</head>

<body>
    <header>
        <nav>
            <h1>Techview 71</h1>
            <div>
                <ul>
                    <li>Home</li>
                    <li>About</li>
                    <li>Contact</li>
                    <li>pages</li>


                </ul>
            </div>
        </nav>




    </header>

</body>

</html>

Output:

html

Above the picture you can see that, we created a header with block elements in html. We used the header tag, the nav tag, the heading tag, the div tag, the ul or li tag, and some styles.

Inline Elements

Inline elements never start a new line have no margins or padding, and don’t cover the full width. They depend on the content to cover their width.

Read More: Download Spotify for Free

HTML has many inline elements example. One of them is an anchor tag or link tag <a></a>. By using this tag, you can put many links or hyperlinks in one row, and by default, they will appear on one line.

Some of the inline tags in HTML:

  • <label></label>: The html label tags can be used in controls from webpages, the height and width of this tag depends on the content.
  • <input></input>: This tag specifies an input field where the user can enter data. In other definitions, this tag is used for user input data.
  • <a><a/>: The </a> tag defines hyperlink, Click here to redirect to another page.
  • <br></br>: This tag  represents a line break.
  • <b></b> : this tag makes text bold .
  • <span></span/>: The highlighted text defined by this tag is part of a document.
  • <sub></sub>: The subtag defines subtext or subscript text.
  • <strong></strong> : this tag makes text strong .
  • <em></em>: The em tag is used to define emphasized text.
  • <button></button>: used to create clickable button.

Example Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>inline element html</title>
    <style>
        body{
            border:2px solid black;
            padding: 10px 25px ;
        }
        body > span {
            background-color: beige;
            color:black;
            font-weight: 600;
        }
        body > a {
            color:black;
            margin-left: 10px ;
        }
        body > input {
            padding : 5px 10px ;
            outline: none;
            border : 2px solid black;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <span>Hello ! Techview 71 follower's</span>
    <a href="#">Home</a>
    <a href="#">pages</a>
    <a href="#">about</a>

    <input type="text" placeholder="Enter something">
</body>
</html>

Output:

html

Above the picture, there are three different types of inline elements and those are span tag, anchor tag, and input tag. The key feature of them is that they all are displayed in one line and it’s the default behaviour of inline elements. 

Read More: 15 Most Important HTML Interview Questions and Answers

When we should use inline elements?

Inline elements allow content to flow horizontally with other inline elements within block-level containers. They are suitable for small elements that do not need their own dedicated space or line in the layout. However, they generally do not affect the layout flow when creating new lines or blocks.

Example Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>inline element html</title>
    <style>
        body{
            border:2px solid black;
            padding: 10px 25px ;
        }
        body > span {
            background-color: beige;
            color:black;
            font-weight: 600;
        }
        body > a {
            color:black;
            margin-left: 10px ;
        }
        body > input {
            padding : 5px 10px ;
            outline: none;
            border : 2px solid black;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <span>Hello ! Techview 71 follower's</span>
    <a href="#">Home</a>
    <a href="#">pages</a>
    <a href="#">about</a>

    <input type="text" placeholder="Enter something">
</body>
</html>

Output:

html

Above the picture this is a simple login from create with inline elements of HTML, using many inline tags like label tag, span tag, input tag, and strong tag, and we added some design to make it beautiful.

Difference between display block and inline element in HTML

Inline elements

Block elements

Inline element does not take full width or inline element width depends on the content.

Block elements cover the left and right full spaces as far as they can go.

Inline element never start a new line.

Block element always start a new line.

By default inline element don’t have any top and bottom margin.

By default block element have top and bottom margin.

Example of some inline elements are <a></a> , <span> </span>, <input/>, </br>, <button></button> etc.

Example of some block elements are <header></header>, <main></main>, <div></div>, <section></section>, <footer></footer> etc.

Conclusion

So, that’s all for today. I hope you now know what is this display block in HTML why we should use it or what is these inline elements. I tried to clear it easily.

However, if you still have some problem with it or if you have more questions then you can tell me that in the comment section. I would love to answer your question. Till then keep coding!

What is your reaction?

0
Excited
0
Happy
0
In Love
0
Not Sure
0
Silly

Leave a reply

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