2. HTML Elements

An HTML element is a complete set that consists of a start tag (or opening tag), content, and an end tag (or closing tag).

HTML Element = Start Tag + Content + End Tag

Example:

<h1>This is our first heading</h1>

In this example, <h1> is the start tag, "This is our first heading" is the content, and </h1> is the end tag. Together, they form an HTML element.

There are 2 types of HTML Elements:

  1. Inline Elements
  2. Block elements

“inline-block-image.jpg” could not be found.

Inline Elements

Inline Elements don't start on a new line. It only takes the width required to cover the content. They are part of the flow within other elements.

  • Inline elements can contain other inline elements,
  • But they generally shouldn't contain block-level elements which can lead to unexpected behavior in terms of layout and styling.

Common Inline Elements:

elements_inline.png

  • <span>: A generic inline container for text
  • <a>: Defines a hyperlink
  • <strong>: Defines important text
  • <em>: Defines emphasized text: Embeds an image
  • <input>: Defines an input control
  • <select>: Drop down list
  • <button>: Buttons.
  • Some Text Formatting Tags like <b> <i> <u> etc.

Block Elements:

Block-level elements are those that start on a new line and take up the entire width of their container by default.
They essentially claim all the horizontal space for themselves, pushing any content that comes after them to a new line.
Block Elements:

  • Always start on a new line.
  • Take up the full width available.
  • Width and height can be controlled via CSS.
  • Can contain other block-level as well as inline elements.

list of Block Elements:

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

What is a Nested HTML Element?

A nested HTML element is an HTML structure where one element is placed inside another element.

  • The enclosing element is often referred to as the "parent,"
  • while the enclosed element is called the "child."

Nested HTML Element = One HTML Element Inside Another HTML Element

For example:

<h1><b>This is our first heading</b></h1>

In this example, the <b> element (child) is nested inside the <h1> element (parent).

What is an Empty HTML Element?

An empty HTML element is one that does not have a closing tag or content. These elements are also known as "void elements" or "self-closing elements".

Empty HTML Element = Tags with No Content

For example:

<br/>

This is a break tag, which has no content and no closing tag. It's used to insert a line break within text or other inline elements.