What are HTML Tags and Elements? Tags VS Elements

HTML Tags

HTML tags are predefined text or name inside the angle brackets <tag-name>. These tags are used to create HTML elements that make the structure of a web page.

In HTML, there are different tags for creating different types of elements. Like –

<h1> to <h6> – Use to add headings on a web page.
<p> – Use for creating paragraphs on a web page.

HTML Ending Tags

Each HTML tag has an ending point (end of the tag), and an HTML ending or closing tag defines the ending point of a tag.

All the ending tags have the same name as the opening tag, but you must add a forward slash before the tag name. Such as –

Opening Tag – <h1>
Closing Tag – </h1>

Types of HTML tags

There are two types of tags in HTML – 1) Paired Tags, 2) Unpaired Tags

Paired Tags

Paired tags are the tags that have a closing tag to define the endpoint.

Unpaired Tags

Unpaired tags are the tags that have no closing tag to define the endpoint. These tags are self-closing tags.

These are Unpaired Tags. And except for these tags, all the other tags are Paired Tags.

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

<!-- Paired Tag -->
<h1>Hello World</h1>

<!-- Unpaired Tag -->
<input type="text">

HTML Tags VS Elements

The entire thing from <start-tag> to <end-tag> is called HTML element. But, Tags define the start and end of an element.

Types of HTML Elements

There are two types of HTML Elements –

Block-Level elements
Inline elements

First, you need to know that each element has a default display value (the default value is either block or inline or none). And each element displayed according to its default display value (you can chage it).

Those elements are block-level elements that have the default display value is the block. In the same way, elements whose default display value is the Inline are called inline elements. And elements that contain the none display value are not displayed in browser output.

Block-Level VS Inline elements

A block-level element always starts on a new line, and by default, it takes the full width of the browser. But, the inline elements does not start on a new line and only takes width as needed.

In the follwoing example the <div> is a Block-Level Element and the <span> is an Inline element.

<!DOCTYPE html>
<html>
	<body>

      <div style="border:1px solid red;">Block-Level Element</div>

      <span style="border:1px solid blue;">Inline Element</span>
   
      <!-- An inline element does not start on a new line -->
      <span style="border:1px solid blue;">Another Inline Element</span>
      
 	  <!-- A block-level element always starts on a new line -->
      <div style="border:1px solid green; max-width:250px;">Another Block-Level Element</div>
      
	</body>
</html>

Browser Output

Block-Level Element

Inline ElementAnother Inline Element

Another Block-Level Element

The block-level elements can contain the both types of elements. But, the Inline elements can only contain the Inline elements.

<!-- Right-->
<div> 
  <span>...</span>
  <h2>...</h2>
</div>

<!-- This is Also Right -->
<span>
  <a href="#">Click</a>
  <i>Hello World!<i/>
</span>

<!-- Invalid -->
<span>
  <div>...</div>
</span>

The Inline elements can’t contain the block elements because it displayed incorrectly in the browser.

But after changing the display value into the block of an inline element, it is displayed correctly. However, it would be invalid syntax.

<!-- It will display correctly,
but it is invalid syntax -->

<style>
/* Changing display value into the block */
span{
  display:block;
}
</style>

<span>
  <div>Hello</div>
</span>

The above code is Invalid because each HTML tag is used to create a specific type of element.

But when you use a tag to create an element for which it has not been defined, then it will be called an invalid syntax.

The span tag is used to grouping inline elements, which indicates it cannot contain the block-level elements. But, in the above example <span> contains the <div> element. Therefore, it is invalid.

List of HTML inline elements

<a>
<abbr>
<acronym>
<audio>
<b>
<bdi>
<bdo>
<big>
<br>
<button>
<canvas>
<cite>
<code>
<data>
<datalist>
<del>
<dfn>
<em>
<embed>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<map>
<mark>
<meter>
<noscript>
<object>
<output>
<picture>
<progress>
<q>
<ruby>
<s>
<samp>
<script>
<select>
<slot>
<small>
<span>
<strong>
<sub>
<sup>
<svg>
<template>
<textarea>
<time>
<u>
<var>
<video>
<wbr>

List of HTML block-level elements

<address>
<article>
<aside>
<blockquote>
<details>
<dialog>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1> to <h6>
<header>
<hgroup>
<hr>
<li>
<main>
<nav>
<ol>
<p>
<pre>
<section>
<table>
<ul>