HTML & CSSBeginner

Learn HTML

Master the fundamentals of HTML - structure, semantics, forms, and accessibility.

4 hours
10 key concepts
4 in-depth sections
Official Docs

0 of 10 concepts completed (0%)

What You'll Learn

Tutorial Contents

  1. 1.Document Structure & Doctype
  2. 2.Semantic HTML5 Elements
  3. 3.Forms & Accessible Inputs
  4. 4.Meta Tags & SEO Markup

1.Document Structure & Doctype

Every HTML page begins with a DOCTYPE declaration and a standard structure. Without these, browsers enter quirks mode which triggers legacy rendering behavior.

html
<!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 search engines (155-160 chars)" />
  <title>Page Title | Brand Name</title>
  <link rel="stylesheet" href="styles.css" />
  <link rel="icon" href="/favicon.ico" />
</head>
<body>
  <!-- Visible content goes here -->
  <script src="app.js" defer></script>
</body>
</html>
    Key rules:
  • lang="en" tells assistive tech and search engines the page language
  • charset="UTF-8" prevents encoding issues with special characters
  • viewport meta tag is required for responsive design to work
  • defer on scripts prevents render-blocking

2.Semantic HTML5 Elements

Semantic elements describe what they contain, not just how they look. This improves SEO rankings, screen reader navigation, and developer understanding.

html
<header>
  <nav aria-label="Main navigation">
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>

Article Title

First Section

Content here...

```

    Semantic elements reference:
  • introductory content for its nearest section ancestor
  • main unique content (only ONE per page)
  • self-contained content that makes sense on its own
  • thematic grouping with a heading
  • footer for its nearest section ancestor

3.Forms & Accessible Inputs

HTML forms are the primary way users interact with web applications. Proper markup is required for accessibility and browser validation.

html
<form action="/submit" method="POST">
  <div class="form-group">
    <label for="email">Email address <span aria-hidden="true">*</span></label>
    <input
      type="email" id="email" name="email"
      required placeholder="you@example.com"
      autocomplete="email"
      aria-describedby="email-hint"
    />
    <small id="email-hint">We'll never share your email.</small>

Preferred contact method

```

4.Meta Tags & SEO Markup

Meta tags control how your page appears in search results and when shared on social media.

html
<head>
  <title>How to Bake Sourdough | The Bread Lab</title>
  <meta name="description" content="Master sourdough in 7 steps." />

```

Code Example

<!-- Semantic HTML structure -->
<header>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>

<main>
  <article>
    <h1>Page Title</h1>
    <p>Content goes here...</p>
  </article>
</main>

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

Pro Tips

  • 1Always use semantic HTML5 elements (header, nav, main, footer) they improve SEO, accessibility, and code readability simultaneously.
  • 2Validate your HTML at validator.w3.org before shipping. Invalid HTML causes inconsistent browser rendering.
  • 3The alt attribute on images isn't optional screen readers depend on it, and Google uses it for image search ranking.
  • 4Use <label for='id'> instead of wrapping labels it's more flexible and works better with assistive technology.

Topics Covered

HTMLSemanticsAccessibility

Continue Learning

Explore the official documentation and deepen your knowledge with real-world practice.

All Tutorials
Next
Learn CSS

Explore the Full Portfolio

This is the complete portfolio of Sufi Khan Sulaiman, a technology leader specialising in B2B commerce and digital automation. Start from the Home page for the overview, then move through two decades of career experience across FLIR Systems, Lorex Technology, and 1c Platform, and the full catalogue of project case studies spanning headless commerce migrations, AI recommendation engines, and multi-channel fulfilment systems.

The skills and certifications page maps the technical and leadership capabilities behind the work, while the articles and the knowledge base break down the thinking into actionable frameworks. For hands-on learning, the tutorials and applications sections cover practical builds from front-end fundamentals to full-stack web apps.

For consulting engagement, the expertise page outlines service offerings, the ecommerce hub covers platform architecture and automation strategy, and the ecommerce guide (PDF) is a downloadable 55-page field manual. When you are ready to talk, the contact page is the direct line.

HomeExperienceProjectsSkills & CertificationsArticlesKnowledge BaseApplicationsExpertiseEcommerceEcommerce Guide (PDF)AboutContact