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
- Block Level Elements
- 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.
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
| Tag | Description |
|---|---|
<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
