VerityForge

HTML Crash Course & Cheat Sheet

5 min read

Overview

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure and content of a webpage using elements enclosed in tags.

Basic Structure

Every HTML document follows this basic structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
</head>
<body>
    <!-- Your content goes here -->
</body>
</html>

Key Components:

  • <!DOCTYPE html> - Declares HTML5 document type
  • <html> - Root element, contains all content
  • <head> - Metadata not displayed on page
  • <body> - Visible page content

Essential HTML Elements

Text Elements

ElementPurposeExample
<h1> to <h6>Headings (largest to smallest)<h1>Main Title</h1>
<p>Paragraphs<p>This is a paragraph.</p>
<br>Line breakLine 1<br>Line 2
<hr>Horizontal rule/divider<hr>
<strong>Important text (bold)<strong>Important!</strong>
<em>Emphasized text (italic)<em>Emphasized</em>
<span>Inline container<span>Inline text</span>
<!-- Links -->
<a href="https://example.com">External Link</a>
<a href="#section1">Internal Link</a>
<a href="mailto:email@example.com">Email Link</a>
 
<!-- Images -->
<img src="image.jpg" alt="Description of image" width="300" height="200">
 
<!-- Videos -->
<video controls width="400">
    <source src="video.mp4" type="video/mp4">
    Your browser doesn't support video.
</video>
 
<!-- Audio -->
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Your browser doesn't support audio.
</audio>

Lists

<!-- Unordered List -->
<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>
 
<!-- Ordered List -->
<ol>
    <li>Step one</li>
    <li>Step two</li>
    <li>Step three</li>
</ol>
 
<!-- Description List -->
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

Container Elements

Semantic HTML5 Elements

<header>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
        </ul>
    </nav>
</header>
 
<main>
    <article>
        <header>
            <h1>Article Title</h1>
        </header>
        <section>
            <h2>Section Title</h2>
            <p>Content goes here...</p>
        </section>
    </article>
    
    <aside>
        <h3>Related Links</h3>
        <!-- Sidebar content -->
    </aside>
</main>
 
<footer>
    <p>&copy; 2025 Your Website</p>
</footer>

Generic Containers

<!-- Block-level container -->
<div class="container">
    <p>Content inside a div</p>
</div>
 
<!-- Inline container -->
<p>This is <span class="highlight">highlighted text</span> in a paragraph.</p>

Tables

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>25</td>
            <td>New York</td>
        </tr>
        <tr>
            <td>Jane</td>
            <td>30</td>
            <td>London</td>
        </tr>
    </tbody>
</table>

Forms

<form action="/submit" method="post">
    <!-- Text Input -->
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    
    <!-- Email Input -->
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <!-- Password Input -->
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
    
    <!-- Textarea -->
    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="4" cols="50"></textarea>
    
    <!-- Select Dropdown -->
    <label for="country">Country:</label>
    <select id="country" name="country">
        <option value="us">United States</option>
        <option value="uk">United Kingdom</option>
        <option value="ca">Canada</option>
    </select>
    
    <!-- Radio Buttons -->
    <fieldset>
        <legend>Gender:</legend>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">Male</label>
        
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">Female</label>
    </fieldset>
    
    <!-- Checkboxes -->
    <input type="checkbox" id="newsletter" name="newsletter" value="yes">
    <label for="newsletter">Subscribe to newsletter</label>
    
    <!-- Submit Button -->
    <input type="submit" value="Submit">
    <button type="submit">Submit Button</button>
</form>

Important Attributes

Global Attributes (work on any element)

AttributePurposeExample
idUnique identifier<div id="header">
classCSS class name(s)<p class="intro highlight">
styleInline CSS<p style="color: red;">
titleTooltip text<img title="Hover text">
data-*Custom data attributes<div data-user-id="123">

Common Element-Specific Attributes

<!-- Links -->
<a href="url" target="_blank" rel="noopener">Link</a>
 
<!-- Images -->
<img src="image.jpg" alt="Description" width="300" height="200">
 
<!-- Form inputs -->
<input type="text" name="username" placeholder="Enter username" required>
 
<!-- Tables -->
<td colspan="2" rowspan="3">Cell content</td>

Meta Tags (in <head>)

<head>
    <!-- Character encoding -->
    <meta charset="UTF-8">
    
    <!-- Responsive design -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- SEO meta tags -->
    <meta name="description" content="Page description for search engines">
    <meta name="keywords" content="html, web, development">
    <meta name="author" content="Your Name">
    
    <!-- Social media meta tags -->
    <meta property="og:title" content="Page Title">
    <meta property="og:description" content="Page description">
    <meta property="og:image" content="image-url.jpg">
    
    <!-- Page title -->
    <title>Your Page Title</title>
    
    <!-- Link to CSS -->
    <link rel="stylesheet" href="styles.css">
    
    <!-- Link to JavaScript -->
    <script src="script.js"></script>
</head>

Quick Reference Cheat Sheet

Most Common Tags

<!-- Document Structure -->
<!DOCTYPE html>, <html>, <head>, <body>
 
<!-- Headings -->
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
 
<!-- Text -->
<p>, <span>, <strong>, <em>, <br>, <hr>
 
<!-- Links & Media -->
<a>, <img>, <video>, <audio>
 
<!-- Lists -->
<ul>, <ol>, <li>, <dl>, <dt>, <dd>
 
<!-- Containers -->
<div>, <section>, <article>, <header>, <footer>, <nav>, <aside>, <main>
 
<!-- Tables -->
<table>, <thead>, <tbody>, <tr>, <th>, <td>
 
<!-- Forms -->
<form>, <input>, <textarea>, <select>, <option>, <button>, <label>

Input Types

<input type="text">        <!-- Text input -->
<input type="email">       <!-- Email input -->
<input type="password">    <!-- Password input -->
<input type="number">      <!-- Number input -->
<input type="date">        <!-- Date picker -->
<input type="checkbox">    <!-- Checkbox -->
<input type="radio">       <!-- Radio button -->
<input type="file">        <!-- File upload -->
<input type="submit">      <!-- Submit button -->
<input type="hidden">      <!-- Hidden field -->

Best Practices

🎯 Semantic HTML

  • Use semantic elements (<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>)
  • Choose elements based on meaning, not appearance
  • Use headings (<h1> to <h6>) to create proper document outline

♿ Accessibility

  • Always include alt attributes for images
  • Use proper heading hierarchy
  • Associate labels with form inputs using for and id
  • Provide sufficient color contrast
  • Use semantic HTML elements

🔧 Code Quality

  • Indent nested elements consistently
  • Use lowercase for element names and attributes
  • Quote attribute values
  • Close all tags properly
  • Validate your HTML

📱 Modern Web Standards

  • Always include <!DOCTYPE html>
  • Use UTF-8 character encoding
  • Include viewport meta tag for responsive design
  • Use semantic HTML5 elements
  • Separate content (HTML) from presentation (CSS)

Common Mistakes to Avoid

❌ Don’t:

  • Use <br> for spacing (use CSS instead)
  • Use <table> for layout (use CSS Grid/Flexbox)
  • Forget closing tags
  • Use deprecated elements like <font> or <center>
  • Skip alt attributes on images
  • Use divs for everything (use semantic elements)

✅ Do:

  • Validate your HTML
  • Use semantic elements appropriately
  • Write accessible code
  • Keep HTML structure separate from styling
  • Use proper heading hierarchy
  • Test across different devices and browsers

Last Updated: 2025-07-22

Graph View

Backlinks