HTML Tags Explained: A Beginner’s Guide to Building Webpages

by

Here’s a complete guide to HTML tags, categorized and explained for ease of learning and usage:

HTML Document Structure

Every HTML document starts with the following basic structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
</head>
<body>
    <h1>Welcome to HTML Guide</h1>
    <p>This is a basic example.</p>
</body>
</html>
  • <!DOCTYPE html>: Declares the document type and version of HTML (HTML5 in this case).
  • <html>: Root element of the HTML document.
  • <head>: Contains metadata like the title, charset, and links to stylesheets.
  • <body>: Contains the content displayed on the webpage.

Head Section Tags

  1. Metadata Tags:
  • <title>: Sets the webpage’s title (displayed on the browser tab).
  • <meta charset="UTF-8">: Declares the character encoding.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Makes the website responsive.
  1. Linking and Styling:
  • <link rel="stylesheet" href="styles.css">: Links external CSS files.
  • <style>: Embeds internal CSS.
  1. Scripts:
  • <script src="script.js"></script>: Links external JavaScript files.
  • <script>: Embeds inline JavaScript.

Body Section Tags

Content Structure

  1. Headings:
   <h1>Main Heading</h1>
   <h2>Subheading</h2>
   <h3>Sub-subheading</h3>

Headings range from <h1> (largest) to <h6> (smallest).

  1. Paragraphs:
   <p>This is a paragraph.</p>
  1. Divisions and Sections:
  • <div>: Defines a block-level container.
  • <section>: Groups related content.
  • <article>: Represents standalone content.
  • <header> and <footer>: Define the top and bottom sections of a page.

Text Formatting

<b>Bold</b>
<strong>Strong emphasis</strong>
<i>Italic</i>
<em>Emphasis</em>
<mark>Highlighted</mark>
<u>Underlined</u>
<del>Strikethrough</del>
<sup>Superscript</sup>
<sub>Subscript</sub>

Lists

  1. Unordered List:
   <ul>
       <li>Item 1</li>
       <li>Item 2</li>
   </ul>
  1. Ordered List:
   <ol>
       <li>First</li>
       <li>Second</li>
   </ol>
  1. Description List:
   <dl>
       <dt>Term</dt>
       <dd>Definition</dd>
   </dl>

Links and Images

  1. Links:
   <a href="https://example.com">Visit Example</a>
  1. Images:
   <img src="image.jpg" alt="Description of Image" width="300" height="200">

Tables

<table border="1">
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </tbody>
</table>

Forms

<form action="/submit" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <label for="message">Message:</label>
    <textarea id="message" name="message"></textarea>

    <button type="submit">Submit</button>
</form>

Interactive Elements

  1. Buttons:
   <button>Click Me</button>
  1. Audio:
   <audio controls>
       <source src="audio.mp3" type="audio/mpeg">
       Your browser does not support audio.
   </audio>
  1. Video:
   <video controls>
       <source src="video.mp4" type="video/mp4">
       Your browser does not support video.
   </video>

Semantic HTML5 Tags

  • <nav>: Defines navigation links.
  • <aside>: Represents content related to the main content.
  • <main>: Highlights the main content.
  • <figure> and <figcaption>: Used for images with captions.

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Full Guide</title>
</head>
<body>
    <header>
        <h1>HTML Guide</h1>
    </header>

    <nav>
        <ul>
            <li><a href="#content">Content</a></li>
            <li><a href="#form">Forms</a></li>
        </ul>
    </nav>

    <main>
        <section id="content">
            <h2>HTML Basics</h2>
            <p>This is a guide to HTML.</p>
        </section>

        <section id="form">
            <h2>Form Example</h2>
            <form>
                <label for="example">Input:</label>
                <input type="text" id="example">
                <button>Submit</button>
            </form>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 HTML Guide</p>
    </footer>
</body>
</html>

This provides a comprehensive overview of HTML tags and their usage. Let me know if you’d like more specific tags or examples!

Leave a Comment