igenhub

Master HTML

Your complete guide to HTML from basics to advanced concepts. Learn the foundation of web development.

Start Learning

Why Learn HTML?

HTML is the backbone of every website on the internet

Foundation of Web

HTML (HyperText Markup Language) is the standard markup language used to create and structure pages on the web. It tells a web browser what content exists and gives that content a hierarchical structure the browser can display and other tools

Universal Standard

Supported by all browsers and devices, making it essential for web development.

Easy to Learn

HTML has a simple syntax that beginners can quickly grasp and start using.

HTML Basics

Understanding the fundamentals of HTML

What is HTML?

HTML (HyperText Markup Language) is the standard markup language for creating web pages.

Did You Know?

HTML was created by Tim Berners-Lee in 1991 and has evolved through multiple versions, with HTML5 as the current standard.

HTML Elements

Elements are the building blocks of HTML, consisting of tags, attributes, and content. And HTML element = opening tag + content + closing tag.

                        
                            <tagname attribute="value">Content</tagname>

Headings (<h1>–<h6>)

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

                        
<h1>This is H1</h1>
<h2>This is H2</h2>
<h3>This is H3</h3>
<h4>This is H4</h4>
<h5>This is H5</h5>
<h6>This is H6</h6>
                        
                    

Output:

This is H1

This is H2

This is H3

This is H4

This is H5

This is H6

Paragraph (<p>)

The <p> tag defines a paragraph of text. Browsers automatically add some margin before and after each paragraph.


<p>This is a paragraph of text in HTML.</p>

Output:

This is a paragraph of text in HTML.

Line Break & Horizontal Rule (<br>, <hr>)

The <br> tag inserts a single line break, while <hr> defines a thematic break or horizontal rule.

                        
Hello<br>World
<hr>
This is after a horizontal line

Output:

Hello
World

This is after a horizontal line

Text Formatting

HTML provides various tags for formatting text, including bold, italic, strong, emphasis, subscript, and superscript.

                        
<p><b>Bold</b> and <i>Italic</i></p>
<p><strong>Strong</strong> and <em>Emphasis</em></p>
<p>Water is H<sub>2</sub>O and 2<sup>3</sup>=8</p>

Output:

Bold and Italic

Strong and Emphasis

Water is H₂O and 2³=8

Links (<a>)

The <a> tag defines a hyperlink, which is used to link from one page to another. The href attribute specifies the link's destination.


<a href="https://www.google.com" target="_blank">Go to Google</a>

Output:

👉 Go to Google

(clickable, opens in new tab)

Image (<img>)

The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image, and the alt attribute provides alternative text.


<img src="https://via.placeholder.com/150" alt="Sample Image">

Output:

🖼️ (Shows a 150x150 placeholder image)

Lists (<ul>, <ol>)

HTML lists allow web developers to group a set of related items. <ul> defines an unordered list, <ol> defines an ordered list.

                        
<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

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

Output:

Apple
Banana
Orange

First
Second
Third

Table

HTML tables allow web developers to arrange data into rows and columns. A table is defined with the <table> tag.

                        
<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Abi</td>
    <td>22</td>
  </tr>
  <tr>
    <td>Kumar</td>
    <td>25</td>
  </tr>
</table>
                        
                    

Output:

Name	Age
Abi	22
Kumar	25

Form

HTML forms are used to collect user input. The <form> element defines a form that contains interactive controls.

                        
<form>
  <label for="name">Name:</label>
  <input type="text" id="name"><br><br>

  <label for="email">Email:</label>
  <input type="email" id="email"><br><br>

  <button type="submit">Submit</button>
</form>

Output:

A simple form with:

Name:

Email:

Media (<video> & <audio>)

HTML provides elements for embedding media content, such as video and audio, directly into web pages.

                        
<video width="300" controls>
  <source src="sample.mp4" type="video/mp4">
  Your browser does not support video.
</video>

<audio controls>
  <source src="sample.mp3" type="audio/mp3">
  Your browser does not support audio.
</audio>
                        
                    

