Basic to Advance HTML Tutorial

HTML (Hyper Text Markup Language)

Introduction to HTML

HTML stands for HyperText Markup Language.
It is the standard markup language used to create web pages and web applications.
HTML describes the structure of a webpage using a series of elements or "tags."
These tags tell the browser how to display the content, including text, images, links, and more.
HTML is not a programming language but a markup language.
It is easy to learn and widely supported by all web browsers.

Why HTML5?

Semantic tags like <header>, <footer>, and <article>.
Built-in support for multimedia with <audio> and <video>.
Enhanced APIs for web applications.

Tools for Writing HTML

Text Editors:
- Simple editors like Notepad (Windows) or TextEdit (Mac).
Code Editors:
- Advanced editors such as Visual Studio Code, Sublime Text, or Atom.
- Features like syntax highlighting, autocomplete, and extensions make coding easier.
Web-Based Editors:
- Tools like CodePen, JSFiddle, or Replit for quick prototyping.
Integrated Development Environments (IDEs):
- IDEs like WebStorm or Dreamweaver for professional development.
Browser Developer Tools:
- Built-in tools in browsers like Chrome, Firefox, or Edge for testing and debugging.

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>Welcome to HTML</h1>
    <p>This is a basic HTML document.</p>
</body>
</html>

Basic HTML Tags

Below is an explanation of the most commonly used HTML tags, categorized for better understanding.

1. Structural Tags

<html>

The root element that encloses all HTML code.

<head>

Contains metadata about the document (e.g., title, stylesheets, scripts).

<title>

Sets the title of the webpage displayed in the browser tab.

<body>

Contains the visible content of the webpage.

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>Welcome to HTML</h1>
    <p>This is a basic HTML document.</p>
</body>
</html>

2. Headings

Tags: <h1> to <h6>
Used to create headings, where <h1> is the largest and <h6> is the smallest.

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Section Heading</h3>
<h4>Section Heading</h4>
<h5>Section Heading</h5>
<h6>Section Heading</h6>

3. Paragraph

Tag: <p>
Defines a paragraph of text.

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

4. Line Break and Horizontal Rule

<br>: Inserts a line break.
<hr>: Inserts a horizontal rule (line).

This is line one.<br>
This is line two.

<p>First Section</p>
<hr>
<p>Second Section</p>

5. Text Formatting Tags

<b>:
- Makes text bold.
<i>:
- Italicizes text.
<u>:
- Underlines text.

<!DOCTYPE html>
<html>
<head>
    <title>Basic HTML Tags</title>
</head>
<body>
    <h1>Welcome to HTML Basics</h1>
    <h2>Understanding Tags</h2>
    <p>This is a paragraph explaining the importance of HTML tags.</p>
    <p>Here's another paragraph.<br>Notice the line break here.</p>
    <hr>
    <p>Text formatting examples:</p>
    <p><b>Bold Text</b></p>
    <p><i>Italic Text</i></p>
    <p><u>Underlined Text</u></p>
</body>
</html>

Working with Text

HTML provides various ways to structure and format text on a webpage. Below are the key topics under “Working with Text”:

Formatting Text with HTML

HTML offers tags to format text, such as bold, italic, and underline. Here are some examples:

Bold Text: Output: This text is bold.

Italic Text: Output: This text is italicized.

Underlined Text: Output: <u>This text is underlined.</u>

Strikethrough Text: Output: ~~This text is struck through.~~

Emphasized and Strong Text:

<em>: Emphasizes text (usually italicized).
<strong>: Highlights important text (usually bolded).

<b>This text is bold.</b>
<i>This text is italicized.</i>
<u>This text is underlined.</u>
<s>This text is struck through.</s>
<em>This text is emphasized.</em>
<strong>This text is strong.</strong>

Superscript and Subscript

Superscript (<sup>):

Used for mathematical exponents or ordinal indicators.

Subscript (<sub>):

Used for chemical formulas or mathematical indices.

10<sup>2</sup>

H<sub>2</sub>O

HTML Entities

HTML entities are used to display reserved characters or symbols that cannot be typed directly in HTML. They start with & and end with ;.

Reserved Characters:
- < → < → <
- > → > → >
- & → & → &
- " " → " → "
Symbols:
- Non-breaking space →   → (creates a space)
- Copyright → © → ©
- Registered → ® → ®
- Euro → € → €
- Trademark → ™ → ™

