/    /  HTML Elements

HTML Elements

 

The HTML element is an individual component of an HTML document and it represents meaning.

Most HTML elements are written with a start tag(<tag name>) and an end tag(</tag name>), with content in between. Elements can also contain attributes that define additional information or properties.

 

Syntax:

 

HTML Elements

 

Example:

 

<!DOCTYPE html>
<html>
<head>
  <title>WebPage</title>
</head>
<body>
 <h1>my first web page</h1>
  <h2>my second web page </h2>
  <p>enter content...</p>
</body>
</html>

 

OUTPUT:

 

HTML Elements

 

NOTE: Some elements don’t require the end tag or closing tag to be present. These are referred to as void elements, self-closing elements, or void elements.

 

Empty HTML Elements:

 

Empty elements (self-closing or void elements) are not container tags, that means, you can not write <hr>some content</hr> or <br>some content</br>.

 

Example:

 

<!DOCTYPE html>
<html>
<body>
<p>This is a <br> paragraph with a line break.</p>
</body>
</html>

 

OUTPUT:

 

HTML Elements

 

Nested HTML Elements:

 

  • HTML can be nested, which means an element can contain another element.
  • All HTML documents consist of nested HTML elements.

 

Example:

 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Nesting HTML Elements</title>
</head>
<body>
  <p>Here is some <b>bold</b> text.</p>
  <p>Here is some <em>emphasized</em> text.</p>
  <p>Here is some <mark>highlighted</mark> text.</p>
</body>
</html>

 

OUTPUT:

 

HTML Elements

 

HTML Elements Types:

 

HTML elements are divided into two categories:

  1. Block-level element
  2. Inline element

 

Block-level element:

 

A block-level element always starts with a new line and takes the full width of the web page, from left to right.

 

block-level elements in HTML:

 

<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> and <video>.

 

Example:

 

<!DOCTYPE html>
<html>
      <head>
      </head>
<body>
  <div style="background-color: lightblue">This is first div</div>
  <div style="background-color: lightgreen">This is second div</div>
  <p style="background-color: pink">This is a block level element</p>
</body>
</html>

 

OUTPUT:

 

HTML Elements

 

Inline elements:

 

These elements do not start with a new line and take width as per requirement.

 

Inline elements are:

 

<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>.

 

Example:

 

<!DOCTYPE html>
<html>
  <head>
      </head>
<body>
  <a href="https://www.i2tutorials.com/">Click on link</a>
  <span style="background-color: lightblue">this is inline element</span>
  <p>This will take width of text only</p>
</body>
</html>

 

OUTPUT:

 

HTML Elements

 

Some main elements used in HTML:

 

HTML Elements