HTML element types
There are two types of elements. Inline and block level 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.
<!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 are those elements that occupy their own space and always start on a new line.They make big structures. Examples are given below.
<!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.
<pre> preserves the formatting.
<address> represents contact information.
<noscript> noscript for the fall back content.
<ul> represents unordered list
Was this article helpful?