HTML5 Syllabus with Code

1. Introduction

HTML is used to create structure of webpages.

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  Hello World
</body>
</html>

2. Elements

HTML elements contain tags and content.

<p>This is paragraph</p>
<h1>Heading</h1>

3. Text Formatting

<b>Bold</b>
<i>Italic</i>
<u>Underline</u>

4. Links & Images

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

<img src="image.jpg" alt="img">

5. Lists

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

<ol>
  <li>First</li>
</ol>

6. Tables

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>20</td>
  </tr>
</table>

7. Forms

<form>
  <input type="text" placeholder="Name">
  <input type="email">
  <button>Submit</button>
</form>

8. Semantic

<header>Header</header>
<nav>Menu</nav>
<section>Content</section>
<footer>Footer</footer>

9. Multimedia

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

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

10. Local Storage

<script>
localStorage.setItem("name","Sasank");
console.log(localStorage.getItem("name"));
</script>

11. Canvas

<canvas id="c" width="200" height="100"></canvas>

<script>
let c = document.getElementById("c");
let ctx = c.getContext("2d");
ctx.fillRect(20,20,100,50);
</script>

12. Best Practice

<!-- Use semantic tags -->
<section>
  <h1>Title</h1>
</section>