Web4College

HTML element types

There are two types of elements. Inline and block level elements.

inline elements

As the name is describing that it does not start on a new line and takes the space as small as possible. It means it takes the least space. Inline elements have been given below.

Example
Try it
<!DOCTYPE html>
<html>
<body>
 <h1>This is a <i>heading</i> of my block<u> elements.</u></h1>
 <h1>This is a <small>heading</small> of my block<big> elements.</big></h1>
</body>
</html>

These tags (<i>, <u>, <small>) are not starting from the new line. We are using I tag inside heading but still, the heading is inline.

A list of inline elements is given below.

  • <span> is used to make annotations and to highlight the syntax.

  • <img> adds image in the page.

  • <i> gives italic style to the text.

  • <b> represents bold text.

  • <strong> represents important information.

  • <em> represents emphasized text text.

  • <code> formats computer programs.

  • <br> breaks a text of the line.

block elements

Block elements are those elements that occupy their own space and always start on a new line.They make big structures. Examples are given below.

Example
Try it
<!DOCTYPE html>
<html>
<body>
 <p>This is block level heading <p>This is block level paragraph</p> </p>
 <div>This is block level heading <p> This is block level level heading </p></div>
</body>
</html>

You can see these tags are starting from the new line. When we use two paragraphs then the internal paragraph starts on a new line. div element contains a paragraph that starts on a new line.

A list of block level elements is given below.

  • <dl> defines definition list.

  • <div> defines a division element of cotent.

  • <fieldset> encloses form elements under common name.

  • <form> defines a form to collect data.

  • <hr> thematic break (A horizontal line mostly used in section element)

  • <h1>-<h6> define different level of headings.

  • <p> paragraph

  • <pre> preserves the formatting.

  • <address> represents contact information.

  • <noscript> noscript for the fall back content.

  • <ul> represents unordered list