HTML Tags

HTML (Hypertext Markup Language) uses tags to define and structure the content of a webpage. Tags are fundamental building blocks that enclose elements, and they play a crucial role in creating a hierarchy of information on a web page. Here is a detailed overview of HTML tags:

  1. Opening and Closing Tags:
    • Opening Tag: The beginning of an HTML element, enclosed in angle brackets. Example: `<p>`
    • Closing Tag: The end of an HTML element, also enclosed in angle brackets but with a forward slash before the tag name Example: `</p>`
  2. Common Structural Tags:
    • `<html>`: The root element of an HTML document
    • `<head>`: Contains metadata about the document, such as title, character set, styles, and links to external resources.
    • `<title>`: Sets the title of the HTML document displayed in the browser.
    • `<body>`: Contains the content of the HTML document, including text, images, links, and other elements.
  3. Text Formatting Tags:
    • <p>: Defines a paragraph
    • <h1> to <h6>: Heading tags for defining six levels of headings, <h1> being the highest.
    • <strong>: Represents strong importance or emphasis (usually displayed as bold).
    • <em>: Represents emphasized text (usually displayed as italic).
  4. List Tags:
    • <ul>: Defines an unordered list.
    • <ol>: Defines an ordered list.
    • <li>: Represents a list item within <ul> or <ol>.
  5. Link Tags:
    • <img>: Embeds images in an HTML document.
    • Example: <img src="image.jpg" alt="Description of the image"> Example: <img src="image.jpg" alt="Description of the image">
  6. Form Tags:
    • <form >: Wraps form controls for user input.
    • <input >:Defines an input field within a form
    • <lable >:Represents a label for an <input> element.
    • <textarea >: Defines a multiline text input control.
  7. Semantic HTML Tags:
    • <header>: Represents a header section, often containing introductory content or navigation links.
    • <nav>: Defines a navigation menu.
    • <main>: Represents the main content of the document.
    • <article>: Defines an independent piece of content that can be reused or distributed.
  8. Miscellaneous Tags:
    • <div>: Represents a generic container used to group other HTML elements.
    • <span>: Represents an inline container, often used for applying styles or scripting.
  9. Comment Tags:
    • <!-- ........ -->: Allows developers to insert comments within the HTML code for documentation or reminders.
Example:-
<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Tags Example</title>
</head>
<body>
    
<header>
    <h1>Welcome to My Website</h1>
</header>
  
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav> 

    <main>
     <article>
            <h2>Introduction</h2>
            <p>This is the main content of the webpage.</p>
        </article>

        <article>
            <h2>Features</h2>
            <ul>
                <li>Text formatting</li>
                <li>List creation</li>
                <li>Linking to other pages</li>
                <li>Embedding images</li>
            </ul>
        </article>
    </main>

     <footer>
        <p>&copy; 2023 My Website. All rights reserved.</p>
    </footer>
</body>
</html>

This example demonstrates the use of various HTML tags to structure the content of a webpage. HTML tags are essential for organizing information, enhancing accessibility, and defining the visual presentation of a website.