HTML Element

html element

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).

Block 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.

Inline 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;"> 
   <p>Delhi, India’s capital territory, is a massive metropolitan area in the country’s north.</p>

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>




Please enter your comment!
Please enter your name here