HTML Lesson 12: Block and Inline Elements

2
18

Block and Inline Elements

While creating a webpage, you have to deal with many HTML Elements. But you should know either it is Block or Inline. In this lesson, you will learn the difference between Block and Inline Elements.

Block Elements

Most of HTML Elements are Block Elements. Basically, a Block Element starts with a new line. You have already learned few of them e.g. <p>, <h1>, <ul> and <table>>.

Source
Output Wikiprogramming was developed as a tool for programmers regardless of level; as a place to build a solid foundation of programming languages.

The concept is to increase the accessibility of learning programming languages and to consolidate them in one place.

As you can see the Block Element <p> starts in a new line.

Div Element

<div> Element is the most important Block Element in HTML. Basically, it is use as a container in HTML. However, it is known as Block Element; because it breaks two lines. <div> Element always use with a style and class attributes. These attributes get controlled with CSS. For example

Inline Elements

Inline Elements appears in a same line i.e. no line spacing between two elements.
<b>, <a>, <td> and <img>.

Source
Output Wikiprogramming was developed as a tool for programmers regardless of level; as a place to build a solid foundation of programming languages.

As you can see the Inline Element <b> starts in a same line.

Span Element

<span> Element is a very helpful Inline Element in HTML. Just like a <div> Element, it work as a container but for text or simply an inline elements only. <span> Element always use with a class or id attributes to add styling using CSS. However, here we are using style attribute for demonstration:

Source Code Output
This is Wiki Programming HTML Tutorial.

Summary

  • Block elements creates a line break between two elements.
  • Inline elements does not create any line break between two elements. In-fact they appear in same line.
  • div tag is a block element.
  • span tag is an inline element.

Next Lesson

Next we will be adding some Colors to our HTML pages!

2 COMMENTS

  1. […] You learned about Block and Inline Elements in the HTML lesson. Here you’ll learn how to use the Inline element into the block element […]

Leave a Reply