HTML Tags


HTML tags are the building blocks of HTML (Hyper Text Markup Language), which is used to create and structure web pages. Tags define elements on the page, such as headings, paragraphs, links, images, and more. They are enclosed in angle brackets and usually come in pairs: an opening tag and a closing tag.

Structure of HTML Tags

  1. Opening Tag: Marks the beginning of an element. It is written as <tagname>.
  2. Closing Tag: Marks the end of an element. It is written as </tagname>.
    • Example: For a paragraph, the opening tag is <p> and the closing tag is </p>.
  3. Self-Closing Tags: Some elements do not require a closing tag and are written as a single, self-closing tag. These are often void elements.
    • Example: <img /> or <br />.

Common HTML Tags

  1. Document Structure Tags:

    • <html>: The root element that wraps all other HTML elements.
    • <head>: Contains meta-information about the document, such as its title, character encoding, and links to stylesheets.
    • <title>: Sets the title of the document, which is displayed in the browser's title bar or tab.
    • <body>: Contains the content of the HTML document, such as text, images, and links.
  2. Text Formatting Tags:

    • <h1> to <h6>: Define headings, with <h1> being the highest (or most important) level, and <h6> being the lowest.
    • <p>: Defines a paragraph.
    • <b> and <strong>: Boldens text, with <strong> also implying that the text is important.
    • <i> and <em>: Italicizes text, with <em> also implying emphasis.
    • <u>: Underlines text.
    • <br>: Inserts a line break.
  3. Linking and Navigation Tags:

    • <a>: Defines a hyperlink, which links to another document or resource.
      • Example: <a href="https://example.com">Visit Example.com</a>
    • <nav>: Defines a section for navigation links.
  4. List Tags:

    • <ul>: Defines an unordered (bulleted) list.
    • <ol>: Defines an ordered (numbered) list.
    • <li>: Defines a list item within either <ul> or <ol>.
  5. Image and Media Tags:

    • <img>: Embeds an image.
      • Attributes include src (source URL) and alt (alternative text).
    • <audio>: Embeds sound content.
    • <video>: Embeds video content.
    • <source>: Specifies multiple media resources for elements like <audio> and <video>.
  6. Table Tags:

    • <table>: Defines a table.
    • <tr>: Defines a table row.
    • <td>: Defines a table cell.
    • <th>: Defines a table header cell.
    • <thead>, <tbody>, <tfoot>: Define sections of a table for headers, body, and footers.
  7. Form Tags:

    • <form>: Defines a form for user input.
    • <input>: Defines an input field.
    • <label>: Associates a label with an <input> element.
    • <textarea>: Defines a multi-line text input field.
    • <button>: Defines a clickable button.
    • <select>: Defines a drop-down list.
    • <option>: Defines an option in a drop-down list.
  8. Semantic and Layout Tags:

    • <header>: Defines a header for a document or section.
    • <footer>: Defines a footer for a document or section.
    • <article>: Defines an independent, self-contained content.
    • <section>: Defines a section in a document.
    • <aside>: Defines content aside from the main content, such as a sidebar.
    • <div>: Defines a division or section in a document, used mainly for grouping content.
  9. Meta Tags:

    • <meta>: Provides metadata about the HTML document, such as character set, viewport settings, and author.
      • Example: <meta charset="UTF-8"> specifies the character encoding.
  10. Script and Link Tags:

    • <script>: Embeds or links to a client-side script (like JavaScript).
    • <link>: Links to external resources like stylesheets.
    • <style>: Embeds CSS styles within an HTML document.

Example of HTML Tags in Use:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Webpage</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> <section id="home"> <h2>Home Section</h2> <p>This is the home section of the webpage.</p> </section> <footer> <p>&copy; 2024 My Website</p> </footer> </body> </html>