Skip to main content

HTML Elements Explained | Learn About HTML Elements

HTML elements are represented by tags, which are enclosed in angle brackets < >.

As an example:

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

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

Example :​

<h1>This is a heading.</h1>

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

Start tagElement contentEnd tag
<h1>This is a heading</h1>
<p>This is a paragraph.</p>

Nested HTML Elements​

Nested HTML elements are HTML elements that are contained within another HTML element. When one element is nested within another element, it means that it is a child of the outer element and a parent of the inner element.

As an example:

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

In this example:

  • The <div> element is the outer element, and it contains two inner elements: the <h1> element and the <p> element.
  • The <h1> element is a child of the <div> element, and the <div> element is a parent of the <h1> element.
  • Similarly, the <p> element is also a child of the <div>element.

End Tag​

Some HTML elements will display correctly, even if you forget the end tag:

Editor

Loading...

Empty Elements​

Empty HTML elements are HTML elements that do not have any content or text between their opening and closing tags.

Empty HTML elements are represented by tags that are self-closing or don't have a closing tag.

Some examples of empty HTML elements include:

  • <img>: This element is used to embed images in a web page and does not have a closing tag.
<img src="image.jpg" alt="image description" />
  • <input>: This element is used to create input fields in a form and does not have a closing tag.
<input type="text" name="username" />
  • <br>: This element is used to create a line break or space between two lines of text and does not have a closing tag.
<br />
  • <hr>: This element is used to create a horizontal line on a web page and does not have a closing tag.
<hr />
  • <meta>: This element is used to include metadata about the web page, such as the page title and description, in the head section of the HTML document.
<meta name="description" content="Page description" />

HTML Case Sensitive​

HTML (Hypertext Markup Language) is not case sensitive, which means that you can use uppercase or lowercase letters to write HTML tags and attributes.

As an example:

The following lines of HTML code are equivalent:

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

Both of these lines of code will produce the same output, which is a paragraph of text that says "This is a paragraph."

always use lowercase

It is good practice to use lowercase letters for HTML tags and attributes, as this is the convention that is most widely used in the web development community. Using lowercase letters can also make your HTML code more readable and easier to maintain.

Tag reference​

Here is an HTML tag reference:

TagDescriptionExample
<h1> - <h6>Headings<h1>Heading 1</h1>
<p>Paragraph<p>This is a paragraph.</p>
<a>Anchor (link)<a href="https://example.com">Link</a>
<img>Image<img src="image.jpg" alt="Image description">
<ul>Unordered list<ul><li>Item 1</li><li>Item 2</li></ul>
<ol>Ordered list<ol><li>Item 1</li><li>Item 2</li></ol>
<li>List item<ul><li>Item 1</li><li>Item 2</li></ul>