"Master the building blocks of the web"
HTML is the backbone of any web page. It structures content using elements such as headings, paragraphs, forms, and tables.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- Body -->
</body>
</html>
HTML supports 6 levels of headings: <h1> to <h6>.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>This is a paragraph.</p>
<strong>Bold Text</strong>
<em>Italic Text</em>
<u>Underlined Text</u>
<br> (Line Break)
Use <a> tags to link to other pages.
<a href="https://www.google.com" target="_blank">Visit Google</a>
Use <img> to display images.
<img src="image.jpg" alt="Description" width="300">
HTML supports ordered and unordered lists.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
</ol>
Forms allow users to input data into fields.
<form>
<label>Name: </label>
<input type="text" name="name"><br>
<label>Email: </label>
<input type="email" name="email"><br>
<button type="submit">Submit</button>
</form>
Tables are used to display structured data.
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>24</td>
</tr>
</table>
Semantic HTML gives meaning to content.
<header>Header Content</header>
<nav>Navigation Links</nav>
<main>Main Content</main>
<footer>Footer Content</footer>
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
<form>
<input type="date">
<input type="color">
<input type="range" min="0" max="100">
<input type="file">
<input type="checkbox"> Accept Terms
</form>
Embed another webpage inside your page.
<iframe src="https://example.com" width="600" height="400"></iframe>
<script>
// Local Storage
localStorage.setItem("username", "Alice");
alert(localStorage.getItem("username"));
// Geolocation
navigator.geolocation.getCurrentPosition(function(pos) {
console.log(pos.coords.latitude, pos.coords.longitude);
});
</script>