HTML Elements

What is an HTML Element?

An HTML element is a building block of a webpage. It consists of a start tag, content, and an end tag (except for self-closing elements).

Structure of an HTML Element:

Opening Tag: Marks the beginning of an element.
Content: The actual content inside the element.
Closing Tag: Marks the end of an element (except for self-closing elements).

Example Structure:

<element> Content </element>

Types of HTML Elements

1. Structural Elements (Page Layout)

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Webpage</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a basic webpage structure.</p>
</body>
</html>

✔ Explanation:

<html> → The root element of the webpage.
<head> → Contains metadata like the title.
<title> → Sets the page title (shown in the browser tab).
<body> → Holds the visible content.

2. Text Formatting Elements

Used to style and format text.

Example:

<p>This is a <b>bold</b> and <i>italic</i> text.</p>
<p><u>Underlined</u> and <mark>highlighted</mark> text.</p>
<p><small>Smaller text</small> and <del>deleted text</del>.</p>

✔ Explanation:

<b> → Bold text.
<i> → Italic text.
<u> → Underlined text.
<mark> → Highlighted text.
<small> → Small-sized text.
<del> → Strikethrough text (deleted).

3. List Elements

Used to create lists.

Example:

<h3>Unordered List</h3>
<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
</ul>

<h3>Ordered List</h3>
<ol>
    <li>First step</li>
    <li>Second step</li>
    <li>Third step</li>
</ol>

✔ Explanation:

<ul> → Unordered (bulleted) list.
<ol> → Ordered (numbered) list.
<li> → Defines each list item.

4. Link and Navigation Elements

Used for creating links.

Example:

<a href="https://www.google.com" target="_blank">Visit Google</a>

✔ Explanation:

<a> → Creates a hyperlink.
href="URL" → Specifies the link destination.
target="_blank" → Opens the link in a new tab.

5. Media Elements

Used to embed images, audio, and videos.

Example:

<h3>Image</h3>
<img src="image.jpg" alt="A beautiful scenery" width="300">

<h3>Audio</h3>
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
</audio>

<h3>Video</h3>
<video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
</video>

✔ Explanation:

<img> → Displays an image (src for file location, alt for description).
<audio> → Embeds an audio file with playback controls.
<video> → Embeds a video file.

6. Table Elements

Used to display tabular data.

Example:

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

✔ Explanation:

<table> → Creates a table.
<tr> → Defines a row.
<th> → Table header (bold text).
<td> → Table data (cells).

7. Form Elements

Used to collect user input.

Example:

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    
    <button type="submit">Submit</button>
</form>

✔ Explanation:

<form> → Defines a form.
<label> → Labels input fields.
<input> → Takes user input (text, email, etc.).
<button> → Creates a clickable button.

8. Self-Closing Elements

These elements do not have closing tags.

Examples:

<img src="logo.png" alt="Logo"> <!-- Image -->
<br> <!-- Line break -->
<hr> <!-- Horizontal line -->
<input type="text"> <!-- Input field -->
<meta charset="UTF-8"> <!-- Metadata -->

✔ Explanation:

<img> → Embeds an image.
<br> → Inserts a line break.
<hr> → Inserts a horizontal line.
<input> → Defines an input field.
<meta> → Provides metadata for the document.

Conclusion

HTML elements are the foundation of a webpage. By using different elements, you can structure, format, and enhance your content effectively.