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.
<!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>
<!DOCTYPE html> → tells browser this is HTML5<html> → root element<head> → metadata (title, charset)<body> → visible contentAn HTML element consists of:
<tag>Content</tag>
<h1> to <h6> → headings<p> → paragraph<a> → hyperlink<img> → image<ul>, <ol>, <li> → listsThese give meaning to content:
<header> → top section<footer> → bottom section<article> → independent content<section> → page section<nav> → navigation links<header>
<h1>Website Title</h1>
</header>
HTML5 supports audio and video without plugins.
<video controls>
<source src="video.mp4">
</video>
<audio controls>
<source src="audio.mp3">
</audio>
Used to draw graphics via JavaScript.
<canvas id="myCanvas"></canvas>
New input types:
emaildatenumberrange<input type="email" placeholder="Enter email">
Stores data in browser:
localStorage.setItem("name", "Ali");
Attributes provide extra information about elements.
<a href="https://example.com">Visit</a>
idclasssrchrefalt<ul>
<li>Item 1</li>
</ul>
<ol>
<li>Item 1</li>
</ol>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Ali</td>
<td>20</td>
</tr>
</table>
<form>
Name: <input type="text"><br>
Email: <input type="email"><br>
<input type="submit">
</form>
👉 Draw this in exam:
+-------------------+
| Header |
+-------------------+
| Navigation Menu |
+-------------------+
| Section |
| (Article) |
+-------------------+
| Footer |
+-------------------+
✔ Tags are usually paired (<p></p>)
✔ Some tags are self-closing (<img>)
✔ Use proper nesting
✔ HTML is not case-sensitive
✔ Always include <!DOCTYPE html>
<canvas>?<div> and <section>?HTML5 = Structure of web page
Uses tags & elements
New features:
Works with CSS + JavaScript
Open this section to load past papers