HTML Element - SwatiMaurya08/html-notes GitHub Wiki

HTML Element

An HTML element usually consists of a start tag and an end tag, with the content inserted in between:

<tagname>Content goes here...</tagname>

The HTML element is everything from the start tag to the end tag:

<p>My first paragraph.</p>

Start Tag ------------------------- ----Content -------------------------- End Tag

<p>---------------------------------- This is Paragraph content------------------</p>

<h1>--------------------------------- This is Heading content---------------------</h1>

<div> ------------------------------- This is division content--------------------</div>

<br/>-------------------------------- This is break content

So here <p>....</p> is an HTML element, <h1>...</h1> is another HTML element. There are some HTML elements which don't need to be closed, such as <img.../>, <hr /> and <br /> elements. These are known as void elements.

HTML documents consists of a tree of these elements and they specify how HTML documents should be built, and what kind of content should be placed in what part of an HTML document.

HTML Tag vs. Element

An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag.

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

Nested HTML Elements

HTML elements can be nested (elements can contain elements).

All HTML documents consist of nested HTML elements.

Example:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Example Explained

The <html> element defines the whole document.

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

Inside the <html> element is the <body> element.

<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

The <body> element defines the document body.

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

Inside the <body> element is two other HTML elements: <h1> and <p>.

<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>

The <h1> element defines a heading.

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

The element content is: My First Heading.

<h1>My First Heading</h1>

The <p> element defines a paragraph.

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

The element content is: My first paragraph.

<p>My first paragraph.</p>
⚠️ **GitHub.com Fallback** ⚠️