Home / HTML Study / HTML Element

HTML Elements - Block and Inline Elements

Admin 18-09-18 HTML Elements
HTML Block and Inline Elements

After knowing the basic Codes of HTML, we have to know what is HTML elements. Inorder to understand HTML elements, we should know what is an HTML tag firstly.

HTML Tags:

The HTML tags include "<" and ">" on either side of each tag's command.
Example: <body> tag, <head> tag, <title> tag etc.
An HTML tag has two parts:- start tag and end tag. The difference between HTML start tag and end tag is the addition of "/" to the end tag.

Points to be noted:

<h1> These are the texts within the First Heading. </h1>
<p> These are the texts within the paragraph. </p>
Here, <h1> and <p> are called start tag or on tag.
</h1> and </p> are called end tag or off tag.
The texts within the start tag and end tag are called elements content.

For more Understanding, lets have a look the following table:

Start Tags Elements Content End Tags
<h1> These are the texts within the First Heading. </h1>
<p> These are the texts within the paragraph. </p>

See the below Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Welcome to my new Site </title>
</head>
<body>
<h3> Hello world! </h3>
<p> This is a paragraph. </p>
</body>
</html>

Output

Hello world!

This is a paragraph.

From the above piece of code, lets find out start tag, end tag and elements content.

Start Tags Elements Content End Tags
<html> It includes all the contents and layouts of an HTML document. </html>
<head> Here, it includes <title> tag with which character is encoding in the page. </head>
<title> Welcome to my new Site </title>
<h3> Hello world! </h3>
<p> This is a paragraph </p>

All the tags will not appear on the web-browser because they are not considered as text. If you do not use "<" and ">" entities, then the browser will assume your command as text.

Document tag: These are the tags that are necessary for each and every HTML page. An HTML document has two distinct parts- a head and a body.
1. The head of the HTML document is where you can enter title of the page within the <title> tag, link CSS externally within the <link> tag, use JavaScript text within <script> tag and more.
2. All the contents and layouts are contained within <body> tag and </body> tag.

HTML Element

An HTML element consists of start tag and end tag and the elements content in between them. That is
An HTML Elements consists of three parts:

  1. Start Tag
  2. Texts within start tag and end tag.
  3. End Tag

Two types of HTML Elements

1. Block Elements: It automatically leaves a line break and it tempts to occupy full width available as possible as it can.
Examples of Block-level elements:
<address>, <article>, <aside>, <audio>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <section>, <table>, <ul>, <video> etc.

2. Inline Elements: It doesn't start with a new line. It simply occupies the necessary width only.
Examples of Inline-level elements:
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var> etc.

Inorder to understand completely, let us take an example of Block and Inline elements each

<h3> and <p> Block Element

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h3> HTML </h3>
<p> HTML is the acronym of HyperText Markup Language. It is the most common language of making a web-pages. </p>
</body>
</html>

Output

HTML

HTML is the acronym of HyperText Markup Language. It is the most common language of making a web-pages.

From the above example, you know that block-level elements give some space by giving a line-break.

<sub> and <sup> Inline Elements

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p> The chemical formula of water is H<sub>2</sub>0 and x<sup>2</sup> = 4. </p>
</body>
</html>

Output

The chemical formula of water is H20 and x2 = 4.

From the above example, you know that inline-level elements is used within the block-level elements. Also, they do not give a line-break like as block-element.

HTML Attributes

HTML attributes provides an additional information or style about an HTML element. It always associated with the start tag such they comes in the form of name="value".
For example, <p style="font-family:Arial">, <span style="color:red">, <i style="font-size:20px"> etc.

See the below tables

Tag Name Value
<p> style font-family:Arial
<span> style color:red
<i> style font-size:20px

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p style="font-family:Arial"> The full form of <i style="font-size:20px"> HTML </i> is <span style="color:red"> HyperText Markup Language </span> .</p>
</body>
</html>

Output

The full form of HTML is HyperText Markup Language .

Did you know it??

Special types of HTML Tags

1. Container Tag
2. Empty Tag

Container Tags

Those HTML Tags which have both start tag and end tag are called Container Tags.
Example: <p> tag, <div> tag etc.

Empty Tags

Those HTML Tags which have only start tag are called Empty Tags.
Example: <br> tag



Some important questions of this page

1. What is HTML tag? Illustrate with some examples.

See Answer

The HTML tags include "<" and ">" on either side of each tag's command.
Example: <body> tag, <head> tag, <title> tag etc.

2. What is the relation between HTML tags and HTML Elements?

See Answer

HTML tag with its element content altogether compose HTML Element.

3. What is the only difference between start tags and end tags?

See Answer

The only difference between start tag and end tag is the addition of "/" to the end tag.
For example, <p> is start tag while </p> is end tag.

4. Explain the difference between the block level elements and inline level elements?

See Answer

Please refer to the above explanation

5. What are document tags? What are the two parts of it?

See Answer

Please refer to the above explanation.

6. Which HTML tag allow you to link one another?

See Answer

<a> tag allows to make a HyperLink.

7. Why <p> tag and <div> tag are known as Block Level Elements?

See Answer

Please refer to the above explanation.

8. Why <a> tag and <i> tag are known as Inline Level Elements?

See Answer

Please refer to the above explanation.