HTML elements are the basic building blocks of a web page. An HTML element usually consists of a start tag, content, and an end tag, which together define how information is displayed in a browser. Elements can represent headings, paragraphs, images, links, tables, forms, and many other types of content.

Some elements are container elements (with opening and closing tags), while others are empty elements that do not require a closing tag. By combining different HTML elements, developers structure and present content clearly and effectively on the web.

Here’s a complete, detailed guide to HTML elements, their types, usage, and examples. This covers everything from basic structure to semantic elements, attributes, and best practices.

---

1. What Are HTML Elements?

An HTML element is a building block of a webpage. It defines content and optionally how it should be structured or displayed.

• Every element has a start tag <tagname>, content, and end tag </tagname>
• Some elements are self-closing (void elements) and do not need an end tag

Example:

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

Here:

• <p> → start tag
• This is a paragraph. → content
• </p> → end tag

---

2. HTML Element Syntax

<tagname attribute="value">Content</tagname>

Attributes modify elements:

• id → unique identifier
• class → CSS class
• src → source for images or scripts
• href → link URL

Example:

<a href="https://www.example.com" target="_blank">Visit Example</a>

---

3. Types of HTML Elements

3.1 Block-level Elements

• Take full width of the parent container
• Start on a new line

Common examples:

<div>Content</div>
<p>Paragraph</p>
<h1>Heading</h1>
<section>Section</section>
<article>Article</article>
<footer>Footer</footer>
<header>Header</header>

---

3.2 Inline Elements

• Do not start on a new line
• Take only the width of content

Common examples:

<span>Text</span>
<a href="#">Link</a>
<strong>Bold</strong>
<em>Italic</em>
<img src="image.jpg" alt="Image">

---

3.3 Self-closing / Void Elements

• Do not have content or closing tag

Examples:

<br>        <!-- Line break -->
<hr>        <!-- Horizontal rule -->
<img src="image.jpg" alt="Image">
<input type="text">
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">

---

4. Semantic vs Non-semantic Elements

4.1 Semantic Elements

• Convey meaning about content
• Help SEO and accessibility

Examples:

<header>Header content</header>
<nav>Navigation menu</nav>
<main>Main content</main>
<article>Blog article</article>
<section>Page section</section>
<aside>Sidebar</aside>
<footer>Footer content</footer>

4.2 Non-semantic Elements

• Do not provide meaning
• Only used for layout

Examples:

<div>Generic container</div>
<span>Generic inline text</span>

---

5. Forms and Input Elements

HTML provides elements to collect user input:

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <textarea name="message" rows="4" cols="50"></textarea>

    <input type="submit" value="Submit">
</form>

Other input types: password, number, checkbox, radio, date, file, button.

---

6. Media Elements

Images

<img src="photo.jpg" alt="A beautiful photo" width="300">

Audio

<audio controls>
    <source src="song.mp3" type="audio/mpeg">
    Your browser does not support audio.
</audio>

Video

<video width="400" controls>
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support video.
</video>

IFrame (Embedding content)

<iframe src="https://example.com" width="600" height="400"></iframe>

---

7. Lists

Unordered list

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

Ordered list

<ol>
    <li>First item</li>
    <li>Second item</li>
</ol>

Description list

<dl>
    <dt>HTML</dt>
    <dd>Markup language for webpages</dd>
    <dt>CSS</dt>
    <dd>Styles the webpage</dd>
</dl>

---

8. Tables

<table border="1">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alice</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

---

9. Metadata and Head Elements

Inside <head>:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Webpage</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>

• meta → defines page info
• title → page title on browser tab
• link → link external CSS
• script → include JavaScript

---

10. HTML5 Structural Elements

HTML5 added elements to improve semantic structure:

Element	Purpose
<header>	Page or section header
<nav>	Navigation links
<main>	Main content of page
<section>	Generic section
<article>	Independent content block
<aside>	Sidebar or extra info
<footer>	Footer content

---

11. Global Attributes

Attributes that can be used in any HTML element:

• id → unique identifier
• class → CSS class
• style → inline CSS
• title → tooltip text
• hidden → hides the element

Example:

<p id="intro" class="text" title="Intro paragraph">Hello World</p>

---

🟦 12. Summary

• HTML elements structure a webpage
• Types: block, inline, void/self-closing
• Semantic elements improve accessibility & SEO
• Media, forms, tables, and lists cover most content needs
• Attributes customize behavior and style

HTML elements + CSS + JavaScript = complete interactive web pages.

---

Other Courses: