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.
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>>.
|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 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
<div style="background-color:black; color:white; width: 100%; margin:10px; padding:20px;">
Inline Elements appears in a same line i.e. no line spacing between two elements.
<b>, <a>, <td> and <img>.
|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 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:
|This is Wiki Programming HTML Tutorial.|
- 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 we will be adding some Colors to our HTML pages!