HTML block level and inline elements
HTML element can be divided into two categories: block level and inline elements.
- HTML block level elements can appear in the body of an HTML page.
- It can contain another block level as well as inline elements.
- By default, block-level elements begin on new lines.
- block level elements create larger structures (than inline elements).
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
( <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, and <address> ) this tag is block level elements.
An inline element does not start on a new line and only takes up as much width as necessary.
( <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var> ) this tag is inline level elements.
Grouping HTML Elements
There are two important tags which we use very frequently to group various other HTML tags (i) <div> tag and (ii) <span> tag
The <div> Elements
The div elements is a block level element used for grouping HTML elements. Even now <div> tag can be used to create web page layout where we define different parts (Left, Right, Top etc.) of the page using a <div> tag. This tag does not provide any visual change on the block but this has more meaning when it is used with CSS.
<div style="background-color:black;color:white;padding:20px;"> <h2>Delhi</h2> <p>Delhi, India’s capital territory, is a massive metropolitan area in the country’s north.</p> </div>
The <span> Elements
- The <span> element is often used as a container for some text.
- The <span> element has no required attributes, but both style and class are common.
- When used together with CSS, the <span> element can be used to style parts of the text:
<p>This is a <span style="color:red">Apple</span> and this is a <span style="color:green">Guava</span></p>