RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/html/html-elements/ below:

HTML Elements - GeeksforGeeks

HTML Elements

Last Updated : 11 Jul, 2025

An HTML Element consists of a start tag, content, and an end tag, which together define the element's structure and functionality. Elements are the basic building blocks of a webpage and can represent different types of content, such as text, links, images, or headings.

For example, the <p> element for paragraphs includes opening and closing tags with text content in between.

Syntax:

<tagname >Your Contents... </tagname>

HTML Element Code Example:

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


 <!-- HTML code to illustrate HTML elements -->
<!DOCTYPE html>
<html>

<head>
    <title>HTML Elements</title>
</head>

<body>
    <p>Welcome to GeeksforGeeks!</p>
</body>

</html>

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 and readability.

Nested HTML Elements

Nested HTML Elements occur when one element is placed inside another, creating a hierarchical structure. This structure is crucial for organizing content on web pages effectively, ensuring that different elements relate logically and visually to each other.

Example: Here, the <html> tag contains the <head> and <body> tags, forming a nested structure.

HTML


 <!DOCTYPE html>
<html>

<head>
    <title>HTML Elements</title>
</head>

<body style="text-align: center">
    <h1>GeeksforGeeks</h1>
    <p>Computer science portal</p>

</body>

</html>

Here, the <html> tag contains the <head> and <body>. The <head> and <body> tag contain other elements so it is called a nested element.

Necessary to Add an End Tag

For non-empty HTML elements, if you forget to add a closing or end tag, modern browsers may automatically add it in some cases.

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.

HTML


 <!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: 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.

HTML


 <!DOCTYPE html>
<html>

<head>
    <title>Empty HTML Elements</title>
</head>

<body>
    <h2>Welcome To GfG</h2>
    <br />
    <p>Hello Geeks.</p>

</body>

</html>

Block-Level Elements and Inline Elements

In HTML, elements are broadly categorized into two main types based on how they display in the document layout: block-level elements and inline elements.

1. Block-Level Elements - Block-level elements typically start on a new line and take up the full width available to them, regardless of their actual content width. This means they stack vertically and can contain other block-level elements as well as inline elements. Here are some examples of block-level elements:

Examples:

<div>: A general-purpose container for other elements.
<p>: Defines a paragraph.
<h1>, <h2>, ..., <h6>: Heading elements of different levels.
<ol>, <ul>: Ordered and unordered lists.
<table>: Defines a table.
<form>: Used for HTML forms to collect user inputs.
<section>, <article>, <nav>, <aside>, <header>, <footer>: Semantic elements that define areas of a webpage.

2. Inline Elements - Inline elements do not start on a new line; they appear on the same line as adjacent content, as long as there is space. They only take up as much width as their content requires. Inline elements are typically used within block-level elements to add content or style. Here are some examples of inline elements:

Examples:

<span>: A general-purpose inline container for phrasing content.
<a>: Creates hyperlinks.
<img>: Embeds an image.
<strong>, <b>: Used for strong emphasis and bold text, respectively.
<em>, <i>: Used for emphasis and italic text, respectively.
<br>: Inserts a line break within text.
<input>: Creates interactive controls for forms.

To know more about Block-Level Elements and Inline Elements, refer to this article.

Best Practices When Using HTML Elements

Semantic HTML: Use HTML elements according to their intended purpose. For example, use heading elements for headings, <p> for paragraphs, and <a> for links.
Accessibility: Enhance accessibility by using proper elements like <main>, <aside>, <header>, and <footer>. Also, always include alt text for images.
Keep it Simple: Avoid unnecessary complexity in HTML structure. Use the simplest possible elements to achieve the desired layout and functionality.

Supported Browsers

Google Chrome: 1
Microsoft Edge: 12
Mozilla Firefox: 1
Opera: 2
Safari: 1

HTML Elements in Web Development

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4