#14 HTML Block and Inline Tags

In HTML, every HTML elements or tags has own display value, depending on what type of element it is.

All the HTML elements can be categorized into two categories

  1. Block Level Elements
  2. Inline Elements

Block-level Elements

Block-level elements always starts with new line.

For example, the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, <address> etc. elements are all block level elements.

A block-level element always takes up the full width available (stretches out to the left and right as far as it can).

A block level element has a top and a bottom margin, whereas an inline element does not.

The <div> element is a block-level element.

Inline Elements

Inline elements not start with new line.

The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var> elements are all inline elements.

An inline element only takes up as much width as necessary.

This is a <span> element inside a paragraph tag

The <div> tag

This is very important tag. Most of the time you will using this tag while developing website.

This is block-level tag. This element is often used as a container for other HTML elements.

When used together with CSS, the element can be used to style blocks of content:

Following is a simple example of <div> tag. We will learn Cascading Style Sheet (CSS) in a separate tutorial but we used it here to show the usage of <div> tag.

See the Pen div tag by Arpit (@soniarpit) on CodePen.

The <span> tag

<span> tag is inline element. I used most this when I need to group inline tags.

This tag also does not provide any visual change on the block but has more meaning when it is used with CSS.

Following is a simple example of <span> tag. We will learn Cascading Style Sheet (CSS) in a separate tutorial but we used it here to show the usage of <span> tag

See the Pen span tag by Arpit (@soniarpit) on CodePen.

Finally

TagDescription
<div>Defines a section in a document (block-level)
<span>Defines a section in a document (inline)

Hope you enjoyed the tutorial. Happy coding 🙂

Previous: #13 HTML Lists

Next: #15 HTML class Attribute

Support CodeSnail

If you appreciate my work, or if it has helped you along your journey. It would mean a lot to me if you could write a message on my wall and share a cup of coffee (or tea) with me.

Buy Me A Coffee

Leave a Comment

Copy link
Powered by Social Snap