HTML5

What is HTML?

HTML (HyperText Markup Language) is the skeleton of every web page. It defines the structure and meaning of content.

HTML

Structure (Skeleton)

CSS

Presentation (Skin/Clothes)

JavaScript

Behavior (Muscles/Brain)

Key Principle

HTML describes what something is, not how it looks. Use CSS for styling, JavaScript for behavior.

Basic Document Structure

<!-- Every HTML5 document needs these elements -->
<!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">
    <title>Document Title</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Visible content goes here -->
    <h1>Hello World</h1>
    <p>This is a paragraph.</p>
    
    <script src="script.js"></script>
</body>
</html>
                    

Element	Purpose	Required?
`<!DOCTYPE html>`	Tells browser this is HTML5	Yes
`<html lang="en">`	Root element + language	Yes
`<head>`	Metadata, links, title	Yes
`<meta charset>`	Character encoding	Yes
`<meta viewport>`	Mobile responsiveness	Yes
`<title>`	Browser tab text	Yes
`<body>`	Visible page content	Yes

Semantic HTML5 Elements

Semantic HTML gives meaning to your markup, not just presentation.

Why Semantic Matters

Accessibility
(Screen readers)

SEO
(Search engines)

Maintainability
(Readable code)

Consistency
(Default styling)

Document Structure

<header>
Logo, navigation

<nav>
Links

<main>

<article>
Blog post

<section>
Chapter

<aside>
Sidebar

Semantic Elements Reference

Element	Use For	Don't Use For
`<header>`	Introductory content, nav	Just any top section
`<nav>`	Primary navigation links	All lists of links
`<main>`	Dominant content (1 per page)	Sidebar, footer content
`<article>`	Self-contained content (blog post, card)	Layout containers
`<section>`	Thematic grouping with heading	Generic styling wrapper
`<aside>`	Tangentially related content	Just side placement
`<footer>`	Footer for section or page	Bottom of any div
`<figure>`	Image with caption	Every image

Div Soup (Bad)

<div class="header">
  <div class="nav">
    <div class="article">
      <div class="section">...</div>
    </div>
  </div>
</div>
                            

Semantic HTML (Good)

<header>
  <nav>...</nav>
</header>
<main>
  <article>
    <section>...</section>
  </article>
</main>
                            

Forms & User Input

HTML5 provides powerful built-in form validation and new input types.

<form action="/submit" method="POST" novalidate>
  <!-- Text input with validation -->
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" 
         required minlength="3" maxlength="20">
  
  <!-- Email validation -->
  <input type="email" required placeholder="[email protected]">
  
  <!-- Password with pattern -->
  <input type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
         title="8+ chars, 1 number, 1 uppercase">
  
  <button type="submit">Submit</button>
</form>
                    

HTML5 Input Types

text

Single-line text

minlength, maxlength, pattern

Email validation

Built-in format check

password

Hidden input

pattern for complexity

tel

Phone number

pattern for format

number

Numeric values

min, max, step

date

Date picker

min, max attributes

range

Slider control

min, max, step

color

Color picker

Returns hex value

Search field

Clear button included

file

File upload

accept, multiple, capture

url

Web address

Validates URL format

checkbox

Multiple selections

checked, required

Form Elements

<select> Dropdown

<option value=""> with optgroup

<textarea> Multi-line text

rows, cols, maxlength attributes

<fieldset> + <legend>

Group related controls (radio buttons)

<input type="hidden">

Store data invisible to users (CSRF tokens)

Images & Media

Responsive Images

<!-- Basic image with accessibility -->
<img src="photo.jpg" 
     alt="Descriptive text for screen readers" 
     width="800" height="600" 
     loading="lazy">

<!-- Responsive images with multiple sources -->
<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Responsive image">
</picture>

<!-- Figure with caption -->
<figure>
  <img src="chart.png" alt="Sales chart 2024">
  <figcaption>Fig.1 - Annual sales increased by 25%</figcaption>
</figure>
                    

                        Critical Image Rules
                        Always include alt text (empty for decorative: alt="")
Specify width and height to prevent layout shift (CLS)
Use loading="lazy" for below-fold images

                    

Video & Audio

<!-- Video with fallback -->
<video controls width="640" height="360" 
       poster="thumbnail.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <p>Your browser doesn't support video. 
     <a href="video.mp4">Download instead</a>.</p>
</video>

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

Metadata & SEO Essentials

<head>
  <!-- Essential meta tags -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- SEO meta tags -->
  <meta name="description" content="Learn web development...">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Your Name">
  <meta name="robots" content="index, follow">
  
  <!-- Open Graph (Facebook, LinkedIn) -->
  <meta property="og:title" content="Page Title">
  <meta property="og:description" content="Description">
  <meta property="og:image" content="https://site.com/image.jpg">
  
  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Page Title">
  
  <!-- Canonical URL -->
  <link rel="canonical" href="https://site.com/page">
  
  <!-- Favicon -->
  <link rel="icon" href="/favicon.ico">
  
  <!-- Performance optimizations -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preload" href="critical.css" as="style">
  
  <title>Descriptive Title | Site Name</title>
</head>
                    

Accessibility (A11y) Best Practices

<!-- ARIA labels when visible text isn't sufficient -->
<button aria-label="Close menu" onclick="toggleMenu()">
  <i class="fas fa-times"></i>
</button>

<!-- Skip links for keyboard navigation -->
<a href="#main" class="skip-link">Skip to main content</a>
<main id="main">...</main>

<!-- Live regions for dynamic content -->
<div aria-live="polite" aria-atomic="true">
  <p>Form submitted successfully!</p>
</div>
                    

Accessibility Checklist

All images have descriptive alt text

Form inputs have associated <label> elements

Color contrast meets WCAG 4.5:1 ratio

Keyboard navigation works (Tab, Enter, Space)

Focus indicators are visible

Heading hierarchy is logical (no skips)

Language declared on <html> element