Tags and Attributes in HTML

HTML is built using tags and attributes to structure content and add functionality to web pages. Understanding these components is essential for creating robust and meaningful HTML documents.

What Are Tags?

Tags are the building blocks of HTML. They define the structure and content of a web page. Most tags have an opening and closing pair, while some are self-closing.

Types of Tags

Paired Tags: Contain opening and closing tags.
- Example: <p>This is a paragraph.</p>
Void Tags: Self-closing and do not require an end tag.
- Example: <img src="image.jpg" alt="Sample image" />

What Are Attributes?

Attributes provide additional information about an element. They are always specified in the opening tag and follow this structure:

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

Common Attributes

id: Uniquely identifies an element.
- Example: <div id="header"></div>
class: Groups elements for styling or scripting.
- Example: <p class="intro">Welcome!</p>
src: Specifies the source of external resources like images or videos.
- Example: <img src="logo.png" alt="Logo" />
href: Specifies the URL for a link.
- Example: <a href="https://example.com">Visit Example</a>
alt: Provides alternative text for images.
- Example: <img src="photo.jpg" alt="A beautiful photo" />

Comprehensive List of HTML Tags

Here’s a categorized list of common HTML tags:

Basic Document Structure Tags

<!DOCTYPE>: Declares the document type.
<html>: Root element of an HTML document.
<head>: Metadata container (title, links, scripts).
<title>: Sets the page title.
<body>: Main content container.

Lists

<ul>: Unordered list.
<ol>: Ordered list.
<li>: List item.
<dl>: Description list.
<dt>: Description term.
<dd>: Description definition.

Links and Navigation

<a>: Anchor (hyperlink).
<nav>: Navigation links.

Images and Multimedia

<img>: Displays images.
<video>: Embeds video content.
<audio>: Embeds audio content.
<source>: Specifies multiple media resources.
<track>: Provides text tracks for media.

Tables

<table>: Table container.
<tr>: Table row.
<td>: Table cell (data).
<th>: Table header.
<thead>: Table header group.
<tbody>: Table body group.
<tfoot>: Table footer group.

Forms

<form>: Form container.
<input>: Input field.
<textarea>: Multi-line text input.
<button>: Button element.
<select>: Dropdown list.
<option>: Options in a dropdown.
<label>: Label for form controls.

Scripting and Metadata

<script>: Embeds JavaScript.
<link>: Links external resources (e.g., CSS).
<meta>: Metadata for the document.
<style>: Embeds CSS styles.

Others

<div>: Block-level container.
<iframe>: Embeds another HTML page.
<details>: Creates a disclosure widget.
<summary>: Summary for a <details> element.

Example with Tags and Attributes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Tags and Attributes</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
        <nav>
            <a href="#about">About</a> | <a href="#contact">Contact</a>
        </nav>
    </header>
    <main>
        <section id="about">
            <h2>About Me</h2>
            <p>Hello! I'm learning HTML.</p>
        </section>
        <section id="contact">
            <h2>Contact</h2>
            <form>
                <label for="name">Name:</label>
                <input type="text" id="name" name="name">
                <button type="submit">Submit</button>
            </form>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 My Website</p>
    </footer>
</body>
</html>

By mastering tags and attributes, you can create structured, accessible, and visually appealing web pages. This foundational knowledge will also make it easier to learn advanced web technologies like CSS and JavaScript!

HTML Tags and Attributes