Understanding HTML Elements and Its Types: A Complete Beginner's Guide

INTRODUCTION

HTML elements are the building blocks of web pages. Every HTML webpage consists of different types of elements. These elements can be used to define metadata, text, scripts, media and others content in webpage. The basic structure of an HTML element consists of opening tag, attributes, content and closing tag, which is shown in the figure below.

Opening Tag

It consists of tag name enclosed in opening and closing angle brackets (<>). This tag marks the Beginning of element.

Content

This section consists of element's content. It can be text, image and others depending on element type.

Closing Tag

This tag is same as opening tag, with the only difference being the element name is preceded by forward slash (/). This tag marks the end of element. Not every element has closing tag.

Attributes

An attribute defines the characteristic and functionality of element. They provide an extra bit of information about the element.

HTML element can be classified into two types depending on content. They are classified as Replaced and Non-replaced element.

• Replaced Element
• Non-replaced Element

Replaced Element

Replaced elements are those whose content comes from an external source and replaced in webpage. As the content is defined outside of the webpage it is outside the scope of CSS, i.e. their content is not affected by CSS formatting model. The position of replaced element can be defined using CSS but not the content. They often have natural dimensions.

Replaced elements can be replaced by UI widget with controls or image depending on element type. Every browser applies some default style according to element type. Below is a list of replaced elements.

• <applet>
• <audio>
• <br>
• <button>
• <canvas>
• <embed>
• <iframe>
• <img>
• <input>
• <math>
• <object>
• <select>
• <svg>
• <textarea>
• <video>

Void Element

Void Element are those elements that cannot have any content. They cannot have child elements (nested element or text content). They are self-closing element and are represented by one tag; i.e. they only have start tag and end tags should not be specified. You can include a slash at the end of tag which is optional.

Replaced elements and void elements are generally confused and used interchangeably. Most replaced element are void elements but not each one of them. For example, Elements like <video>, <iframe> and <picture> are replaced but not void element.

Also, most void elements are replaced but not all. For example, Elements like <base>, <link> and <meta> are void but not replaced element. The void element is HTML are as follows.

• <area>
• <base>
• <br>
• <col>
• <embed>
• <hr>
• <img>
• <input>
• <link>
• <meta>
• <source>
• <track>
• <wbr>

Non-Replaced Element

Non-Replaced elements are those whose content is inside the element. The element's content is not replaced. They have both opening and closing tag. They can also sub-nest other elements. The browser process that content normally according to CSS Model.

Below is a list of non-replaced elements (list non exhaustive).

• <p>
• <ul>
• <ol>
• <h1> -- <h6>
• <div>

Block And Inline Element

HTML element can be classified into two types depending on their default display behaviour in the browser.

• Block Element
• Inline Element

Block Element

Block elements take up the full width available of container (even if its content is small). They are displayed as block and placed one after another vertically similar to paragraphs in text.

Block elements always start on a new line. They can contain other block and inline elements. They are used to structure the webpage — like paragraphs, sections, headers, etc.

Below is a list of Block Level elements.

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

Inline Element

Inline Element Does not start on a new line, it stays in the flow of text. These elements Flows alongside other elements horizontally. They only take up as much width as its content needs. They cannot contain block-level elements (only text or other inline elements).

Below is a list of Inline elements.

• <abbr>
• <acronym>
• <b>
• <bdo>
• <br>
• <button>
• <cite>
• <code>
• <dfn>
• <em>
• <i>
• <img>
• <input>
• <kbd>
• <label>
• <map>
• <mark>
• <object>
• <output>
• <q>
• <samp>
• <script>
• <select>
• <span>
• <sub>
• <sup>
• <small>
• <textarea>
• <time>
• <var>

Frequently Asked Questions (FAQ)