The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

HTML Tags and Elements

Next ►
►

Introduction

HTML (HyperText Markup Language) is the standard language for creating web pages. It uses tags to structure and format content. Understanding HTML tags and elements is fundamental to building web pages.

Key Concepts

What is an HTML Tag?

  • Tags are the building blocks of HTML. They are used to create elements.
  • Tags are enclosed in angle brackets (< >).
  • Most tags come in pairs: an opening tag (<tagname>) and a closing tag (</tagname>).

What is an HTML Element?

  • An element consists of an opening tag, content, and a closing tag.
  • Example: <p>This is a paragraph.</p>
  • Some elements are self-closing, meaning they do not have a closing tag. Example: <br />

Basic HTML Tags

Here are some of the most commonly used HTML tags:

Tag Description Example
<html> Defines the root of an HTML document <html> ... </html>
<head> Contains meta-information about the document <head> ... </head>
<title> Sets the title of the document <title>Page Title</title>
<body> Contains the content of the document <body> ... </body>
<h1> to <h6> Defines HTML headings <h1>Heading 1</h1>
<p> Defines a paragraph <p>This is a paragraph.</p>
<a> Defines a hyperlink <a href="https://example.com">Link</a>
<img> Embeds an image <img src="image.jpg" alt="Description" />
<ul> Defines an unordered list <ul> ... </ul>
<ol> Defines an ordered list <ol> ... </ol>
<li> Defines a list item <li>List item</li>
<div> Defines a division or section <div> ... </div>
<span> Defines a section in a document <span> ... </span>

Practical Examples

Example 1: Basic HTML Document Structure

<!DOCTYPE html>
<html>
<head>
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text on my website.</p>
</body>
</html>

Explanation:

  • <!DOCTYPE html>: Declares the document type and version of HTML.
  • <html>: The root element of the HTML document.
  • <head>: Contains meta-information like the title.
  • <title>: Sets the title of the web page, shown in the browser tab.
  • <body>: Contains the content of the web page.
  • <h1>: A level 1 heading.
  • <p>: A paragraph of text.

Example 2: Using Different Tags

<!DOCTYPE html>
<html>
<head>
    <title>HTML Tags Example</title>
</head>
<body>
    <h1>HTML Tags and Elements</h1>
    <p>This is a paragraph with a <a href="https://example.com">link</a>.</p>
    <img src="image.jpg" alt="A descriptive text for the image" />
    <ul>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ul>
</body>
</html>

Explanation:

  • <a>: Creates a hyperlink.
  • href: Attribute of the <a> tag specifying the URL.
  • <img>: Embeds an image.
  • src: Attribute of the <img> tag specifying the image source.
  • alt: Attribute of the <img> tag providing alternative text.
  • <ul>: Defines an unordered list.
  • <li>: Defines a list item.

Practical Exercises

Exercise 1: Create a Simple HTML Page

Task: Create an HTML page with the following structure:

  • A title "My Simple HTML Page".
  • A level 1 heading "Welcome".
  • A paragraph with some text.
  • An unordered list with three items.

Solution:

<!DOCTYPE html>
<html>
<head>
    <title>My Simple HTML Page</title>
</head>
<body>
    <h1>Welcome</h1>
    <p>This is a simple HTML page.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>

Exercise 2: Add a Link and an Image

Task: Modify the previous HTML page to include:

  • A link to "https://example.com" with the text "Visit Example".
  • An image with the source "image.jpg" and alternative text "Example Image".

Solution:

<!DOCTYPE html>
<html>
<head>
    <title>My Simple HTML Page</title>
</head>
<body>
    <h1>Welcome</h1>
    <p>This is a simple HTML page.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <p><a href="https://example.com">Visit Example</a></p>
    <img src="image.jpg" alt="Example Image" />
</body>
</html>

Common Mistakes and Tips

  • Forgetting to close tags: Always ensure that you close your tags properly.
  • Incorrect nesting: Make sure that tags are properly nested. For example, <p><strong>Text</strong></p> is correct, but <p><strong>Text</p></strong> is not.
  • Using self-closing tags correctly: Tags like <img> and <br /> are self-closing and do not need a closing tag.

Conclusion

Understanding HTML tags and elements is crucial for creating structured and well-formatted web pages. By mastering these basics, you are well on your way to becoming proficient in HTML. In the next topic, we will explore how to create your first HTML page, putting these concepts into practice.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved