What is an HTML Element?
An HTML element is a building block of a web page. It generally consists of an opening tag, content, and a closing tag. For example, <p>This is a paragraph</p> is an HTML element, where <p> is the opening tag, This is a paragraph is the content, and </p> is the closing tag.
<p>
This is a paragraph
</p>
▲
Opening Tag
▲
Content
▲
Closing Tag
USES:
- To create different sections of a web page, such as a header, footer, body, etc., with a particular element.
- To help display different types of text, such as headings, paragraphs, and lists, etc.
- To create links to your own page or another page, and also create images, audio, video, forms, tables, and graphs for each particular element.
HTML Elements Are Case-Insensitive:
<DIV>
Uppercase
Uppercase
⟷
<div>
Lowercase
Lowercase
↓
Both Represent the Same HTML Element
Different Parts of an HTML Element in Hierarchical Structure:
HTML Elements
Document Structure
Metadata Elements
Semantic Sections
Text Content
Links & Nav
List Elements
Media Assets
Tabular Data
Form Elements
Embedded Content
Void Elements
HTML5 Elements List
| S.No. | Category Name | Element | Description | Syntax | Example |
|---|---|---|---|---|---|
| 1 | Document Structure | <html> | Defines the root element of an HTML document. | <html>...</html> |
<html lang="en">
...
</html>
|
| <head> | Contains metadata and resources used by the browser. | <head>...</head> |
<head>
<meta charset="UTF-8">
<title>HTML Tutorial</title>
<link rel="stylesheet" href="style.css">
</head>
|
||
| <body> | Contains the visible content of an HTML web page. | <body>...</body> |
<body>
<header>Website Header</header>
<main>Page Content</main>
<footer>Website Footer</footer>
</body>
|
||
| 2 | Metadata Elements | <title> | Defines the title displayed in the browser tab. | <title>text</title> |
<title>HTML Elements - TutorialNest</title> |
| <meta> | Provides metadata such as character encoding and page description. | <meta name="name" content="value"> |
<meta name="description"
content="Learn HTML elements step by step.">
|
||
| <link> | Connects an HTML document to an external resource. | <link rel="relationship" href="URL"> |
<link rel="stylesheet" href="style.css"> <link rel="icon" href="favicon.ico"> |
||
| <style> | Contains CSS rules used to style the HTML document. | <style>CSS rules</style> |
<style>
.card {
padding: 20px;
border: 1px solid #ccc;
}
</style>
|
||
| 3 | Semantic Sections | <header> | Defines introductory content or a page section header. | <header>...</header> |
<header>
<h1>TutorialNest</h1>
<nav>Main Navigation</nav>
</header>
|
| <nav> | Defines a section containing navigation links. | <nav>...</nav> |
<nav>
<a href="html.html">HTML</a>
<a href="css.html">CSS</a>
<a href="javascript.html">JavaScript</a>
</nav>
|
||
| <main> | Defines the main content of a document. | <main>...</main> |
<main>
<h1>HTML Tutorial</h1>
<article>Learn HTML step by step.</article>
</main>
|
||
| <section> | Defines a thematic section of content. | <section>...</section> |
<section>
<h2>HTML Elements</h2>
<p>Learn different HTML elements.</p>
</section>
|
||
| <article> | Defines independent and self-contained content. | <article>...</article> |
<article>
<h2>What is HTML?</h2>
<p>HTML creates the structure of a web page.</p>
</article>
|
||
| <aside> | Defines content related to the main content. | <aside>...</aside> |
<aside>
<h3>Related Tutorials</h3>
<a href="css.html">CSS Tutorial</a>
</aside>
|
||
| <footer> | Defines the footer of a document or section. | <footer>...</footer> |
<footer>
<p>Copyright 2026 TutorialNest</p>
<a href="contact.html">Contact Us</a>
</footer>
|
||
| 4 | Text Content | <h1> | Defines the most important heading. | <h1>heading</h1> | <h1>HTML Elements</h1> |
| <h2> | Defines a second-level heading. | <h2>heading</h2> | <h2>Types of HTML Elements</h2> | ||
| <h3> | Defines a third-level heading. | <h3>heading</h3> | <h3>Semantic Elements</h3> | ||
| <h4> | Defines a fourth-level heading. | <h4>heading</h4> | <h4>Section Details</h4> | ||
| <h5> | Defines a fifth-level heading. | <h5>heading</h5> | <h5>Example Details</h5> | ||
| <h6> | Defines the sixth-level heading. | <h6>heading</h6> | <h6>Small Heading</h6> | ||
| <p> | Defines a paragraph of text. | <p>text</p> | <p>HTML creates the structure of a web page.</p> | ||
| <div> | Defines a block-level container for content. | <div>content</div> |
<div class="tutorial-card">
<h2>HTML Tutorial</h2>
<p>Learn HTML step by step.</p>
</div>
|
||
| <span> | Defines an inline container for text or other content. | <span>text</span> | Learn <span class="keyword">HTML</span> easily. | ||
| <strong> | Shows text with strong importance. | <strong>text</strong> | <strong>Important:</strong> Save your HTML file. | ||
| <em> | Emphasizes text. | <em>text</em> | Do <em>not</em> forget the closing tag. | ||
| <b> | Displays text in bold without adding importance. | <b>text</b> | <b>HTML Syntax</b> | ||
| <i> | Displays text in an alternate voice or mood. | <i>text</i> | <i>HTML markup</i> | ||
| 5 | Links & Navigation | <a> | Creates a hyperlink to another page or resource. | <a href="URL">link text</a> | <a href="html.html" title="HTML Tutorial">Learn HTML</a> |
| 6 | List Elements | <ul> | Defines an unordered list. | <ul>...</ul> |
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
|
| <ol> | Defines an ordered list. | <ol>...</ol> |
<ol>
<li>Create HTML file</li>
<li>Write HTML code</li>
<li>Open it in browser</li>
</ol>
|
||
| <li> | Defines an item in a list. | <li>item</li> | <li>HTML Tutorial</li> | ||
| <dl> | Defines a description list. | <dl>...</dl> |
<dl>
<dt>HTML</dt>
<dd>Creates web page structure.</dd>
</dl>
|
||
| <dt> | Defines a term in a description list. | <dt>term</dt> | <dt>HTML</dt> | ||
| <dd> | Defines the description of a term. | <dd>description</dd> | <dd>HyperText Markup Language</dd> | ||
| 7 | Media Assets | <img> | Displays an image on a web page. | <img src="URL" alt="text"> | <img src="images/html-elements.webp" alt="HTML elements" width="600" height="350"> |
| <audio> | Embeds audio content in a web page. | <audio controls>...</audio> |
<audio controls preload="metadata">
<source src="audio/html-intro.mp3" type="audio/mpeg">
</audio>
|
||
| <video> | Embeds video content in a web page. | <video controls>...</video> |
<video controls width="640" poster="images/video-cover.webp">
<source src="video/html-course.mp4" type="video/mp4">
</video>
|
||
| <source> | Defines a media resource for audio, video, or picture elements. | <source src="URL" type="MIME-type"> |
<video controls>
<source src="video/course.webm" type="video/webm">
<source src="video/course.mp4" type="video/mp4">
</video>
|
||
| <track> | Defines text tracks such as subtitles for audio or video. | <track src="URL" kind="kind" srclang="language" label="label"> | <track src="captions/en.vtt" kind="subtitles" srclang="en" label="English"> | ||
| 8 | Tabular Data | <table> | Defines a table for displaying tabular data. | <table>...</table> |
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</table>
|
| <caption> | Defines a title or caption for a table. | <caption>text</caption> | <caption>Student Details</caption> | ||
| <thead> | Groups the header rows of a table. | <thead>...</thead> |
<thead>
<tr>
<th>Name</th>
<th>Course</th>
</tr>
</thead>
|
||
| <tbody> | Groups the main body rows of a table. | <tbody>...</tbody> |
<tbody>
<tr>
<td>John</td>
<td>HTML</td>
</tr>
</tbody>
|
||
| <tr> | Defines a row in a table. | <tr>...</tr> | <tr><td>HTML</td><td>Beginner</td></tr> | ||
| <th> | Defines a header cell in a table. | <th>text</th> | <th scope="col">Course Name</th> | ||
| <td> | Defines a standard data cell in a table. | <td>text</td> | <td><code><article></code></td> | ||
| 9 | Form Elements | <form> | Defines a form for collecting user input. | <form action="URL" method="get|post">...</form> | <form action="register.php" method="post">...</form> |
| <label> | Defines a label for a form control. | <label for="id">text</label> | <label for="email">Email Address</label> | ||
| <input> | Creates an input control for collecting user data. | <input type="type" name="name"> | <input type="email" name="email" required autocomplete="email"> | ||
| <textarea> | Creates a multi-line text input control. | <textarea name="name" rows="n" cols="n">text</textarea> | <textarea name="message" rows="5" cols="40">Enter your message</textarea> | ||
| <select> | Creates a drop-down list. | <select name="name">...</select> |
<select name="course">
<option>HTML</option>
<option>CSS</option>
</select>
|
||
| <option> | Defines an option inside a select list. | <option value="value">text</option> | <option value="html" selected>HTML</option> | ||
| <button> | Creates a clickable button. | <button type="type">text</button> | <button type="submit">Register</button> | ||
| 10 | Embedded Content | <iframe> | Embeds another HTML page or external content. | <iframe src="URL" title="description">...</iframe> | <iframe src="html.html" title="HTML Tutorial"></iframe> |
| <embed> | Embeds external content such as a PDF file. | <embed src="URL" type="MIME-type"> | <embed src="documents/html-guide.pdf" type="application/pdf"> | ||
| <object> | Embeds an external resource in an HTML document. | <object data="URL" type="MIME-type">...</object> |
<object data="documents/html-guide.pdf"
type="application/pdf">
HTML Guide
</object>
|
||
| <picture> | Provides different images for different display conditions. | <picture>...</picture> |
<picture>
<source media="(min-width:800px)"
srcset="images/html-large.webp">
<img src="images/html-small.webp"
alt="HTML tutorial">
</picture>
|
||
| 11 | Void Elements | <br> | Inserts a line break. | <br> | First line<br>Second line |
| <hr> | Creates a thematic break between sections of content. | <hr> | <hr> |
What are Void Elements?
Some HTML elements do not have content or a closing tag. These elements are called void elements. For example, the <img> element is used to display an image and does not have a closing tag.
<img>
▲
No Content
▲
No Closing Tag
