Day-3 of Learning HTML

Another day , another lesson , another step forward

Hi Guys, this is my day 3 of learning HTML. Today i learned about how the HTML elements are displayed in the webpage.

Mainly, there are only two types :

• Block-level Element
• Inline Elements

Block-Level Element:

1. Block-level element is one of the type of displaying the HTML elements in the webpage.
2. The Block-level element takes the complete width of its parent element.
3. The Block-level elements are always starts in the new line.
4. Example for Block-level elements are <div>, <section> ,<p>. I only listed few tags here, but HTML provide more Block-level elements.

Example:

Output:

In the above example, you can clearly understand behavior of block-level elements. Even though i given the <div> element next to <section> element, but it starts on the new line only.

Inline Element:

1. Inline element is the another type of displaying the HTML elements in the webpage.
2. The Inline element only takes the required width.
3. The Inline elements does not always starts in the new line.
4. Inline elements are mainly used for styling purpose.
5. Example for Inline elements are <strong>, <span> ,<img>, <a>. I only listed few tags here, but HTML provide more Inline elements.

Example:

Output:

From this example, we have an clearly idea about the Inline elements. Here, the <span> element is used for styling purpose. The <a> element and <textarea> both the elements are inline elements , so they only taken the required width and continues on the same line.

Easy way to remember:

Block Element → Creates a "block" and moves the next content to a new line.
Inline Element → Stays "in line" with surrounding content.

See you in the next learning update!