HTML Elements

What are HTML elements?

HTML element is from the start tag to the end tag.An element in HTML usually consist of a start tag <tag name>, close tag </tag name> and content inserted between them. Technically, an element is a collection of start tag, attributes, end tag, content between them.

HTML Elements

HTML element is from the start tag to the end tag: <tagname>Content goes here…</tagname>

Examples of some HTML elements: <h1>Heading 1</h1> <p>My first learning</p>

Start tag Element content End tag
<h1> Heading 1 </h1>
<p> Learning HTML </p>
<br> none none

Note: Some HTML elements have no content (like the <br> element). these elements are termed as empty elements or self-closing element or void elements.

What are nested HTML elements and examples?

It is often necessary to code certain tags (and their text) within the definition of other tags (between the start and end tags). All HTML documents consist of nested HTML elements.

Example

<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
        <h1>Heading 1</h1>
        <p>Learning HTML</p>
    </body>
</html>

LIVE Preview

Heading 1

Learning HTML

Example Explained

<html> element is the root element and it defines the whole HTML document.

It has a start tag <html> and an end tag </html>.

Then, inside the <html> element there is a <body> element:

<body>
        <h1>Heading 1</h1>
        <p>Learning HTML</p>
</body>

<body> element defines the document’s body.

It has a start tag <body> and an end tag </body>.

Then, inside the <body> element there are two other elements: <h1> and <p>:

<h1>Heading 1</h1>
<p>Learning HTML</p>

The <h1> element defines a heading.

It has a start tag <h1> and an end tag </h1>:

<h1>Heading 1</h1>

The <p> element defines a paragraph.

It has a start tag <p> and an end tag </p>:

<p>Learning HTML</p>

What is Block-level and Inline HTML elements

A block-level element always starts on a new line and takes up the full width available. An inline element does not start on a new line and it only takes up as much width as necessary. The <div> element is a block-level and is often used as a container for other HTML elements.

For the default display and styling purpose in HTML, all the elements are divided into two categories:

  • Block-level element
  • inline element

Block-level element:

  1. block-level elements begin on new lines.
  2. Block elements cover space from left to right as far as it can go.
  3. These elements can contain block-level as well as inline elements.
Following are the block-level elements in HTML:

<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> and <video>.

Example:

<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
        <div style="background-color: blue">Class 1</div>  
        <div style="background-color: green">Class 2</div>  
        <p style="background-color: pink">Block level element</p>  
    </body>
</html>

Output

3 In the above example we have used tag, which defines a section in a web page, and takes full width of page.

We have used style attribute which is used to styling the HTML content, and the background color are showing that it’s a block level element.

Inline elements:

  1. Inline elements never start from a new line.
  2. Inline elements only cover the space as bounded by the tags in the HTML element.
  3. The Inline elements are mostly used with other elements.

<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>.

Example:

<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
        <div style="background-color: blue">Class 1</div>  
        <div style="background-color: green">Class 2</div>  
        <p style="background-color: pink">Block level element</p>  
    </body>
</html>

Output

1

Following is the list of the some main elements used in HTML:

Start tag Content End tag Description
<h1> …… <h6> These are headings of HTML </h1>??..</h6> These elements are used to provide the headings of page
<p> This is the paragraph </p> This element is used to display a content in form of paragraph.
<div> This is div section </div> This element is used to provide a section in web page.
<br> This element is used to provide a line break. ( void element)
<hr> This element is used to provide a horizontal line. (void element)
Previous
HTML Basic Tags
Next
HTML Attribute