HTML Basics
Learn HTML HTML Basics HTML Elements HTML Attributes HTML Comments HTML Colors HTML Style HTML CSS HTML Headings & Paragraphs HTML Formatting HTML Quotations HTML Links HTML Images HTML ListsHTML Intermediate
HTML Tables HTML Blocks HTML Classes & Ids HTML Iframes HTML Head HTML Layouts HTML File Paths HTML Pictures HTML Audio HTML Video HTML YoutubeHTML Advance
HTML Forms HTML Form Attributes HTML POST & GETSEO Tips & Others
SEO Tips Hosting Sites SEO Tools
HTML div & Span Tags
Almost all elements are either block or inline elements by default. We will discuss what is a block element and what is a inline element
Block elements
A block element is like a normal block of content. Think it as a container which has a defined shape.
So usually a block element can contain other block elements in it
When you define an block element. It always takes a new line
By default the block element takes the size of the available space (width) and required height
Here are some elements which are by default block elements:
<h1> to <h6> - used to create headings
<p> - used to create paragraphs
<aside> - used to display data aside. Just a container!
<section> - used to hold data aside. Just a container!
<article> - used to hold data . Just a container!
<nav> - used to hold navigational links. Just a container!
<header> - used to hold data and heading. Just a container!
<footer> - used to hold data for the footer. Just a container!
Tags such as aside and section have no real difference except there meaning and purpose is different. They will work in the same way though. These are used to optmise the Google SEO and make the webpage more clear and structured
The <div> element
This is a general block element which could be used to store any form of data(no meaning). The block is a container and it will take the size of the space available. If you want you can define it's size using CSS style
RunAn <aside> tag is used to show that there is no difference between it and the <div> tag
With CSS you could style the div blocks/containers to make them look better
Inline elements
An inline tag is a tag which has no defined shape. It is not a container! It taks the space only required to hold the data. Most elements are block elements. However, by using CSS we can define it as inline. I am doing this just to show you
Also an inline block does not begin on a new line. It continues on the same line if space is available.
RunAs you can see both paragraphs are on the same line. Paragraphs are by default block elements which occupy a new line for each paragraph
The most famous inline tag is the <img> tag which is by default inline
When an object is inline you can't define it's space properly or position it properly. So we usually make the images to block elements by default
Even <a> tags are also inline tags
This is a very important point to rememeber
Warning! An inline element can not contain or hold block elements(there are some exceptions) even though the property of the inlne element is changed to block. Do not experiment with these things it could make results unpredictable
The <span> element
Like for the block element the <div> element is the general block element, the <span> is the general inline tag
<span> elements provide no meaing to the data it holds so it could be used to hold links and even javascript events
RunIf you want some examples for default inline elements. Go to the HTML text formatting chapter
Without CSS, HTML is useless! Don't worry Revise Zone provides the best learning resources and is ranked the 2nd best developer site for coding. Our CSS chapter is coming soon!