HTML Elements | Learn HTML

HTML Elements

An HTML element is an individual component of the HTML document or a web page. A web page is the collection of all those HTML Elements.

An HTML element consists of a starting tag, closing tag and with the content inserted in between.

<tagname>Element content…</tagname>

Start tag Element content End tag
<h1> This is Heading </h1>
<p> This is a paragraph. </p>
<br>

HTML elements without content are called empty elements. Empty elements don’t have the ending tag. Such as <br>


HTML Element VS Tag

An HTML element defines by a starting tag. If the element has other content, and it ends with a closing tag. All together, HTML elements are made up.

On the other hand, an HTML tag either opening or closing which we use to mark the start or end of an element. Tags are the part of an element.

For example <p> is starting tag of a paragraph and </p> is closing tag of the same paragraph but <p>This is a paragraph</p> is a paragraph element. Here <p> and </p> are called tag separately.


Nested HTML Elements

You can also write HTML elements in a nested form. An HTML document contains multiple nested html elements.

Note: if one html element contains one or more html elements as its content then it is called nested html elements.

This is the simple example for you, which contains five HTML elements.

OUTPUT


Example Explanation

First, the <html> document defines the full document. It has an opening tag <html> and a closing tag </html>.

As a content, this element has four other html elements like <body>, <h1>, <p>.

<html>
<body>

<h1>This is Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

The <body> element defines the document body. All the visible contents that shows on a web browser go inside this element.

It has an opening tag <body> and a closing tag </body>.

As a content, this element has two other html elements like <h1>, <p>.

<body>

<h1>This is Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>

The <h1> is a heading element. It has an opening tag <h1> and a closing tag </h1>.

This element content is: This is Heading

<h1>This is Heading</h1>

The <p> is a heading element. It has an opening tag <p> and a closing tag </p>.

There are two paragraph elements in this example.

This element content is: This is a paragraph.

This element content is: This is another paragraph.

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Empty HTML Elements

HTML elements that have no content are empty elements. Empty element has no closing tag.

<br> is an empty element, which represents a line break.

Note: In HTML, an empty element is written simply as <br>. In XHTML, an empty element requires a space and a slash, such as <br />.

<p>This is a <br> paragraph with a line break.</p>

HTML Elements Types

HTML elements can be classified into two groups: block level and inline level elements.

Block level, the elements that work as blocks (i.e. takes up the full width available of the container) with a line break before and after the element are called block level elements.

For example, paragraph (<p>), headings (<h1> to <h6>), divisions (<div>) etc.

Inline level, the elements that do not create new block and only take the space bounded by the tags defining the element are called inline level elements.

An inline element does not start on a new line and takes up as much width as required.

For example, span (<span>), image (<img>), line break (<br>) etc.

Learn more about HTML elements types, our tutorial – HTML Blocks


Case Insensitivity in HTML

HTML tags are not case-sensitive. You can use both uppercase and lowercase. The tag <p> and <P> are the same thing.

However, in XHTML they are case-sensitive and the tag <P> is different from <p>.

Note: Using lowercase is the standard way of writing html code. W3C also recommends lowercase in HTML.

You should use lowercase while writing html tags. At worldtechis, we always use lowercase in html tags.