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
<!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
<!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
Next Previous
Was this article helpful?