<p>This is a less than symbol: &lt;</p>
<p>This is a non-breaking space: Hello&nbsp;World</p>
<p>Trademark symbol: &trade;</p>

Quotation and Citation Elements

Quotation Tags:

Inline Quotation: <q>
- Used for short inline quotes.

Block Quote: <blockquote>

Used for longer quotes, typically indented.

Citation:

<cite>: Denotes the title of a work or source.

<q>The journey of a thousand miles begins with one step.</q>
<blockquote>
    This is a long quote that spans multiple lines. It is typically used for 
    referencing a block of text from another source.
</blockquote>
<p>This book, <cite>To Kill a Mockingbird</cite>, is a classic.</p>

<!DOCTYPE html>
<html>
<head>
    <title>Working with Text</title>
</head>
<body>
    <h1>Text Formatting Examples</h1>
    <p><b>Bold Text</b>, <i>Italic Text</i>, and <u>Underlined Text</u>.</p>
    <p>Here is a superscript example: 5<sup>3</sup>, and a subscript example: CO<sub>2</sub>.</p>
    <p>HTML Entities: Less than (&lt;), Greater than (&gt;), and Copyright &copy;.</p>
    <blockquote>
        "This is a long block quote to demonstrate the usage of the <code>&lt;blockquote&gt;</code> element."
    </blockquote>
    <p>Citation Example: <cite>The Great Gatsby</cite> is a well-known novel.</p>
</body>
</html>

Links (or hyperlinks) are one of the most important aspects of HTML, enabling navigation between web pages, sections of a page, and even external resources.

1. Anchor Tags (`<a>`) and Hyperlinks

- The <a> tag is used to create links.
- Key Attributes:
  - href: Specifies the URL or location of the link.
  - target: Specifies where to open the link (_blank for a new tab, _self for the same tab).
  - title: Adds a tooltip when the mouse hovers over the link.

<a href="https://www.example.com" target="_blank" title="Visit Example">Visit Example</a>

2. Types of Links

Absolute Links:

