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

by

Building a webpage may sound hard, but it’s not as complicated as you might think. Every webpage is made up of simple building blocks called HTML tags. These tags tell the browser how to display your content, like text, images, or links.

If you’re new to coding, don’t worry! Learning about HTML tags is the first and easiest step in creating webpages. In this guide, we’ll explain what HTML tags are, how they work, and how you can use them to start building your own website.

Let’s keep it simple and fun as you take your first steps into the world of web development!

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!

Related Posts:

Leave a Comment