An Html document is a text file that consists of elements. These elements are the basic foundation of creating any web page. They are used to defining the basic structure and content in the web page.

A pair of tags and the content within (or between) those tags are known as an HTML element.

Technically, an element in HTML usually consists of start tag , attributes, close tag name> and content between them.

Each HTML element has a specific role that we generally use to add headings, paragraphs, links, tables, images, forms, tables, and other elements to a web page.

We define an HTML element by opening and closing tags. The syntax of an HTML element is as follows:

Content
or,
Content

Look at the below figure where we have shown HTML element syntax more nicely.

As shown in the above figure, an element is identified by tags and the content inserted between those tags. A tag consists of the element name (or tag name) within angle brackets ().

The opening tag, also called start tag () says the browser, “the element starts here”. The closing tag, also called ending tag () says the browser, “the element ends here”.

Note that the closing tag starts with a forward slash (/). The tags added around content are known as markup.

Examples of HTML Elements

---

Some examples of HTML elements are as:

First heading
Second heading


First paragraph


Scientech Easy

Commonly Used HTML Elements

---

HTML provides a wide range of elements that we can use to create a web page. The most commonly used HTML elements are as follows:

(1) Element:

The declaration of DOCTYPE (also known as HTML document type) is the first line of HTML code needed in every HTML web page. The DOCTYPE declaration tells the web browser about what version of HTML page we wrote in.

(2) Element:

HTML element is the root element that is used to specify beginning and ending of HTML code in the document. It is the most fundamental element in which we will use to create a web page. It contains all other elements within. The HTML element consists of a start tag and an end tag .

(3) Element:

The

element contains metadata (data about the HTML document). It is placed between the tag and tag. It is not visible to the user.

(4) Element:

This element contains all the contents of an HTML webpage, such as heading, paragraphs, images, links, tables, etc. It consists of a start tag

and an end tag . It is the basic structure of a HTML document or web page.

(5)

,

,

,

,

, and

Elements:

These elements create titles and subheadings on a web page. They help to organize content and improve readability.

(6)

Element:

The

element is used to separate blocks of text and create breaks between sections of content. It consists of a start tag

and an end tag

. We often use them in combination with headings to create a logical flow of information on a web page.

A basic structure of HTML webpage with these elements is as:

  
    
Definition of HTML Element
   
A pair of tags and the content inserted between these tags is called HTML element.

In addition to these elements, some other commonly used HTML elements are link, image, list, form, table, title, style, etc. We will understand them in the further tutorial in more detail.

Empty Elements

---

Empty elements in HTML are those elements that do not have any content. These elements are self-closing, meaning that they do not have a closing tag. Instead, they are closed with a forward slash (/) at the end of the opening tag.

A very simple syntax of an empty element is as:

We commonly use empty elements to add images, links, and other types of content to a web page. Here are some commonly used empty elements in Html:

(1) Image :

The image element is the most common example of an empty element. We use it to insert images into a web page. It does not contain any content inside of it and is closed with a forward slash at the end of the opening tag. We use an attribute “src” to specify the source of image. Look at a simple example.

(2) Line break
:

This is another empty element that defines a line break in an HTML document. It does not have any content inside it and is closed with a forward slash at the end of the opening tag.

(3) Link :

This empty element links a web page to an external resource, such as a stylesheet or a favicon. It does not have any content and closes without a closing tag. A simple example of it is as:

(4) Meta :

This empty element defines metadata about a web page, such as the character encoding and keywords. It has no any content inside it and closes with a forward slash at the end of the opening tag.

We specify the metadata in various attributes, such as “charset” and “name”. A simple example of this empty element is as:

Nested HTML Elements

---

HTML also allows to nest elements. When we an element inside other elements, then we call it as nested HTML element. We use nested elements to construct more complex web page layouts and structures.

With the help of nesting elements, we can create hierarchies of content that make it easier to manage and understand webpage structures.

A basic example of nested elements is a structure of the HTML document that contains five HTML elements (,

, ,

and

) as shown above example.

Other examples of nested HTML elements are list elements and table elements. We make a list by nesting list elements (ul, ol, and li) together. An example of list elements is as below:

• Item 1
• Item 2
  • Sub-item 1
  • Sub-item 2
• Item 3

Types of Elements

---

There are mainly two basic types of markup elements. They are as:

• Block element
• Inline element

We will understand each type in detail with the help of examples in the further tutorials.

---

In this tutorial, you have known about the HTML elements with various examples. Hope that you will have understood the basic points of elements.
Thanks for reading!!!

The post HTML Elements | Types, Example appeared first on Scientech Easy.