Inline And Block Elements

BLOCK AND INLINE ELEMENTS

In our previous article we talked about the basics of html and how it work. In this article we will be looking at another important element which is the inline and block element, we should understand that HTML elements are divided into the above mentioned . So let us see the differences between the inline and block elements in HTML.

Block level elements take up as much space as possible by default. Each block level element will start in a new line on the page and is being enclosed in a <div>, as we will see in the code below, stacking down the page. In addition to stacking vertically, block level elements will also take up as much horizontal space as possible. They consume the entire width available irrespective of their sufficiency. They always start in a new line and have top and bottom margins. It does not contain any other elements next to it.

Let's look at one practical and some of the examples of block element.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BLOCK ELEMENT</title>
  </head>
  <body>

    <div>
      <h1>MANCHESTER UNITED NEWS</h1>
    </div>

    <div>
      <p>
        Manchester United have acquired the servivces of a Brazillian midfilder
        Brazillian midfilder and real madrid star, CASIMIRO on a four year deal
        with an option to extend
      </p>
    </div>

    <div>
      <h2>
        The players are said to be impressed with the board decison in trying to
        strengthen the team
      </h2>
    </div>

  </body>
</html>

The above is the result from the browser when loaded, we see the <h1>, <p>, and <h2> tags starts on a new line, which is a typical feature of a block element.

Examples of some Block elements

<div>: it is used to make divisions of content in the web page.this is well demonstrated in out exaample above.
<hr>: It is always displayed as a horizontal rule that is used to separate content in an html page.
<li>: It is used to represent an item in a list.
<p></p>: It is usually used to make paragraphs of text
<ul></ul>: It is used to make an unordered list
<ol></ol>": It is used to make an ordered list.
<em></em>: it is used to define emphasized text. which is clearly started above.

INLINE ELEMENTS

Inline elements occupy only enough width that is sufficient to it and allows other elements next to it which are in the same line. Inline elements don’t start from a new line and don’t have top and bottom margins as block elements have which is shown in the above example <strong>ball</strong> to emphasized on the word ball. when this code is loaded in the browser the result will be bold. lets look at one practical example and other examples of inline elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>INLINE ELEMENTS</title>
</head>
<body>
 <p>The <Strong>ball</Strong> is in your court</p>

</body>
</html>

The above is the result from the browser when loaded, we see that, the text ball is bolded.

Examples of some Inline elements

<a>: It is used for including hyperlinks in the webpage.
<input>: It is used for taking input from the users and is mainly used in forms.
<img>: It is used for including different images in the webpage.
<span>: It is an inline container used to mark up a part of a text
<br>: It is called a line break element, it produces a line break in text
<label>: It is used to specify a label for an <input> element of a form.
<strong>: it is used to bold text.

SOME DIFFERENCES BETWEEN INLINE AND BLOCK ELEMENTS

Inline Elements

Inline elements don’t start in a new line.
Inline elements occupy only sufficient width required.
Inline elements allow other inline elements to sit behind.
Inline elements don’t have top and bottom margin

Block Elements Block

Elements occupy the full width irrespective of their sufficiency.
Block elements always start in a line.
Block elements doesn’t allow other elements to sit behind
Block elements have top and bottom margin.

CONCLUSION

In this article, we have discussed inline and block elements, the examples and differences. It is good to understand that, Block elements start from a new line and cover complete space, while Inline elements cover only the area which is bounded .In our next articles, we will talk about semantic elements.

Hope this lesson was helpful.

Cyril Ekpenyong's Blog

Cyril Ekpenyong's Blog

Inline And Block Elements