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
, andwidth
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>© 2025 HTML Tutorials</p>
</footer>
</body>
</html>
HTML Atributes
Quiz-summary
0 of 3 questions completed
Questions:
- 1
- 2
- 3
Information
Quiz: Test Your Knowledge
You have already completed the quiz before. Hence you can not start it again.
Quiz is loading...
You must sign in or sign up to start the quiz.
You have to finish following quiz, to start this quiz:
Results
0 of 3 questions answered correctly
Your time:
Time has elapsed
You have reached 0 of 0 points, (0)
Categories
- Not categorized 0%
- 1
- 2
- 3
- Answered
- Review
- Question 1 of 3
1. Question
What does the alt attribute in an
tag do?
CorrectIncorrect - Question 2 of 3
2. Question
Which attribute is used to open a link in a new tab?
CorrectIncorrect - Question 3 of 3
3. Question
What is the correct tag for creating an ordered list?
CorrectIncorrect