Provide the full URL to a resource, including the protocol (e.g., https://).
Used to link to external websites or resources.

Relative Links:

Link to resources relative to the current document’s location.
Used for linking within the same website.

<a href="https://www.google.com">Go to Google</a>
<a href="/about.html">About Us</a>

Key Differences:

Feature	Absolute Link	Relative Link

URL Format Full URL (https://example.com) Partial path (/page)

Use Case

External websites

Internal navigation

3. Linking to Sections of a Page (Internal Links)

Internal links navigate to specific sections within the same page using IDs.

Steps:

Assign an id to the target element.
Use the href attribute with #id to link to it.

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

<!-- Target Section -->
<h2 id="section1">Section 1</h2>
<p>This is Section 1 content.</p>

4. Email Links and Phone Links

Email Links:

Use the mailto: scheme in the href attribute to open an email client with a pre-filled address.

Phone Links:

Use the tel: scheme in the href attribute to initiate a phone call (useful for mobile devices).

<a href="mailto:info@example.com">Email Us</a>
<a href="tel:+1234567890">Call Us</a>

<!DOCTYPE html>
<html>
<head>
    <title>Links and Navigation</title>
</head>
<body>
    <h1>Links and Navigation</h1>

    <!-- Absolute Link -->
    <p><a href="https://www.wikipedia.org" target="_blank" title="Visit Wikipedia">Visit Wikipedia</a></p>

    <!-- Relative Link -->
    <p><a href="about.html">Learn More About Us</a></p>

    <!-- Internal Link -->
    <p><a href="#section2">Jump to Section 2</a></p>

    <!-- Email Link -->
    <p><a href="mailto:info@example.com">Contact Us via Email</a></p>

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

    <!-- Sections for Internal Links -->
    <h2 id="section1">Section 1</h2>
    <p>This is the first section of the page.</p>

    <h2 id="section2">Section 2</h2>
    <p>This is the second section of the page.</p>
</body>
</html>

Images in HTML

Here’s a detailed explanation of the topics you mentioned related to images in HTML:

1. Adding Images with (`<img>`)

The <img> tag is used to embed images in an HTML document. It is a self-closing tag, meaning it does not require a closing tag.

src: Specifies the path to the image.
alt: Provides alternative text for the image if it cannot be displayed.

<img src="image.jpg" alt="Description of image">
<img src="flower.jpg" alt="A beautiful red flower">

2. Image Attributes

HTML provides attributes to customize and control how images appear on a webpage.

a. `src` (Source)

The src attribute is mandatory and specifies the path or URL of the image.
It can be:
- Relative (e.g., images/photo.jpg for files in your project folder).
- Absolute (e.g., https://example.com/photo.jpg for an external URL).

b. `alt` (Alternative Text)

The alt attribute provides a textual description of the image.
It is useful for:
- Accessibility (e.g., screen readers for visually impaired users).
- SEO purposes.
- Displaying text if the image fails to load.

c. `width` and `height`

These attributes specify the dimensions of the image.
Values can be in pixels or percentages.

d. Other Attributes

loading: Specifies lazy loading (lazy) or eager loading (eager).
title: Displays a tooltip when hovering over the image.

<img src="flower.jpg" alt="A beautiful red flower" width="300" height="200">

3. Best Practices for Using Images

To ensure optimal performance and usability, follow these best practices:

Optimize Image Size:
- Use compressed images to reduce file size without sacrificing quality (e.g., JPEG for photos, PNG for transparency, WebP for better compression).
Responsive Images:
- Use CSS or the srcset attribute to make images adapt to different screen sizes.
Use the alt Attribute:
- Always include a meaningful alt text for accessibility and SEO.
Lazy Loading:
- Defer loading of images not in the viewport using the loading="lazy" attribute.
Avoid Inline Styling:
- Use external or internal CSS for styling images instead of inline styles.
Use Image Formats Wisely:
- Prefer modern formats like WebP or AVIF for better compression.

<img src="small.jpg" srcset="medium.jpg 600w, large.jpg 1200w" sizes="(max-width: 600px) 100vw, 50vw" alt="Responsive image">
<img src="example.jpg" alt="Lazy loaded image" loading="lazy">

4. Image Maps

Image maps allow you to define clickable areas on an image that link to different destinations.

How to Create an Image Map:

Use the <map> Tag:
- Define the clickable areas with the <area> tag inside a <map> element.
Associate the Map with an Image:
- Use the usemap attribute in the <img> tag.

<img src="map.jpg" alt="World Map" usemap="#worldmap">
<map name="worldmap">
  <area shape="rect" coords="34,44,270,350" href="https://example.com/region1" alt="Region 1">
  <area shape="circle" coords="377,300,75" href="https://example.com/region2" alt="Region 2">
  <area shape="poly" coords="112,340,220,120,330,230" href="https://example.com/region3" alt="Region 3">
</map>

Attributes for `<area>` Tag:

shape: Specifies the shape of the clickable area (rect, circle, poly).
coords: Specifies the coordinates for the shape.
href: Specifies the link for the area.
alt: Alternative text for the area.

HTML Lists

HTML provides various ways to create lists that organize content. Here’s a breakdown:

1. Ordered Lists (`<ol>`)

Used for lists where the order of items matters. The items are numbered automatically.

Rendered Output:

First item
Second item
Third item

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

2. Unordered Lists (`<ul>`)

Used for lists where the order of items doesn’t matter. Bullets are used as markers.

Rendered Output:

First item
Second item
Third item

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

3. Description Lists (`<dl>` `<dt>` `<dd>`)

Used for presenting lists of terms and their descriptions.

Rendered Output: HTML
A markup language for creating web pages.

CSS
A style sheet language for designing web pages.

<dl>
  <dt>HTML</dt>
  <dd>A markup language for creating web pages.</dd>
  <dt>CSS</dt>
  <dd>A style sheet language for designing web pages.</dd>
</dl>

4. Nesting Lists:

Lists can be nested to create sub-items.

Rendered Output:

First item
1. Sub-item 1
2. Sub-item 2
Second item

<ul>
  <li>First item
    <ol>
      <li>Sub-item 1</li>
      <li>Sub-item 2</li>
    </ol>
  </li>
  <li>Second item</li>
</ul>

Notes:

Use <ol> for ordered sequences (e.g., steps in a process).
Use <ul> for unordered groupings (e.g., shopping lists).
Use <dl> for term-description pairs.
Nesting lists allows for hierarchical representation.

Tables in HTML

HTML tables are used to organize and display data in a tabular format. Here’s a detailed explanation:

1. Creating Tables (<table>, <tr>, <td>, <th>):

<table>: Defines the table.
<tr>: Defines a row.
<td>: Defines a cell (data).
<th>: Defines a header cell (usually bold and centered).

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
    <td>Row 1, Cell 3</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
    <td>Row 2, Cell 3</td>
  </tr>
</table>

Rendered Output:
Header 1 Header 2 Header 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3

Header 1	Header 2	Header 3
Row 1, Cell 1	Row 1, Cell 2	Row 1, Cell 3
Row 2, Cell 1	Row 2, Cell 2	Row 2, Cell 3

2. Table Attributes:

border: Adds a border around the table and its cells.
cellpadding: Defines space inside each cell.
cellspacing: Defines space between cells.

<table border="1" cellpadding="5" cellspacing="5">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
</table>

3. Merging Cells (colspan, rowspan):

colspan: Merges columns.
rowspan: Merges rows.

<table border="1">
  <tr>
    <th colspan="2">Merged Columns</th>
  </tr>
  <tr>
    <td rowspan="2">Merged Rows</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

Rendered Output:

Merged Columns
Merged Rows	Row 1, Cell 2
	Row 2, Cell 2

4. Adding Captions:

Use the <caption> tag to provide a title for the table.

<table border="1">
  <caption>Example Table</caption>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
</table>

Rendered Output: Example Table

Header 1	Header 2
Row 1, Cell 1	Row 1, Cell 2

Forms and Input

HTML forms are used to collect user input and send it to a server for processing. Here’s a detailed guide:

1. <form> Basics and Attributes

The <form> element wraps all the form elements and includes attributes to configure its behavior.

Common Attributes:

action: Specifies where to send the form data (e.g., a URL).
method: Determines how data is sent (GET or POST).
target: Specifies where to display the response (_self, _blank, _parent, _top).

<form action="submit.php" method="post" target="_blank">
  <!-- Form elements go here -->
</form>

2. Input Types (<input>, <textarea>, <button>, <select>, etc.)

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

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

  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br>

  <label for="dob">Date of Birth:</label>
  <input type="date" id="dob" name="dob"><br>

  <label for="gender">Gender:</label>
  <input type="radio" id="male" name="gender" value="male"> Male
  <input type="radio" id="female" name="gender" value="female"> Female<br>

  <label for="hobbies">Hobbies:</label>
  <input type="checkbox" id="sports" name="hobbies" value="sports"> Sports
  <input type="checkbox" id="music" name="hobbies" value="music"> Music<br>

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

<textarea>: For multi-line text input, <select> and <option>: For dropdown menus.

<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>

<label for="country">Country:</label>
<select id="country" name="country">
  <option value="usa">USA</option>
  <option value="canada">Canada</option>
  <option value="india">India</option>
</select>

3. Form Attributes

action: Specifies the server endpoint where data is sent.
method:
- GET: Appends data to the URL. Suitable for simple searches.
- POST: Sends data in the request body. Suitable for sensitive data.
target:
- _self: Opens in the current window (default).
- _blank: Opens in a new tab.

<form action="/submit" method="post" target="_blank">
  <!-- Form elements -->
</form>

4. Validation in Forms

Common Validation Attributes:
- required: Ensures the field cannot be empty.
- min / max: Defines numeric or date ranges.
- minlength / maxlength: Sets character limits for text input.
- pattern: Uses regex for custom validation.

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

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" minlength="6" required><br>

  <label for="age">Age:</label>
  <input type="number" id="age" name="age" min="18" max="100" required><br>

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

Semantic HTML

Semantic HTML refers to the use of HTML tags that provide meaning to the content they enclose. These tags not only structure the webpage but also convey the type of information contained within them. Semantic tags improve accessibility, search engine optimization (SEO), and code readability by clearly defining the purpose of elements.

Benefits of Semantic Tags:

Accessibility: Screen readers and assistive technologies can better interpret the page structure.
SEO: Search engines can easily index and understand the content.
Maintainability: Developers can understand and update the code more easily.
Standardization: Promotes the use of best practices in web development.

Common Semantic Tags

<header>

Represents the introductory content or a container for navigation links.
Usually appears at the top of a document or section.
Can include elements like headings, logos, or menus.

<header>
  <h1>Welcome to My Website</h1>
  <nav>
    <ul>
      <li><a href="#about">About</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

<footer>

Denotes the footer of a document or section.
Commonly includes copyright information, links to terms of service, or contact details.

<footer>
  <p>&copy; 2025 My Website. All rights reserved.</p>
  <a href="terms.html">Terms of Service</a>
</footer>

<article>

Represents independent, self-contained content that could be distributed or reused.
Examples include blog posts, news articles, or forum posts.

<article>
  <h2>Understanding Semantic HTML</h2>
  <p>Semantic HTML helps structure your web pages effectively...</p>
</article>

<section>

Groups related content together, often with a heading.
Used to divide content into thematic areas within a document.

<section>
  <h2>Our Services</h2>
  <p>We offer web development, design, and SEO optimization.</p>
</section>

<aside>

Represents content that is tangentially related to the main content, such as sidebars, pull quotes, or advertisements.

<aside>
  <h3>Related Articles</h3>
  <ul>
    <li><a href="#article1">HTML Basics</a></li>
    <li><a href="#article2">CSS Fundamentals</a></li>
  </ul>
</aside>

Multimedia in HTML

Multimedia elements like videos, audio, and embedded content play a vital role in enhancing user engagement and delivering rich experiences on the web. HTML provides specific tags for incorporating multimedia seamlessly into webpages.

Adding Videos with (`<video>`)

The <video> tag is used to embed video files into a webpage. It supports multiple formats like MP4, WebM, and Ogg.

Attributes of <video>:

controls: Adds playback controls (play, pause, volume, etc.).
autoplay: Automatically starts playing the video when the page loads.
loop: Replays the video after it ends.
muted: Mutes the audio by default.
poster: Specifies an image to display while the video is loading.

<video controls width="640" height="360" poster="poster-image.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

Adding Audio with (`<audio>`)

The <audio> tag is used to embed sound files into a webpage. Supported formats include MP3, Ogg, and WAV.

Attributes of <audio>:

controls: Adds playback controls (play, pause, volume, etc.).
autoplay: Automatically starts playing the audio when the page loads.
loop: Replays the audio after it ends.
muted: Mutes the audio by default.

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser does not support the audio tag.
</audio>

Embedding Other Media (`<iframe>`)

The <iframe> tag is used to embed external content, such as videos, maps, or other webpages, into the current page.

Attributes of <iframe>:

src: Specifies the URL of the embedded content.
width and height: Set the dimensions of the embedded content.
allowfullscreen: Allows the content to be viewed in full-screen mode.
frameborder: Specifies whether or not to display a border around the frame (deprecated, use CSS instead).

<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/VIDEO_ID" 
  title="YouTube video" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen>
</iframe>

HTML5 New Features

HTML5 introduced many new features and enhancements to make web development more robust, interactive, and efficient. These additions cover new elements, input types, APIs, and capabilities for creating modern web applications.

New Elements in HTML5

HTML5 brought several semantic and functional elements to improve webpage structure and accessibility.

Semantic Elements:

<header>: Represents introductory content or a container for navigational links.
<footer>: Represents footer content like copyrights or links.
<section>: Defines thematic sections of content.
<article>: Represents independent, self-contained content.
<aside>: Represents content tangentially related to the main content.
<nav>: Defines a block of navigation links.
<main>: Represents the primary content of a document.
<figure> and <figcaption>: Represents media content with captions.

<header>
  <h1>Welcome to HTML5</h1>
</header>
<section>
  <article>
    <h2>What’s New in HTML5?</h2>
    <p>HTML5 introduces many exciting features...</p>
  </article>
</section>
<footer>
  <p>&copy; 2025 HTML5 Guide</p>
</footer>

HTML5 Input Types

HTML5 introduced new input types to enhance form functionality and user experience.

Common New Input Types:

date: Select a date.
email: Enter a valid email address.
number: Enter numeric values with optional min and max.
range: Select a value within a range using a slider.
url: Enter a valid URL.
tel: Enter a phone number.
color: Select a color.

<input type="date">
<input type="email">
<input type="number" min="1" max="100">
<input type="range" min="0" max="10">
<input type="url">
<input type="tel">
<input type="color">

The Canvas Element (`<canvas>`)

The <canvas> element provides a drawable region for rendering graphics, animations, and games via JavaScript.

Key Attributes:

width and height: Set the dimensions of the canvas.
JavaScript Methods: Use the getContext('2d') method for 2D drawing.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid black;"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'blue';
  ctx.fillRect(10, 10, 100, 50);
</script>

Drag and Drop

HTML5 includes a drag-and-drop API for moving elements within a page.

Basic Drag-and-Drop Workflow:

Set the draggable attribute to true.
Use JavaScript events like ondragstart, ondrop, and ondragover.

<div id="dragItem" draggable="true" ondragstart="drag(event)">Drag me!</div>
<div id="dropZone" ondrop="drop(event)" ondragover="allowDrop(event)" style="border: 1px solid black; height: 100px;">
  Drop here
</div>
<script>
  function drag(event) {
    event.dataTransfer.setData("text", event.target.id);
  }
  function allowDrop(event) {
    event.preventDefault();
  }
  function drop(event) {
    event.preventDefault();
    const data = event.dataTransfer.getData("text");
    event.target.appendChild(document.getElementById(data));
  }
</script>

Web Storage (Local and Session Storage)

HTML5 introduced localStorage and sessionStorage for storing data on the client side.

localStorage:
- Stores data with no expiration.
- Data persists even after the browser is closed.
sessionStorage:
- Stores data for the session.
- Data is cleared when the tab is closed.

<script>
  // Store data
  localStorage.setItem('username', 'JohnDoe');
  sessionStorage.setItem('sessionID', '12345');

  // Retrieve data
  console.log(localStorage.getItem('username')); // Output: JohnDoe
  console.log(sessionStorage.getItem('sessionID')); // Output: 12345

  // Remove data
  localStorage.removeItem('username');
</script>

CSS Tutorial

HTML (Hyper Text Markup Language)

Introduction to HTML

Why HTML5?

Tools for Writing HTML

Basic HTML Tags

1. Structural Tags

2. Headings

3. Paragraph

4. Line Break and Horizontal Rule

5. Text Formatting Tags

Working with Text

Formatting Text with HTML

Superscript and Subscript

HTML Entities

Quotation and Citation Elements

Links and Navigation

1. Anchor Tags (<a>) and Hyperlinks

2. Types of Links

Absolute Links:

Relative Links:

Key Differences:

3. Linking to Sections of a Page (Internal Links)

Steps:

4. Email Links and Phone Links

Email Links:

Phone Links:

Images in HTML

1. Adding Images with (<img>)

2. Image Attributes

a. src (Source)

b. alt (Alternative Text)

c. width and height

d. Other Attributes

3. Best Practices for Using Images

4. Image Maps

How to Create an Image Map:

Attributes for <area> Tag:

HTML Lists

1. Ordered Lists (<ol>)

2. Unordered Lists (<ul>)

3. Description Lists (<dl> <dt> <dd>)

4. Nesting Lists:

Notes:

Tables in HTML

2. Table Attributes:

3. Merging Cells (colspan, rowspan):

4. Adding Captions:

Forms and Input

Semantic HTML

Benefits of Semantic Tags:

Common Semantic Tags

Multimedia in HTML

Adding Videos with (<video>)

Adding Audio with (<audio>)

Embedding Other Media (<iframe>)

HTML5 New Features

New Elements in HTML5

HTML5 Input Types

The Canvas Element (<canvas>)

Drag and Drop

Web Storage (Local and Session Storage)

Recent Stories

Recent Stories

Tutorials

Quick Links

1. Anchor Tags (`<a>`) and Hyperlinks

1. Adding Images with (`<img>`)

a. `src` (Source)

b. `alt` (Alternative Text)

c. `width` and `height`

Attributes for `<area>` Tag:

1. Ordered Lists (`<ol>`)

2. Unordered Lists (`<ul>`)

3. Description Lists (`<dl>` `<dt>` `<dd>`)

Adding Videos with (`<video>`)

Adding Audio with (`<audio>`)

Embedding Other Media (`<iframe>`)

The Canvas Element (`<canvas>`)