HTML Cheatsheet - VCA Hashtag Cyberstar

Document 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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Content goes here -->
    <script src="script.js"></script>
</body>
</html>

Headings

<h1>Main Title (only one per page)</h1>
<h2>Section Heading</h2>
<h3>Subsection</h3>
<h4>Smaller heading</h4>
<h5>Even smaller</h5>
<h6>Smallest</h6>

Text Content

<p>Paragraph of text</p>

<strong>Important (bold)</strong>
<em>Emphasis (italic)</em>

<br>  <!-- Line break -->

<blockquote>
    A quoted passage
</blockquote>

<code>Inline code</code>

Links

<!-- External link -->
<a href="https://example.com">Link text</a>

<!-- Internal link -->
<a href="about.html">About page</a>

<!-- Same page anchor -->
<a href="#section-id">Jump to section</a>

<!-- Email link -->
<a href="mailto:email@example.com">Email me</a>

<!-- Open in new tab -->
<a href="https://example.com" target="_blank" rel="noopener">External link</a>

Images

<img src="photo.jpg" alt="Description of image">

<!-- With specific size -->
<img src="photo.jpg" alt="Description" width="800" height="600">

<!-- Lazy loading -->
<img src="photo.jpg" alt="Description" loading="lazy">

Lists

<!-- Unordered list (bullets) -->
<ul>
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
</ul>

<!-- Ordered list (numbers) -->
<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Semantic Structure

<header>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
    </nav>
</header>

<main>
    <article>
        <h2>Article Title</h2>
        <p>Article content...</p>
    </article>
    
    <section>
        <h2>Section Title</h2>
        <p>Section content...</p>
    </section>
</main>

<aside>
    <!-- Sidebar content -->
</aside>

<footer>
    <p>&copy; 2025 Your Name</p>
</footer>

Generic Containers

<!-- Block-level container -->
<div class="container">
    <!-- Content -->
</div>

<!-- Inline container -->
<span class="highlight">Highlighted text</span>

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>
    
    <!-- Textarea -->
    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="5"></textarea>
    
    <!-- Submit button -->
    <button type="submit">Submit</button>
</form>

Tables

<table>
    <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>

Media

<!-- Audio -->
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
</audio>

<!-- Video -->
<video controls width="640" height="360">
    <source src="video.mp4" type="video/mp4">
</video>

<!-- YouTube embed -->
<iframe src="https://www.youtube.com/embed/VIDEO_ID" 
        width="560" height="315" 
        frameborder="0" allowfullscreen>
</iframe>

Special Characters

&lt;    <!-- < -->
&gt;    <!-- > -->
&amp;   <!-- & -->
&quot;  <!-- " -->
&copy;  <!-- © -->
&nbsp;  <!-- Non-breaking space -->

Common Attributes

<!-- ID (unique on page) -->
<div id="unique-id"></div>

<!-- Class (reusable) -->
<div class="class-name"></div>
<div class="class-one class-two"></div>

<!-- Data attributes (custom data) -->
<div data-id="123" data-category="example"></div>

Accessibility

<!-- Alt text for images (required!) -->
<img src="photo.jpg" alt="Description">

<!-- ARIA label -->
<button aria-label="Close menu">×</button>

<!-- Hidden from screen readers -->
<span aria-hidden="true">🎨</span>

Common Mistakes

Bad

<p>Text (no closing tag)

<p><strong>Text</p></strong>
(wrong nesting)

<img src=photo.jpg>
(missing quotes)

Good

<p>Text</p>

<p><strong>Text</strong></p>

<img src="photo.jpg">

Best Practices

Use semantic HTML (<nav>, <article>, <section>)
Always include alt text on images
One <h1> per page
Use heading hierarchy (don't skip levels)
Include lang attribute on <html>
Use <button> for buttons, not <div onclick>

Quick Template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Page description for SEO">
    <title>Page Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <a href="/">Home</a>
            <a href="/about">About</a>
        </nav>
    </header>
    
    <main>
        <h1>Page Title</h1>
        <p>Content goes here...</p>
    </main>
    
    <footer>
        <p>&copy; 2025 Your Name</p>
    </footer>
    
    <script src="script.js"></script>
</body>
</html>

Remember: HTML is for structure and meaning, not appearance. Use CSS for styling!