HTML Tags and Attributes – Complete Guide with Examples

What Are HTML Tags?

HTML tags are the building blocks of HTML documents. They define the structure and content of a webpage. Tags are enclosed in angle brackets (<>) and usually come in pairs: an opening tag (<tag>) and a closing tag (</tag>).

Example:

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

What Are HTML Attributes?

Attributes provide additional information about HTML elements. They are always written in the opening tag and consist of a name and a value.

Example:

<img src="image.jpg" alt="A beautiful view" width="600">

src, alt, and width are attributes.
The values provide the specific information.

Common HTML Tags

1. Document Structure Tags

Tag	Description	Example
`<!DOCTYPE>`	Defines the HTML version	`<!DOCTYPE html>`
`<html>`	Root element of an HTML document	`<html lang="en">...</html>`
`<head>`	Contains metadata about the document	`<head>...</head>`
`<body>`	Contains the visible content	`<body>...</body>`

2. Text Formatting Tags

Tag	Description	Example
`<h1> to <h6>`	Headings (largest to smallest)	`<h1>Main Heading</h1>`
`<p>`	Paragraph	`<p>This is a paragraph.</p>`
`<b>`/`<strong>`	Bold/Emphasized text	`<strong>Important!</strong>`
`<i>`/`<em>`	Italics/Emphasized text	`<em>Highlighted</em>`
`<br>`	Line break (self-closing)	`Line 1<br>Line 2`

3. Link and Image Tags

Tag	Description	Example
`<a>`	Hyperlink	`<a href="https://example.com">Visit</a>`
`<img>`	Image	`<img src="photo.jpg" alt="Photo">`

Attributes for <a>:

href: URL the link points to.
target="_blank": Opens link in a new tab.

Attributes for <img>:

src: Path to the image.
alt: Alternate text for accessibility.
width/height: Image dimensions.

4. List Tags

Tag	Description	Example
`<ul>`	Unordered list	`<ul><li>Item 1</li><li>Item 2</li></ul>`
`<ol>`	Ordered list	`<ol><li>First</li><li>Second</li></ol>`
`<li>`	List item	`<li>Item</li>`

5. Table Tags

Tag	Description	Example
`<table>`	Table	`<table>...</table>`
`<tr>`	Table row	`<tr>...</tr>`
`<td>`	Table data/cell	`<td>Data</td>`
`<th>`	Table header cell	`<th>Header</th>`

6. Semantic Tags

Tag	Description	Example
`<header>`	Defines the header of a page or section	`<header>...</header>`
`<footer>`	Defines the footer of a page	`<footer>...</footer>`
`<main>`	Represents the main content	`<main>...</main>`
`<section>`	Defines a section of content	`<section>...</section>`
`<article>`	Represents independent content	`<article>...</article>`
`<aside>`	Defines content aside from the main	`<aside>...</aside>`

Common HTML Attributes

Attribute	Description	Example
`class`	Assigns a class to an element for CSS	`<p class="intro">Hello</p>`
`id`	Assigns a unique ID to an element	`<div id="header"></div>`
`style`	Adds inline CSS styling	`<h1 style="color:blue;">Hello</h1>`
`title`	Adds a tooltip	`<a title="Go to Google">Google</a>`
`alt`	Alternate text for images	`<img alt="Description">`

HTML 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>HTML Tags and Attributes Guide</h1>
    </header>
    <main>
        <section>
            <h2>Introduction</h2>
            <p class="intro">This guide covers the basics of HTML tags and attributes with examples.</p>
        </section>
        <section>
            <h2>HTML Tags</h2>
            <ul>
                <li><strong>Structural tags:</strong> `<html>`, `<head>`, `<body>`</li>
                <li><strong>Text tags:</strong> `<h1>` to `<h6>`, `<p>`, `<strong>`</li>
                <li><strong>Media tags:</strong> `<img>`, `<video>`</li>
            </ul>
        </section>
    </main>
    <footer>
        <p>&copy; 2025 HTML Tutorials</p>
    </footer>
</body>
</html>

[WpProQuiz 46]