Scribd
Upload
3 views

Introduction to HTML5

This document provides an introduction to HTML5, explaining its definition as a markup language used for creating web pages, its historical evolution from HTML 1.0 to HTML5, and the basic structure of an HTML document. It highlights key differences between HTML, XHTML, and HTML5, including syntax and multimedia support. Additionally, it includes a practice exercise for creating a simple webpage using HTML tags.

Uploaded by

boubaabdou064
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

Introduction to HTML5

This document provides an introduction to HTML5, explaining its definition as a markup language used for creating web pages, its historical evolution from HTML 1.0 to HTML5, and the basic structure of an HTML document. It highlights key differences between HTML, XHTML, and HTML5, including syntax and multimedia support. Additionally, it includes a practice exercise for creating a simple webpage using HTML tags.

Uploaded by

boubaabdou064
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Lesson 1: Introduction to HTML5

1. What is HTML?

HTML (HyperText Markup Language) is the standard language used to create


web pages. It provides the structure of a webpage, while CSS (Cascading
Style Sheets) is used for styling, and JavaScript adds interactivity.

Key Points

HTML is a markup language, not a programming language.

It consists of elements (tags) that define content types (text, images,


links, videos, etc.).

Web browsers interpret HTML to display pages correctly.

2. History and Evolution

HTML Timeline

1. HTML 1.0 (1993) – Basic text-based webpages.

2. HTML 2.0 (1995) – Introduced basic forms and tables.

3. HTML 3.2 (1997) – Added support for scripting, tables, and applets.

4. HTML 4.01 (1999) – Introduced CSS support, better structure, and


accessibility.

5. XHTML (2000s) – Stricter HTML syntax based on XML.

6. HTML5 (2014 - present) – Added semantic elements, multimedia support,


and mobile-first design.

HTML vs. XHTML vs. HTML5

Feature HTML 4.01 XHTML HTML5


Syntax Loose Strick(XML- Flexible
based)
Closing tags Optional Required Optional for
some tags
Multimedia Limited No direct <audio>,<video>,
support support <canvas>
Mobile-friendly No No Yes

3. Basic Structure of an HTML Document

Every HTML document follows a standard structure:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to HTML5</h1>
<p>This is my first webpage.</p>
</body>
</html>

Explanation

1. <!DOCTYPE html> – Declares the document as HTML5.

2. <html> – The root element of the page.

3. <head> – Contains metadata (title, character set, viewport settings).

4. <title> – Sets the page title (visible in the browser tab).

5. <meta> – Provides additional information (encoding, mobile


responsiveness).

6. <body> – Contains the main content of the page.

4. HTML Tags and Elements

HTML consists of tags that define the structure of a webpage.

Example of Elements
Tag Description
<h1> to <h6> Headings ( h1 is the largest and h6 is the
smallest )
<p> Paragraph
<img scr=”…” alt=”…”> Image
<a href=”…”> Link ( anchor tag )
<ul>, <ol>, <li> Lists ( Unordered, ordered and list item )

Practice Exercise

Task: Create a simple webpage with:

A title

A heading (<h1>)

A paragraph (<p>)

Steps:

1. Open Notepad (Windows) or VS Code.

2. Copy and paste the following code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>My First Webpage</title>
</head>
<body>
<h1>Hello, HTML5!</h1>
<p>This is my first HTML5 document.</p>
</body>
</html>

3. Save the file as index.html.

4. Open it in a web browser (Chrome, Firefox, Edge).

You might also like