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

TagDescriptionExample
<!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

TagDescriptionExample
<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

TagDescriptionExample
<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

TagDescriptionExample
<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

TagDescriptionExample
<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

TagDescriptionExample
<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

AttributeDescriptionExample
classAssigns a class to an element for CSS<p class="intro">Hello</p>
idAssigns a unique ID to an element<div id="header"></div>
styleAdds inline CSS styling<h1 style="color:blue;">Hello</h1>
titleAdds a tooltip<a title="Go to Google">Google</a>
altAlternate 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>

HTML Atributes

Quiz: Test Your Knowledge