Output:

🎥 A video player (play/pause/volume controls)

🎵 An audio player (play/pause/volume controls)

HTML Document Structure

Understanding the components of an HTML document

Basic HTML5 Template

The foundation of every HTML document with essential elements and structure.

                            
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

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

  <title>Document Title</title>

</head>

<body>

  <!-- Content goes here -->

</body>

</html>

Explanation:

<!DOCTYPE html>: Declares the document type and HTML version (HTML5)
<html>: The root element of an HTML page
<head>: Contains meta information about the document
<body>: Contains the visible page content

Head Section

The head contains meta information about the document, not displayed on the page.

                            
<head>

  <meta charset="UTF-8">

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

  <meta name="description" content="Free Web tutorials">

  <meta name="keywords" content="HTML, CSS, JavaScript">

  <meta name="author" content="John Doe">

  <title>Document Title</title>

  <link rel="stylesheet" href="styles.css">

  <style>

    /* CSS styles */

  </style>

</head>

Key Elements:

Meta tags: Provide metadata about the document
Title: Sets the title shown in browser tab
Link: Connects external resources like CSS
Style: Contains internal CSS styles

Body Section

The body contains the visible content of the web page.

                            
<body>

  <header>

    <h1>Website Title</h1>

    <nav>

      <a href="#">Home</a>

      <a href="#">About</a>

    </nav>

  </header>

  <main>

    <article>

      <h2>Article Title</h2>

      <p>Article content...</p>

    </article>

  </main>

  <footer>

    <p>© 2023 My Website</p>

  </footer>

</body>

Visual Output:

Website Title

Article Title

Article content...

Semantic Elements

HTML5 introduced semantic elements that clearly define different parts of a web page.

                            
<header> <!-- Top section -->

<nav> <!-- Navigation -->

<main> <!-- Main content -->

<section> <!-- Section of content -->

<article> <!-- Self-contained content -->

<aside> <!-- Side content -->

<footer> <!-- Bottom section -->

Layout Example:

Header

Main Content

Benefits:

Improved accessibility for screen readers
Better SEO (Search Engine Optimization)
Cleaner, more readable code
Easier to style and maintain

HTML Comments & Special Characters

Comments help document code, and special characters display reserved symbols.

                            
<!-- This is a comment -->

<!-- 

  Multi-line comments

  can span several lines

-->

<p>Copyright &copy; 2023</p>

<p>Price: &euro;10.99</p>

<p>5 &gt; 3 &amp; 3 &lt; 5</p>

Output:

Price: €10.99

5 > 3 & 3 < 5

Common Character Entities:

< = < (less than)
> = > (greater than)
& = & (ampersand)
© = © (copyright)
  = non-breaking space

Document Object Model (DOM)

The DOM represents the document as a tree structure of objects.

                            
<html>

  <head>

    <title>My Page</title>

  </head>

  <body>

    <h1>Heading</h1>

    <p>Paragraph</p>

  </body>

</html>

DOM Tree Structure:

                                    html

                                    ├── head

                                    │   └── title ("My Page")

                                    └── body

                                        ├── h1 ("Heading")

                                        └── p ("Paragraph")

DOM Importance:

JavaScript can manipulate the DOM
Allows dynamic content updates
Enables event handling
Foundation for modern web applications

Advanced HTML Concepts

Modern HTML features and APIs

Multimedia

Embed audio, video, and graphics directly into your web pages.

                            
<!-- Audio -->

<audio controls>

  <source src="audio.mp3" type="audio/mp3">

</audio>

<!-- Video -->

<video width="320" height="240" controls>

  <source src="movie.mp4" type="video/mp4">

</video>

Output:

Audio Player: 🎵 Shows play/pause controls for audio files

Video Player: 🎥 Shows video with play/pause/volume controls

HTML5 APIs

Leverage powerful browser APIs for enhanced functionality.

                            
<!-- Geolocation API -->

<button onclick="getLocation()">Get Location</button>

<p id="demo"></p>

<script>

