View video tutorial

HTML Elements

HTML

An HTML element is the starting tag and ending tag along with its contents.

HTML Elements are the small unit of web pages.


Element has start tags and end tags and content between them.

Element is the HTML small piece of unit

A complete form of HTML tags.

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.

HTML Element

An element is everything between the start tag and the close tag.

<h1>This is a heading element</h1>
<p>This is a paragraph element.</p>

HTML Element with attribute

An element can have zero or more attributes, some elements have mandatory attributes.

<h1 id="mh" style="color:red;">This is a heading element</h1>
<p class="mp" style="border:1px solid blue;">This is a paragraph element.</p>

HTML Empty Element

An element can be empty if there is no body or content of the element(<br/>, <hr/>). In that case the element can be written in short form by a tag and followed by a forward-slash.

<h1 id="mh" style="color:red;">This is a heading element</h1>
<br/>
<p class="mp" style="border:1px solid blue;">This is a paragraph element.</p>
<hr/>

HTML Nested Element

An element can be nested by other elements. The inner element is called child or nested element and the outer element is called parent or nesting element.

In code bellow body is the nesting element for section element where h1 and p are nested by section element.

<body>
  <section>
    <h1>This is a heading element</h1>
    <p>This is a paragraph element.</p>
  </section>
</body>

Elements Example

Example

<!DOCTYPE html>
<html>
<head>
    <!-- This is title element -->
    <title>HTML Element Example</title>
    <!-- This is style element -->
    <style>
        .sec{
            padding: 25px;
            background-color: #808080;
            border-radius:5px;
        }
    </style>
</head>
<body>
    <!-- HTML Element Example -->
    <h2>HTML Element Example</h2>
    <section class="sec">
        <h1 id="mh" style="color:white;">This is a heading element</h1>
        <br/>
        <p class="mp" style="border:1px solid blue;">This is a paragraph element.</p>
        <hr/>
        <p>This is another paragraph.</p>
    </section>
</body>
</html>
Try it Now »

Click on the "Try it Now" button to see how it works.


HTML Tag List

This list contains information about the tags and their attributes and usage.

Tag Name Description
<html> This defines the root of an HTML document.
<body> It defines the document's body.
<H1> This define HTML headings.
<p> This define HTML paragraph.

Note: For a complete list of all available HTML tags, visit HTML Tag List