❮ Previous Next ❯

HTML Elements

After knowing the basic codes of HTML, we need to know what HTML elements are. In order to understand HTML elements, we should know what an HTML tag is.

HTML Tags

Usually, an HTML document has two parts: a start tag and an end tag. The difference between the start tag and the end tag is the addition of "/" to the end tag.

For example:
Start tags End tags
<body> </body>
<head> </head>

Either start tag or end tag is surrounded by < and > on both sides. Example: <head> tag, </title> tag, etc.

Elements Content

<h1> Largest heading </h1>
<p> A paragraph. </p>
The texts or contents within the start tag and end tag are called elements content.

Start tags Elements Content End tags
<h1> Largest heading </h1>
<p> A paragraph. </p>

Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2> HTML Heading </h2>
<p> There are six types of HTML headings, each denoted by h1, h2, h3, h4, h5, and h6. </p>
</body>
</html>

Output on the browser

HTML Heading

There are six types of HTML headings, each denoted by h1, h2, h3, h4, h5, and h6.

All the tags will not appear on the web browser because they are not considered as text. If you do not use < and > entities, the browser will interpret the content as HTML markup instead of displaying it as text.

Document tags

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 heading section of an HTML document is where you can enter the title of the page within the <title> tag, link CSS externally within the <link> tag, and use JavaScript code within the <script> tag, and more.
  2. All the contents and layouts are contained within the <body> tag and the </body> tag.

HTML Element

An HTML element consists of a start tag, an end tag, and the elements content. It consists of three parts:
  1. Start tag
  2. Content within the start tag and end tag
  3. End tag

Two types of HTML Elements

  1. Block Elements: They automatically start on a new line and attempt to occupy the full available width. Some examples of block-level elements are: <address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>–<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <p>, <section>, <table>, <ul>, <video>, etc.
  2. Inline Elements: They do not start on a new line and only occupy the necessary width. Some examples of inline-level elements are: <a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em> etc.

How <h3> and <p> are considered as Block elements?

Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2> HTML Heading </h2>
<p> This is a paragraph. </p>
<p> This is also another paragraph. </p>
</body>
</html>

Output on the browser

HTML Heading

This is a paragraph.

This is also another paragraph.

From the above example, you know that each block-level element (<h2> and <p>) gives some space by giving a line break automatically.

How <sub> and <sup> are considered as inline elements?

Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>The chemical formula of water is H<sub>2</sub>0.</p>
</body>
</html>

Output on the browser

The chemical formula of water is H20.

In the above example, each inline element (<sub> and <sup>) is used within the block element. Also, they don't give any line break.

HTML Attributes

HTML attributes provide an additional information or allows us to style about an HTML element. It always associated with the start tag such they come in the form of
<tagname attribute="value">

For example,
<p style="font-family:Arial;">
<span style="color:red;">
<i style="font-size:20px;"> etc.

See the table below

Tags Attribute names Attribute values
<p> style font-family:Arial
<span> style color:red
<i> style font-size:20px

Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="font-family: Arial"> The full form of <i style="font-size: 30px"> HTML </i> is <span style="color: red"> HyperText Markup Language.</span></p> 
</body>
</html>
Run The code »

Output on the browser

The full form of HTML is HyperText Markup Language.

Did you know it?

There are two special types of HTML tags.
  1. Container tags: Those HTML tags which have both start tag and end tag are called container tags. Example:- <h1> tag, <p> tag, <div> tag etc.
  2. Empty tags: Those HTML tags which have only start tag are called empty tags. Example:- <br> tag, <img> tag, <hr> tag etc.

Can you answer it?

  1. Define HTML tag? Illustrate with an example.
    An HTML tag is defined using angle brackets like <p> and </p>.
  2. Which HTML tag allow you to link one another?
    HTML <a> tag allows to make a hyperlink.
  3. What is the only difference between start tag and end tags?
    The only difference is the addition of ' / ' to the end tag. For eg. <p> is the start tag while </p> is the end tag.
  4. What is the relation between HTML tags and HTML Elements?
    HTML tags with its element content altogether compose HTML elements.
❮ Previous Next ❯