function getLocation() {

  if(navigator.geolocation){

    navigator.geolocation.getCurrentPosition(function(position){

      document.getElementById("demo").innerText =

        "Latitude: " + position.coords.latitude +

        ", Longitude: " + position.coords.longitude;

    });

  } else {

    document.getElementById("demo").innerText = "Geolocation not supported";

  }

}

</script>

Demo:

Click the button to see your location

Local Storage Example:

                                
<button onclick="saveData()">Save Name</button>

<input type="text" id="username">

<p id="showName"></p>

<script>

function saveData(){

  let name = document.getElementById('username').value;

  localStorage.setItem('name', name);

  document.getElementById('showName').innerText = "Saved Name: " + name;

}

</script>

Advanced Features

Modern HTML features that enhance user experience and performance.

                            
<!-- Lazy loading images -->

<img src="image.jpg" loading="lazy" alt="...">

<!-- Contenteditable attribute -->

<div contenteditable="true">

  Editable content

</div>

<!-- Details & Summary -->

<details>

  <summary>Click to expand</summary>

  Hidden content revealed

</details>

Demo:

Contenteditable:

Click here to edit this text!

Details & Summary:

Click to expand

Hidden content revealed! This is a native HTML accordion without JavaScript.

HTML Entities

Special characters can be added using entities for reserved symbols.

                            
<p>Less than: &lt;, Greater than: &gt;, Copyright: &copy;</p>

<p>Ampersand: &amp;, Euro: &euro;, Trademark: &trade;</p>

<p>Non-breaking space example</p>

Output:

Ampersand: &, Euro: €, Trademark: ™

Non-breaking space example (spaces won't break)

Common Entities:

< = < (less than)
> = > (greater than)
& = & (ampersand)
  = non-breaking space
" = " (quotation mark)

Iframes

Embed another webpage or content within your page.

                            
<iframe src="https://www.example.com" width="400" height="300"></iframe>

<!-- YouTube video embed -->

<iframe width="560" height="315" 

src="https://www.youtube.com/embed/dQw4w9WgXcQ"

title="YouTube video player" frameborder="0"

allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

allowfullscreen></iframe>

Demo:

Embedded Content:

✅ Output: Embedded website or content in your page.

Canvas & SVG (Graphics)

Create dynamic graphics and vector images directly in HTML.

                            
<!-- Canvas -->

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

<script>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.fillStyle = "red";

ctx.fillRect(20, 20, 150, 50);

</script>

<!-- SVG -->

<svg width="100" height="100">

  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />

</svg>

Demo:

Canvas:

SVG:

✅ Output: Canvas creates bitmap graphics, SVG creates scalable vector graphics.

Hidden HTML Concepts

Lesser-known but powerful HTML features

Data Attributes

Store custom data private to the page or application.

                            
<div id="user" data-user-id="12345" data-role="admin">

  User Information

</div>

<script>

var userDiv = document.getElementById('user');

console.log(userDiv.dataset.userId); // "12345"

console.log(userDiv.dataset.role); // "admin"

</script>

Benefits:

Store extra information without affecting presentation
Accessible via JavaScript using the dataset property
Valid HTML5 that doesn't break validation

Template Element

Store HTML content that won't be rendered immediately but can be used later.

                            
<template id="myTemplate">

  <div class="user-card">

    <h3>User Name</h3>

    <p>User description</p>

  </div>

</template>

<script>

var template = document.getElementById('myTemplate');

var clone = template.content.cloneNode(true);

document.body.appendChild(clone);

</script>

Usage:

The template content is not rendered until it's activated with JavaScript. Perfect for reusable components.

Search & Dialog Elements

Specialized elements for search functionality and modal dialogs.

                            
<!-- Search input -->

<input type="search" placeholder="Search...">

<!-- Dialog element -->

<dialog id="myDialog">

  <p>This is a native dialog!</p>

  <button onclick="document.getElementById('myDialog').close()">Close</button>

</dialog>

<button onclick="document.getElementById('myDialog').showModal()">Open Dialog</button>

Demo: