HTML Tags Reference - WittyWriter

HTML Tags Reference

📘 Key Concepts and Definitions

🧮 HTML Document Structure

Every HTML document follows a fundamental structure, or "boilerplate."

<!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>
    <!-- All visible content goes here -->
</body>
</html>

🛠️ Core Syntax Patterns

Standard Element with Content

<tagname>Content goes here.</tagname>

Element with Attributes

<tagname attribute="value">Content.</tagname>

Example: <a href="https://www.google.com">Visit Google</a>

Self-Closing (Void) Elements

Some elements don't have content or a closing tag.

<tagname attribute="value">

Examples: <img src="photo.jpg" alt="A photo">, <br>, <hr>

Common Character Entities

ResultDescriptionEntity
 Non-breaking space&nbsp;
<Less than&lt;
>Greater than&gt;
&Ampersand&amp;
©Copyright&copy;

🧭 Best Practices & Workflow

Basic Web Page Workflow

  1. Create a new file and save it with an .html extension (e.g., index.html).
  2. Add the standard HTML5 boilerplate.
  3. Inside the <head>, set your page <title>.
  4. Inside the <body>, structure your content using semantic HTML tags like <header>, <main>, and <footer>.
  5. Add content using text tags (<h1>, <p>), links (<a>), images (<img>), and lists (<ul>, <ol>).
  6. Save the file and open it in a web browser to check your work.
Best Practices:
  • Always close your tags (except for self-closing tags).
  • Indent nested code to improve readability.
  • Use lowercase for tags and attributes.
  • Use semantic tags to describe your content's structure and meaning.
  • Always include the alt attribute on <img> tags for accessibility.

⌨️ Productivity Tips (Emmet)

Most modern code editors (like VS Code) have Emmet built-in. Type the abbreviation and press Tab.

📊 Common Tags Reference Table

Text & Headings

TagDescription
<h1> to <h6>Heading levels, 1 is the most important.
<p>Defines a paragraph.
<strong>Defines important text (bolded by default).
<em>Defines emphasized text (italicized by default).
<span>An inline container for styling parts of text.

Links & Images

TagDescription
<a>Defines a hyperlink. Use the href attribute for the URL.
<img>Embeds an image. Use src for the path and alt for descriptive text.

Lists

TagDescription
<ul>Defines an unordered (bulleted) list.
<ol>Defines an ordered (numbered) list.
<li>Defines a list item, used inside <ul> or <ol>.

Semantic Layout

TagDescription
<header>Container for introductory content or navigation links.
<nav>Defines a set of navigation links.
<main>Specifies the main, unique content of the document.
<section>Defines a thematic grouping of content.
<article>Defines self-contained, independent content (e.g., a blog post).
<footer>Container for the footer of a document or section.
<div>A generic container for styling and grouping (use only when no semantic tag is appropriate).

🧪 Example: Simple Blog Post

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My First Blog Post</title>
</head>
<body>

    <header>
        <h1>Understanding HTML</h1>
        <nav>
            <ul>
                <li><a href="/home">Home</a></li>
                <li><a href="/about">About</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>The Building Blocks of the Web</h2>
            <p>HTML is the foundation of every webpage. It consists of <strong>elements</strong> that structure the content.</p>
            <img src="code_image.png" alt="Snippet of HTML code">
            <p>Learning the basic tags is the first step to becoming a web developer.</p>
        </article>
    </main>

    <footer>
        <p>© 2025 My Awesome Blog. All rights reserved.</p>
    </footer>

</body>
</html>

🧹 Troubleshooting Common Errors

📚 References and Further Reading

🍪 We use cookies to improve your experience. Learn more