HTML HISTORY AND CURRICULUM

Welcome to Udaan Institute of Information Technology Ahmedabad. I know that you are interested in becoming a good web developer so you are here. So you are going to learn the first step of Web Development Course. So let’s start with us.

History of HTML:

History of HTML (HyperText Markup Language)

HTML has evolved significantly since its creation in the early 1990s. It started as a simple language for formatting scientific documents and grew into the foundation of the modern web.

1. Origins: The Birth of HTML (1989–1991)

Inventor: Tim Berners-Lee, a British scientist at CERN.
Year: Proposed in 1989, implemented in 1990–1991.
Purpose: To facilitate sharing and linking documents over the internet.
First Version: Contained just 18 tags (e.g., <p>, <a>, <title>, <h1>).

Tim Berners-Lee also created the first web browser (WorldWideWeb) and first website (info.cern.ch).

2. HTML 2.0 (1995)

Standardized by: Internet Engineering Task Force (IETF).
Released in: November 1995.
Key Features:
- Basic structure for web documents.
- Forms, text formatting, links, and images.
It included all the tags from the original version and became the first official standard.

3. HTML 3.2 (1997)

Released by: W3C (World Wide Web Consortium).
New Features:
- Tables
- Applets (Java)
- Text flow around images
- Scripts (support for JavaScript)
Introduced more control for layout and presentation.

4. HTML 4.01 (1999)

Released: December 1999
Major Update:
- Separation of content and style via CSS (Cascading Style Sheets).
- Introduced three flavors: Strict, Transitional, and Frameset.
- More accessibility and internationalization support.

HTML 4.01 remained the standard for nearly a decade.

5. XHTML 1.0 (2000)

XHTML = HTML + XML
Made HTML more strict and structured.
Documents had to be well-formed.
Not widely adopted due to its strictness and compatibility issues.

6. HTML5 (2014 – present)

Development began: Early 2000s by WHATWG (Web Hypertext Application Technology Working Group).
Finalized: October 28, 2014 by W3C.
Major Enhancements:
- New semantic elements: <article>, <section>, <nav>, <header>, <footer>.
- Multimedia support: <audio>, <video>, <canvas>.
- Form enhancements and new input types.
- Offline storage: LocalStorage, SessionStorage.
- Geolocation API, drag-and-drop, etc.
HTML5.1 and HTML5.2 followed with more refinements.

HTML5 is the current and ongoing standard.

7. HTML Living Standard (2017–Present)

Maintained by: WHATWG
No version numbers—HTML is now a “living standard”, meaning it’s continuously updated.
Emphasis on real-world browser implementation and interoperability.

Timeline Summary

Year	Version	Highlights
1991	HTML 1.0	Initial draft with 18 tags
1995	HTML 2.0	First official specification
1997	HTML 3.2	Tables, scripting, more formatting
1999	HTML 4.01	CSS support, accessibility, forms improved
2000	XHTML 1.0	XML-based stricter syntax
2014	HTML5	Multimedia, APIs, semantic elements
2017–Now	HTML (Living Standard)	Continuously evolving, maintained by WHATWG

Conclusion

HTML has come a long way from its humble beginnings. From linking text documents to enabling rich multimedia web applications, HTML’s evolution mirrors the growth of the internet itself. With its current living standard model, HTML is built to adapt quickly to new needs in web development.

HTML PRACTICE SET BY UDAAN INSTITUTE OF INFORMATION TECHNOLOGY AHMEDABAD

Here’s a list of commonly used HTML tags for practice, grouped by category. You can copy and paste these into an HTML file and experiment with them:

Basic HTML Structure

<!DOCTYPE html>
<html>
  <head>
    <title>My Practice Page</title>
  </head>
  <body>
    <!-- Content goes here -->
  </body>
</html>

Text Formatting Tags

<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<p>This is a paragraph.</p>
<b>Bold text</b>
<strong>Strong text</strong>
<i>Italic text</i>
<em>Emphasized text</em>
<mark>Marked text</mark>
<small>Small text</small>
<del>Deleted text</del>
<ins>Inserted text</ins>
<sub>Subscript</sub>
<sup>Superscript</sup>

List Tags

<ul>
  <li>Unordered item 1</li>
  <li>Unordered item 2</li>
</ul>

<ol>
  <li>Ordered item 1</li>
  <li>Ordered item 2</li>
</ol>

<dl>
  <dt>Term</dt>
  <dd>Description</dd>
</dl>

Link and Media Tags

<a href="https://example.com">Visit Example</a>
<img src="image.jpg" alt="Sample Image" width="200">
<video controls>
  <source src="video.mp4" type="video/mp4">
</video>
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

Table Tags

<table border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

Form Tags

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

  <input type="radio" name="gender" value="male"> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>

  <input type="checkbox" name="subscribe"> Subscribe<br>

  <textarea rows="4" cols="30"></textarea><br>

  <select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select><br><br>

  <input type="submit" value="Submit">
</form>

Semantic Tags

