What is HTML Element & tags

HTML Elements

What is HTML Element:-

    An HTML element is defined by a starting tag (<Starting tag>). If the element contains other content, it ends with a closing tag (</Starting tag>), where the element name is preceded by a forward slash(/) as shown below with few tags:

<h1> This is heading content </h1>

<p> This is paragraph content </p>

<div> This is division content </div>

<br>

So here <p>….</p> is an HTML element, <h1>…</h1> is another HTML element. There are some HTML elements which don’t need to be closed, such as <img…/>, <hr /> and <br />  elements. These elements are known as void elements or  empty tags

HTML Element vs Tags:-

An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag.
For example, <h1> is starting tag of a heading and </h1> is closing tag of the same heading  but <h1>This is heading</h1> is a heading element.

HTML Nested Elements:-

It is very much allowed to keep one HTML element inside another HTML element:

For Example:- 

  1. <p> This is <i> italic </i> paragraph </p> 
  2. <h2>This is <b> bold </b> paragraph </h2>

In These examples  <i> italic </i> and <b> Bold </b>  is nested elements.


Block and Inline Elements

Default Styles:-

We know that CSS has two types of display values: first block-level and second inline. In HTML, Every element in HTML  has its own default display value, depending on what type of element it is. let’s start to know in details about both display value

1. Block-level element:-

A block-level element is in a little rectangular box as well as it always starts on a new line. these types of elements take full width on both sides of the page if available, stretches out to the left and right of the page as far as it can.

Here, Some block-level elements are as follows:
  • <address>
  • <article>
  • <aside>
  • <blockquote>
  • <canvas>
  • <dd>
  • <div>
  • <dl>
  • <dt>
  • <fieldset>
  • <figcaption>
  • <figure>
  • <footer>
  • <form>
  • <h1><h6>
  • <header>
  • <hr>
  • <li>
  • <main>
  • <nav>
  • <noscript>
  • <ol>
  • <p>
  • <pre>
  • <section>
  • <table>
  • <tfoot>
  • <ul>
  • <video>

Inline Elements:-

An inline element runs with the flow of content and it does not start on a new line and inline elements only take up width as necessary.

For Example:    <p> This is an <span> inline element </span> example</p>

In the above example a <span> element inside a paragraph. and run with flow of text.

Here, Some inline elements list:
  • <a>
  • <abbr>
  • <acronym>
  • <b>
  • <bdo>
  • <big>
  • <br>
  • <button>
  • <cite>
  • <code>
  • <dfn>
  • <em>
  • <i>
  • <img>
  • <input>
  • <kbd>
  • <label>
  • <map>
  • <object>
  • <output>
  • <q>
  • <samp>
  • <script>
  • <select>
  • <small>
  • <span>
  • <strong>
  • <sub>
  • <sup>
  • <textarea>
  • <time>
  • <tt>
  • <var>

Watch Video tutorials in Hindi Click Here