HTML elements are the building blocks of HTML (Hypertext Markup Language), which is the standard language used to create and structure content on the World Wide Web.
An HTML element consists of a start tag, content, and an end tag (if applicable), all enclosed within angle brackets.
Take a look at all the topics that are discussed in this article:
The basic syntax of an HTML element looks like this:
<tagname>content</tagname>
Here, tagname represents the name of the HTML element, such as <p> for paragraphs, <h1> for heading level 1, <a> for links, and so on. The content is the information or text that the element encapsulates.
For example, a simple paragraph element in HTML would look like this:
<p>This is a paragraph.</p>
In this example:
- <p> is the start tag.
- This is a paragraph. is the content.
- </p> is the end tag.
Some HTML elements don’t have closing tags because they are self-closing. For instance, the line break element <br> doesn’t have a closing tag:
<p>This is a line of text.<br>This is a new line of text.</p>
Here, <br> is used to create a line break within the paragraph.
Categories of HTML Elements
HTML elements can be categorized into different groups based on their purposes:
- Structure Elements: Divide the document into sections like <header>, <nav>, <main>, <article>, <aside>, <footer>
- Text Elements: Represent text formatting and styling like <h1> to <h6> for headings, <p> for paragraphs, <strong> for bold, <em> for italics.
- Multimedia Elements: For embedding media like <img> for images, <video> for videos, <audio> for audio.
- Form Elements: Allow user input and interactions like <form>, <input>, <button>, <textarea>.
- Table Elements: Create data tables with rows and columns using <table>, <tr>, <th>, <td>.
- Semantic Elements: Provide meaning to content like <nav> for navigation, <header> for introductory content, <aside> for sidebar content.
HTML Tag vs. Element
In HTML, the terms “tag” and “element” are closely related but have slightly different meanings:
HTML Tag
An HTML tag is a notation used in HTML to define the beginning and end of an element. It consists of the name of the element enclosed in angle brackets. Tags are used to mark up HTML elements and specify how they should be displayed or behave.
Example:
<p> is the opening tag for a paragraph element, and </p> is the closing tag.
HTML Element
An HTML element is made up of an opening tag, content, and a closing tag (in most cases). It represents a structural or semantic component within an HTML document.
Example:
In <p>This is a paragraph.</p>, the entire construct <p>This is a paragraph.</p> is an HTML element. It includes the opening tag <p>, the content “This is a paragraph.”, and the closing tag </p>.
In everyday usage, the terms “tag” and “element” are often used interchangeably, but it’s important to understand the nuanced difference between them in the context of HTML.
Nested HTML Elements
One of the powerful features of HTML is the ability to nest elements inside of other elements. This allows you to create more complex and structured documents.
When an element is placed inside the opening and closing tags of another element, it is considered nested. Here are some examples of nested HTML elements:
Paragraphs and Headings:
<div>
<h1>Main Heading</h1>
<p>This is a paragraph under the main heading.</p>
<p>Another paragraph in the same div.</p>
</div>
In this example, the <h1> and two <p> (paragraph) elements are nested within the <div> element.
Lists:
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Subitem 2.1</li>
<li>Subitem 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
Here, an unordered list (<ul>) contains list items (<li>), and one of the list items contains another nested unordered list.
Tables:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
The <table> element contains rows (<tr>), and each row contains header cells (<th>) and data cells (<td>).
Empty HTML Elements
Empty HTML elements, also known as self-closing or void elements, do not have content between opening and closing tags. Instead, they usually carry attributes that provide additional information about the element. These elements are closed with a trailing slash before the closing angle bracket (/>).
Here are some common examples of empty HTML elements:
Image:
<img decoding="async" src="image.jpg" alt="Description">
The <img> tag is used to embed images, and it is self-closing.
Input (Various Types):
<input type="text" name="username">
<input type="checkbox" checked>
The <input> tag is used for various form controls, and it can be self-closing.
Link (for CSS, Favicon, etc.):
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
The <link> tag is used to link external resources, and it is often self-closing.
These self-closing elements don’t require a closing tag because they don’t have content to enclose. They are essential for embedding external resources, creating line breaks, and defining various form controls in HTML documents.
Understanding HTML elements is crucial for building effective and accessible web pages. Each element serves a distinct purpose and nested together appropriately, they create the rich web experiences we’ve come to expect online.