<header>Header content</header>
<nav>Navigation menu</nav>
<main>Main content</main>
<article>Article content</article>
<section>Section content</section>
<aside>Sidebar content</aside>
<footer>Footer content</footer>

Other Useful Tags

<div>This is a division</div>
<span>This is inline text</span>
<br>
<hr>
<iframe src="https://example.com" width="300" height="200"></iframe>

Would you like me to generate a full practice HTML file using all these tags?

Here’s a list of Advanced HTML5 Tags with examples for hands-on practice, useful for multimedia, interactivity, and modern web structure:

1. `<video>` – Embed Video

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

2. `<audio>` – Embed Audio

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

3. `<canvas>` – Drawing Graphics

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

4. `<svg>` – Scalable Vector Graphics

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

5. `<details>` and `<summary>` – Toggle Content

<details>
  <summary>Click to see more</summary>
  <p>This is hidden content that shows when you click the summary.</p>
</details>

6. `<dialog>` – Modal Pop-up

<dialog id="myDialog">
  <p>This is a dialog box!</p>
  <button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">Open Dialog</button>

7. `<template>` – Reusable HTML Template

<template id="myTemplate">
  <p>This is a reusable template.</p>
</template>

<script>
  const temp = document.getElementById('myTemplate');
  document.body.appendChild(temp.content.cloneNode(true));
</script>

8. `<progress>` – Progress Bar

<label for="file">Downloading:</label>
<progress id="file" value="70" max="100">70%</progress>

9. `<meter>` – Measurement Indicator

<label for="disk">Disk usage:</label>
<meter id="disk" value="0.7">70%</meter>

10. Web Components (Custom Elements)

<custom-greeting></custom-greeting>
<script>
  class CustomGreeting extends HTMLElement {
    connectedCallback() {
      this.innerHTML = "<h3>Hello from a custom element!</h3>";
    }
  }
  customElements.define('custom-greeting', CustomGreeting);
</script>

Ok! Now you have completed your learning towards HTML from Udaan Institute of Information Technology Ahmedabad. We hope that you have enjoyed this bade language of Web Development. Congratulations for your best career.

Jai Hind

HTML Practice Beginners to Advanced

HTML HISTORY AND CURRICULUM

History of HTML (HyperText Markup Language)

1. Origins: The Birth of HTML (1989–1991)

2. HTML 2.0 (1995)

3. HTML 3.2 (1997)

4. HTML 4.01 (1999)

5. XHTML 1.0 (2000)

6. HTML5 (2014 – present)

7. HTML Living Standard (2017–Present)

Timeline Summary

Conclusion

HTML PRACTICE SET BY UDAAN INSTITUTE OF INFORMATION TECHNOLOGY AHMEDABAD

Basic HTML Structure

Text Formatting Tags

List Tags

Link and Media Tags

Table Tags

Form Tags

Semantic Tags

Other Useful Tags

1. `<video>` – Embed Video

2. `<audio>` – Embed Audio

3. `<canvas>` – Drawing Graphics

4. `<svg>` – Scalable Vector Graphics

5. `<details>` and `<summary>` – Toggle Content

6. `<dialog>` – Modal Pop-up

7. `<template>` – Reusable HTML Template

8. `<progress>` – Progress Bar

9. `<meter>` – Measurement Indicator

10. Web Components (Custom Elements)

Certificate in Web Designing & Development Course

Enroll Today Cick Here

HTML HISTORY AND CURRICULUM

History of HTML (HyperText Markup Language)

1. Origins: The Birth of HTML (1989–1991)

2. HTML 2.0 (1995)

3. HTML 3.2 (1997)

4. HTML 4.01 (1999)

5. XHTML 1.0 (2000)

6. HTML5 (2014 – present)

7. HTML Living Standard (2017–Present)

Timeline Summary

Conclusion

HTML PRACTICE SET BY UDAAN INSTITUTE OF INFORMATION TECHNOLOGY AHMEDABAD

Basic HTML Structure

Text Formatting Tags

List Tags

Link and Media Tags

Table Tags

Form Tags

Semantic Tags

Other Useful Tags

1. <video> – Embed Video

2. <audio> – Embed Audio

3. <canvas> – Drawing Graphics

4. <svg> – Scalable Vector Graphics

5. <details> and <summary> – Toggle Content

6. <dialog> – Modal Pop-up

7. <template> – Reusable HTML Template

8. <progress> – Progress Bar

9. <meter> – Measurement Indicator

10. Web Components (Custom Elements)

Certificate in Web Designing & Development Course

Enroll Today Cick Here

1. `<video>` – Embed Video

2. `<audio>` – Embed Audio

3. `<canvas>` – Drawing Graphics

4. `<svg>` – Scalable Vector Graphics

5. `<details>` and `<summary>` – Toggle Content

6. `<dialog>` – Modal Pop-up

7. `<template>` – Reusable HTML Template

8. `<progress>` – Progress Bar

9. `<meter>` – Measurement Indicator