HTML Elements
An HTML Element is a collection of start and end tags with the content inserted between them. HTML elements are building blocks of web pages, representing different types of content such as headings, paragraphs, links, and images.
What Are HTML Elements?
HTML (Hypertext Markup Language) is the backbone of web development. It allows us to create structured and interactive web pages. In this article, we’ll learn about the important aspects of HTML elements, their syntax, and best practices.
Syntax:
<tagname > Contents... </tagname>Some key points about HTML elements
1. Syntax:
- An opening tag indicates where the content begins:
<tagname>. - A closing tag indicates where the content ends:
</tagname>. - The actual content resides between the opening and closing tags.
2. Case Sensitivity:
- HTML tags are not case-sensitive. For example,
<B>and<b>both represent bold text. - However, it’s a best practice to use lowercase tags for consistency.
HTML Element | Descriptions |
|---|---|
Opening tag(<tagname > ) | It is used to tell the browser where the content material starts. |
Closing tag(</tagname>) | It is used to tell the browser where the content material ends. |
Content | It is the actual content material inside the opening and closing tags. |
Combining all these 3 parts results in an overall HTML Element.
Example 1: In this example <p> is a starting tag, </p> is an ending tag and it contains some content between the tags, which form an element
<!-- HTML code to illustrate HTML elements -->
<!DOCTYPE html>
<html>
<head>
<title>HTML Elements</title>
</head>
<body>
<p>Welcome to GeeksforGeeks!</p>
</body>
</html>
Output:
Nested HTML Elements
- When an HTML element is used inside another, it’s called a nested element.
- For instance, the
<html>tag contains the<head>and<body>tags, forming a nested structure.
Example: This example describes the use of Nested HTML elements. Here, the <html> tag contains the <head> and <body>. The <head> and <body> tag contain other elements so it is called a nested element.
<!DOCTYPE html>
<html>
<head>
<title>HTML Elements</title>
</head>
<body style="text-align: center">
<h1>GeeksforGeeks</h1>
<p>Computer science portal</p>
</body>
</html>
Output:
Nested HTML element
Necessary to add an end Tag
It is important to include the closing tag of an HTML element in order to ensure that the content is displayed correctly. While it is recommended to add closing tags to non-void HTML elements, modern browsers are becoming more forgiving and will not throw an error if you forget to include them. However, this can cause issues when you add additional HTML elements later on. Therefore, it is best practice to always include the closing tag for non-void HTML elements.
Example 1: In this example, we will see the implementation of above tag.
<!DOCTYPE html>
<html>
<head>
<title>HTML Elements</title>
</head>
<body>
<h2>Welcome To GeeksforGeeks</h2>
<p>Hi Geeks!
</body>
</html>
Output: This Image is showing the Browser’s Developer Tools and you can see that the missing closing tag of the paragraph element in the above-written code is automatically added by the browser without showing any error.
HTML Empty Element
HTML Elements without any content i.e., that do not print anything are called Empty elements. Empty HTML elements do not have an ending tag. For instance. <br>, <hr>, <link>, <input> etc are HTML elements.
Example 2: In this example <br> tag doesn’t print anything. It is used as a line break that breaks the line between <h2> and <p> tags.
<!DOCTYPE html>
<html>
<head>
<title>Empty HTML Elements</title>
</head>
<body>
<h2>Welcome To GfG</h2>
<br />
<p>Hello Geeks.</p>
</body>
</html>
Output:
HTML empty element
Supported Browsers
- Google Chrome: 1
- Microsoft Edge: 12
- Mozilla Firefox: 1
- Opera: 2
- Safari: 1
HTML Elements – FAQs
What is an HTML element?
An HTML element consists of a start tag, content, and an end tag. For example, <p>Hello World</p> is a paragraph element.
What are self-closing tags?
Self-closing tags, also known as void elements, do not have content or an end tag. Examples include <br>, <img>, and <input />.
What are inline elements?
Inline elements do not start on a new line and only take up as much width as necessary. Examples include <span>, <a>, and <img>.
What is an empty element?
An empty element is one that has no content between its tags. Self-closing tags are examples of empty elements.
What is the <body> element?
The <body> element contains the contents of an HTML document, such as text, images, links, and other media.
