HTML Tags
HTML tags tell the browser what kind of content to display and how to display it. Most tags come in pairs: an opening tag and a closing tag. The opening tag starts the element, and the closing tag ends it. You put the content you want to display between these tags. Some tags, like the <br> tag for line break, are self-closing and don’t need a closing tag.
Examples of HTML Tags
1. Opening Tag
An opening tag starts an HTML element and is enclosed in angle brackets.
Example:
<p>
This is the opening tag for a paragraph element.
2. Closing Tag
A closing tag ends an HTML element and is also enclosed in angle brackets, but it includes a forward slash before the tag name.
Example:
</p>
This is the closing tag for a paragraph element.
3. Self-Closing Tag
A self-closing tag is used for elements that do not have any content or children. It combines the opening and closing tags into one.
Example:
<br>
This is a self-closing tag that does not require a closing tag. It creates a line break in the text, similar to pressing “Enter” on a keyboard.
Common HTML Tags
Here’s a list of common html tags:
| Tag | Description | Example |
|---|---|---|
| <html> | Root element of an HTML document. | <html>..</html> |
| <head> | Contains meta-information about the document. | <head>…</head> |
| <title> | Sets the title of the document (shown in the browser tab). | <title>Page Title</title> |
| <body> | Contains the content of the document. | <body>…</body> |
| <h1> to <h6> | Headings, <h1> is the highest (largest), <h6> the lowest (smallest). | <h1>Main Heading</h1> |
| <p> | Defines a paragraph. | <p>This is a paragraph.</p> |
| <a> | Defines a hyperlink. | <a href=”https://example.com”>Link text</a> |
| <img> | Embeds an image. | <img src=”image.jpg” alt=”An image”> |
| <ul> | Defines an unordered (bulleted) list. | <ul>…</ul> |
| <ol> | Defines an ordered | <ol>…</ol> |
| <li> | Defines a list item. | <ul><li>Item 1</li><li>Item 2</li></ul> |
| <div> | Defines a division or section. | <div>Content here</div> |
| <span> | Defines a section in a document for inline elements. | <span>Text here</span> |
| <form> | Defines an HTML form for user input. | <form>…</form> |
| <input> | Defines an input control. | <input type=”text”> |
| <button> | Defines a clickable button. | <button>Click me</button> |
| <table> | Defines a table | <table>…</table> |
| <tr> | Defines a row in a table. | <tr>…</tr> |
| <td> | Defines a cell in a table. | <tr><td>Data</td></tr> |
| <th> | Defines a header cell in a table. | <tr><th>Header</th></tr> |
Here’s a basic HTML document that demonstrates how to use some common tags:
Output:
In this example:
- The <!DOCTYPE html> declaration defines the document type and version.
- The <html> tag encloses the entire HTML document.
- The <head> tag contains meta-information, including the <title>.
- The <body> tag contains the visible content of the web page, such as headings, paragraphs, links, lists, and forms.
Course Video
YouTube Reference :
Practice Scenarios
Scenario 1: Creating a Simple Web Page
Objective: Create a simple web page with a heading, a paragraph, and a link.
Expected Output:
- A webpage with the title “My Simple Page” (shown in the browser tab).
- A paragraph with the text “This is a simple paragraph on my web page.”
- A hyperlink with the text “Visit Facebook” that links to https://www.facebook.com/
<!DOCTYPE html>
<html>
<head>
<title>My Simple Page</title>
</head>
<body>
<h1>My Simple Web Page</h1>
<p>This is a simple paragraph on my web page.</p>
<a href=”https://www.facebook.com/”>Visit Example</a>
</body>
</html>
Output:
Scenario 2: Adding a List
Objective: Add a heading and an unordered list with three items.
Expected Output:
- A heading saying “My Favorite Fruits”.
- An unordered list with three items: Apple, Banana, and Cherry.
<!DOCTYPE html>
<html>
<head>
<title>List Example</title>
</head>
<body>
<h1>My Favorite Fruits</h1>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
</body>
</html>
Output:
Scenario 3: Creating a Form
Objective: Create a form with a text input for the name, an email input for the email, and a submit button.
Expected Output:
- A heading saying “Contact Us”.
- A form with a text input labeled “Name:”, an email input labeled “Email:”and a submit button.
<!DOCTYPE html>
<html>
<head>
<title>Form Example</title>
</head>
<body>
<h1>Contact Us</h1>
<form>
<label for=”name”>Name:</label>
<input type=”text” id=”name” name=”name”>
<label for=”email “>Email:</label>
<input type=”email” id=”” name=”email”>
<button type=”submit”>Submit</button>
</form>
</body>
</html>
Output:
Scenario 4: Combined Practice Scenarios
Objective: Create a single web page that includes a heading, a paragraph, a link, a list of favorite fruits, and a contact form.
Expected Output:
- A main heading: “My Simple Web Page”
- A paragraph: “This is a simple paragraph on my web page.”, and a link: “Visit Facebook” that points to https://www.facebook.com/
- A heading: “My Favorite Fruits”
- An unordered list with three items: Apple, Banana, and Cherry.
- A heading: “Contact Us”
- A form with text input labeled “Name:”, an email input labeled “Email:”, and a submit button.
Output:
