Complete HTML Course

Master HTML

A Comprehensive Guide - From Basics to Advanced 🚀

Introduction to HTML

What is HTML?

HTML stands for HyperText Markup Language. It is the standard markup language for creating web pages and web applications.

HTML describes the structure of a web page
HTML consists of a series of elements
HTML elements tell the browser how to display content
HTML elements label pieces of content such as 'heading', 'paragraph', 'link', etc.

 History of HTML
                                    1991 HTML 1.0 - Tim Berners-Lee

                                    1995 HTML 2.0 - First standard

                                    1997 HTML 3.2 - W3C Recommendation
                                
                                    1999 HTML 4.01 - Widely used

                                    2014 HTML5 - Current major version

HTML Basics

HTML Document Structure

Every HTML document follows a basic structure:

                            <!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>
                        

Explanation of Structure:

<!DOCTYPE html> - Declares HTML5 document
<html> - Root element of HTML page
<head> - Contains meta information
<title> - Specifies page title
<body> - Contains visible content
<h1> - Defines a large heading
<p> - Defines a paragraph

HTML Elements

What is an HTML Element?

An HTML element is defined by a start tag, content, and an end tag:

<tagname>Content goes here...</tagname>

Block-level

Start on new line, full width

Inline

Same line, necessary width

Empty

Self-closing elements

HTML Attributes

What are HTML Attributes?

HTML attributes provide additional information about elements. Always specified in the start tag as name="value" pairs.

Common Attributes:

                            <!-- id Attribute -->
<div id="header">Header Content</div>

<!-- class Attribute -->
<p class="intro highlight">Important text</p>

<!-- style Attribute -->
<p style="color:red;">Styled text</p>

<!-- href Attribute -->
<a href="https://example.com">Link</a>

<!-- src and alt Attributes -->
<img src="image.jpg" alt="Description">
                        

id - Unique identifier
class - CSS class names
style - Inline CSS
title - Tooltip text

href - Link destination
src - Source file path
alt - Alternative text
data-* - Custom attributes

HTML Headings

Heading Tags (h1 to h6)

HTML headings are defined with <h1> to <h6> tags. <h1> is most important, <h6> is least important.

                            <h1>Heading 1</h1>  <!-- Largest -->
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>  <!-- Smallest -->
                        

                             Important Tips
                            Search engines use headings to index content structure
Users skim pages by reading headings
Use <h1> for main headings, then <h2>, <h3>, etc.
Don't skip heading levels
Use headings for structure, not styling

                        

HTML Paragraphs

The <p> Element

The HTML <p> element defines a paragraph. Paragraphs start on a new line with automatic spacing.

                            <p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<!-- Line Break -->
<p>Line 1<br>Line 2</p>

<!-- Horizontal Rule -->
<p>Paragraph 1</p>
<hr>
<p>Paragraph 2</p>

<!-- Preformatted Text -->
<pre>
  Text with
    preserved
      spacing
</pre>
                        

HTML Text Formatting

Formatting Elements

HTML provides various elements for text formatting:

                                    <b>Bold text</b>
<strong>Important</strong>
<i>Italic text</i>
<em>Emphasized</em>
<mark>Highlighted</mark>
<small>Smaller</small>
                                

                                    <del>Deleted</del>
<ins>Inserted</ins>
<sub>Subscript</sub>
<sup>Superscript</sup>
<code>Code</code>
<kbd>Keyboard</kbd>
                                

Bold Italic Highlighted Small ~~Deleted~~ Code

HTML Links

The <a> Tag

HTML links are hyperlinks that allow navigation between pages.

<!-- External Link -->
<a href="https://www.google.com">Visit Google</a>

<!-- Open in New Tab -->
<a href="url" target="_blank">New Tab</a>

<!-- Email Link -->
<a href="mailto:[email protected]">Email</a>

<!-- Phone Link -->
<a href="tel:+1234567890">Call Us</a>

<!-- Anchor Link -->
<a href="#section1">Go to Section</a>

<!-- Download Link -->
<a href="file.pdf" download>Download</a>

 Link Attributes
                                    href - Destination URL
target - Where to open
title - Tooltip text

                                    download - Download file
rel - Relationship
type - MIME type

HTML Images

The <img> Tag

The <img> tag embeds images in web pages.

                            <!-- Basic Image -->
<img src="image.jpg" alt="Description">

<!-- With Dimensions -->
<img src="photo.jpg" width="500" height="300" alt="Photo">

<!-- Lazy Loading -->
<img src="image.jpg" loading="lazy" alt="Image">

<!-- Responsive Image -->
<img src="image.jpg" style="max-width:100%;height:auto;" alt="Responsive">
                        

Image Formats:

JPEG - Photos, complex images
PNG - Transparent images, logos
GIF - Animated images
SVG - Scalable vector graphics
WebP - Modern, better compression

Important Attributes:

src - Image source (required)
alt - Alternative text (required)
width/height - Dimensions
loading - Lazy loading
title - Tooltip text

HTML Lists

Types of Lists

Unordered List
                                        <ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
                                    

Ordered List
                                        <ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>
                                    

Description List
                                        <dl>
  <dt>Coffee</dt>
  <dd>Hot drink</dd>
</dl>
                                    

Nested Lists:

                            <ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
</ul>
                        

HTML Tables

Basic Table Structure

                            <table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>NYC</td>
    </tr>
  </tbody>
</table>
                        

Table Elements:

<table> - Table container
<tr> - Table row
<th> - Header cell
<td> - Data cell
<thead> - Header group
<tbody> - Body group
<tfoot> - Footer group

Table Attributes:

                                    <!-- Colspan -->
<td colspan="2">Spans 2 columns</td>

<!-- Rowspan -->
<td rowspan="2">Spans 2 rows</td>

<!-- Caption -->
<table>
  <caption>Table Title</caption>
</table>
                                

HTML Forms

The <form> Element

HTML forms collect user input and send it to a server.

                            <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">
  
  <!-- Radio Buttons -->
  <input type="radio" name="gender" value="male"> Male
  <input type="radio" name="gender" value="female"> Female
  
  <!-- Checkbox -->
  <input type="checkbox" name="subscribe" value="yes"> Subscribe
  
  <!-- Select Dropdown -->
  <select name="country">
    <option value="usa">USA</option>
    <option value="uk">UK</option>
  </select>
  
  <!-- Textarea -->
  <textarea name="message" rows="4"></textarea>
  
  <!-- Submit Button -->
  <button type="submit">Submit</button>
</form>
                        

 Form Attributes
                                    action - Where to send data
method - GET or POST
enctype - Encoding type

                                    target - Response location
autocomplete - On/Off
novalidate - Skip validation

HTML Input Types

HTML5 Input Types

                                    <input type="text">
<input type="password">
<input type="email">
<input type="url">
<input type="tel">
<input type="number">
<input type="range">
<input type="date">
<input type="time">
                                

                                    <input type="datetime-local">
<input type="month">
<input type="week">
<input type="color">
<input type="file">
<input type="search">
<input type="hidden">
<input type="checkbox">
<input type="radio">
                                

Input Attributes:

required placeholder readonly disabled maxlength

min/max pattern autofocus autocomplete multiple

HTML Semantic Elements

What are Semantic Elements?

Semantic elements clearly describe their meaning to both browser and developer.

                            <header>
  <h1>Website Title</h1>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
  </nav>
</header>

<main>
  <section>
    <article>
      <h2>Article Title</h2>
      <p>Content...</p>
    </article>
  </section>
  
  <aside>
    <h3>Sidebar</h3>
  </aside>
</main>

<footer>
  <p>© 2024 Copyright</p>
</footer>
                        

Common Semantic Elements:

More Elements:

HTML Layout

Layout Techniques

Flexbox Layout

Modern one-dimensional layout

                                        display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
                                    

Grid Layout

Modern two-dimensional layout

                                        display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
                                    

Common Layout Patterns:

Single Column Layout - Mobile-first approach
Two Column Layout - Sidebar + Content
Three Column Layout - Sidebar, Content, Ads
Holy Grail Layout - Header, Nav, Main, Aside, Footer
Card Layout - Grid of cards
Hero Section - Large banner with CTA

HTML Responsive Design

Viewport Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Responsive Images:

                            <!-- Using max-width -->
<img src="image.jpg" style="max-width:100%;height:auto;">

<!-- Using srcset -->
<img src="small.jpg" 
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w"
     sizes="(max-width: 600px) 500px, 1000px">

<!-- Using picture element -->
<picture>
  <source media="(min-width: 650px)" srcset="large.jpg">
  <source media="(min-width: 465px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Image">
</picture>
                        

Media Queries (CSS):

                            /* Mobile First Approach */
@media (min-width: 768px) {
  /* Tablet styles */
}

@media (min-width: 1024px) {
  /* Desktop styles */
}
                        

HTML Multimedia

HTML Video & Audio

HTML5 Video:

                                    <video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Your browser doesn't support video.
</video>
                                

Attributes: controls, autoplay, loop, muted, poster

HTML5 Audio:

                                    <audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser doesn't support audio.
</audio>
                                

Attributes: controls, autoplay, loop, muted

Canvas & SVG:

                                    <!-- Canvas -->
<canvas id="myCanvas" width="200" height="100"></canvas>
                                

                                    <!-- SVG -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>
                                

HTML5 APIs

Modern Browser APIs

 Geolocation API
                                        navigator.geolocation
  .getCurrentPosition(success);
                                    

 Web Storage API
                                        localStorage.setItem('key', 'value');
sessionStorage.setItem('key', 'value');
                                    

 Drag & Drop API
                                        <div draggable="true" 
     ondragstart="drag(event)">
  Drag me
</div>
                                    

 History API
                                        history.pushState(state, title, url);
history.back();
                                    

Other HTML5 APIs:

Web Workers Server-Sent Events WebSocket Fullscreen API Notification API Vibration API

HTML Best Practices

                                     Document Structure
                                    Always declare DOCTYPE
Use lowercase for tags
Close all elements
Quote attribute values
Proper indentation

                                

                                     Accessibility
                                    Use semantic HTML
Alt text for images
Proper heading hierarchy
Label form inputs
Keyboard accessible
ARIA attributes

                                

                                     Performance
                                    Minimize HTTP requests
Optimize images
Lazy loading
Minify HTML/CSS/JS
External files for CSS/JS
Use CDN

                                

                                     SEO
                                    Descriptive title tags
Meta descriptions
Proper heading usage
Semantic HTML
Structured data
XML sitemap

                                

HTML5 New Features

What's New in HTML5?

                                    New Semantic Elements
                                    <header>
                                    <nav>
                                    <main>
                                    <section>
                                    <article>
                                    <aside>
                                    <footer>
                                    <figure>
                                    <details>
                                

                                    New Form Elements
                                    <datalist>
                                    <output>
                                    email
                                    url
                                    tel
                                    number
                                    range
                                    date
                                    color
                                

                                    New Multimedia
                                    <audio>
                                    <video>
                                    <canvas>
                                    <svg>
                                

                                    New APIs
                                    Geolocation
                                    Drag & Drop
                                    Web Storage
                                    Web Workers
                                    WebSocket
                                    History API
                                

Removed Elements

~~<center>~~ ~~<font>~~ ~~<strike>~~ ~~<big>~~ ~~<frame>~~

Use CSS for styling instead!

Congratulations! 🎉

You've completed the comprehensive HTML course!

You now have a solid foundation in HTML, from basic structure to advanced HTML5 features.

 Next Steps
                                        Practice building real websites
Learn CSS for styling
Learn JavaScript for interactivity

                                        Explore frameworks (React, Vue, Angular)
Build projects and portfolio
Keep learning and stay updated