HTML Elements

 

What is an Element?

An Element is the set of opening and closing tags, with their between content.

In other words an element is everything from opening tag to the closing tag.

Example : 

<p> WebPlover </p>

In this example <p> is the opening tag, </p> is the closing tag and WebPlover is the element content.

Void (Empty) HTML Elements

HTML elements which have single tag and have no content, is called empty element.

For example : <br>

HTML5 does not require to close the empty element, but you can close the empty element by entering forward slash after the tag name, to make your document readable by XML Parsers.

For example : <br />

List of HTML empty elements (with brief description)

  • <area>

    (The <area> tag defines an area inside an image-map.)

  • <base>

    (The <base> tag describes the base URL for all relative URLs in a document.)

  • <br>

    (The <br> tag is used to insert a single line break.)

  • <col>

    (The <col> tag describes column properties for each column within <colgroup> element.)

  • <embed>

    (The <embed> tag defines a container for an external application.)

  • <hr>

    (The <hr> tag is used to separate content in an HTML page by inserting a break.)

  • <img>

    (The <img> tag defines an image in HTML page.)

  • <input>

    (The <input> tag describes an input field where the user can enter data.)

  • <keygen>

    (The <keygen> tag generates a key pair and sends key to the server with form submission.)

  • <link>

    (The <link> tag defines a link between the current page and an external page.)

  • <meta>

    (The <meta> tag provides data information about the HTML document.)

  • <param>

    (The <param> tag defines parameters for an <object> element.)

  • <source>

    (The <source> tag is used to describe multiple media resources in media elements.)

  • <track>

    (The <track> tag describes the text tracks for media elements.)

  • <wbr>

    (The <wbr> tag is used to add a line break opportunity.)

Basic HTML elements

Some of the frequently using elements is below.

HTML Heading :

HTML heading element represents the six level of headings, <h1> defines the highest level of heading while the <h6> defines the lowest level of heading.

For example :

<h1> Heading level 1 </h1>

<h2> Heading level 2 </h2>

<h3> Heading level 3 </h3>

<h4> Heading level 4 </h4>

<h5> Heading level 5 </h5>

<h6> Heading level 6 </h6>

This is result of the above code.

Result

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6

 

HTML Links :

The work of HTML links is, to connect pages together by providing the links of external pages on a page.

HTML links are defines with <a> tag.

It is necessary to add href attribute to make a workable link.

For example :

<a href="https://www.webplover.com/"> WebPlover </a>

Result of this link is WebPlover

We will discuss the HTML attributes in the next page.

HTML Paragraphs

:

The <p> element defines the HTML paragraph.

For example :

<p> This is a paragraph </p>

HTML Images :

The <img> tag defines the HTML images.

To add image in the web page, it’s important to add the src attribute in <img> tag.

For example :

<img src="image.jpg" />

HTML Lists :

There are two types of the HTML list, Ordered List & Unordered List.

The <ol> tag defines the ordered list while the <ul> tag defines the unordered list.

<li> tag is used to add items to list.

For example :

Ordered List
<ol>
<li> Samsung </li>
<li> Huawei </li>
<li> iPhone </li>
</ol>

 

Unordered List
<ul>
<li> HP </li>
<li> DELL </li>
<li> Lenovo </li>
</ul>

This is result of the above code.

Result

Ordered List

  1. Samsung
  2. Huawei
  3. iPhone

Unordered List

  • HP
  • DELL
  • Lenovo

 

What is the HTML Tags?

HTML tag contains the tag name enclosed by less than < and greater than > signs.

For example : 

<h1>

Here in this example h1 is the tag name.

 

If you find this tutorial helpful, then please Subscribe to our YouTube Channel for video tutorials, and share this article on social media.

Was this post helpful?
Let us know if you liked the post. That’s the only way we can improve.
Yes0
No0
Powered by Pixelbart

Leave a Comment

Your email address will not be published. Required fields are marked *