HTML5

HTML5 is the latest version of HTML used to create and structure web pages . It defines how content (text, images, videos, etc.) is displayed in a...

🌐 HTML5 (HyperText Markup Language)

📌 1. Definition

HTML5 is the latest version of HTML used to create and structure web pages. It defines how content (text, images, videos, etc.) is displayed in a browser.

🧱 2. Basic Structure of HTML5 Page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Web Page</title>
</head>
<body>
    <h1>Hello World</h1>
    <p>This is HTML5 page.</p>
</body>
</html>

🔑 Explanation

<!DOCTYPE html> → tells browser this is HTML5
<html> → root element
<head> → metadata (title, charset)
<body> → visible content

🏷️ 3. HTML Elements & Tags

📌 Definition

An HTML element consists of:

<tag>Content</tag>

⭐ Common Tags

<h1> to <h6> → headings
<p> → paragraph
<a> → hyperlink
<img> → image
<ul>, <ol>, <li> → lists

🧠 4. New Features of HTML5

1. Semantic Elements (Important for Exams)

These give meaning to content:

<header> → top section
<footer> → bottom section
<article> → independent content
<section> → page section
<nav> → navigation links

✅ Example

<header>
  <h1>Website Title</h1>
</header>

2. Multimedia Support

HTML5 supports audio and video without plugins.

<video controls>
  <source src="video.mp4">
</video>

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

3. Canvas (Graphics)

Used to draw graphics via JavaScript.

<canvas id="myCanvas"></canvas>

4. Forms Improvements

New input types:

email
date
number
range

<input type="email" placeholder="Enter email">

5. Local Storage

Stores data in browser:

localStorage.setItem("name", "Ali");

📝 5. Attributes

📌 Definition

Attributes provide extra information about elements.

<a href="https://example.com">Visit</a>

⭐ Common Attributes

id
class
src
href
alt

📋 6. Lists in HTML5

Unordered List

<ul>
  <li>Item 1</li>
</ul>

Ordered List

<ol>
  <li>Item 1</li>
</ol>

🧾 7. Tables in HTML5

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Ali</td>
    <td>20</td>
  </tr>
</table>

🧩 8. Forms in HTML5

<form>
  Name: <input type="text"><br>
  Email: <input type="email"><br>
  <input type="submit">
</form>

📊 9. HTML5 Page Layout (Diagram Description)

👉 Draw this in exam:

+-------------------+
|     Header        |
+-------------------+
| Navigation Menu   |
+-------------------+
|   Section         |
|   (Article)       |
+-------------------+
|     Footer        |
+-------------------+

⚠️ 10. Important Rules

✔ Tags are usually paired (<p></p>) ✔ Some tags are self-closing (<img>) ✔ Use proper nesting ✔ HTML is not case-sensitive ✔ Always include <!DOCTYPE html>