HTML Basic Tutorial
Learn the fundamentals of HTML with this interactive tutorial.
HTML Document Structure
Every HTML document follows this basic structure:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document Title</title> </head> <body> <!-- Content goes here --> </body> </html>
Core HTML Elements
<h1>...</h1> - Main heading<p>...</p> - Paragraph<span>...</span> - Inline container<strong>...</strong> - Important text<em>...</em> - Emphasized text<!-- Link to another page --> <a href="https://example.com">Visit Example</a> <!-- Image --> <img src="image.jpg" alt="Description" width="200"> <!-- Video --> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> </video>
<!-- Unordered list --> <ul> <li>Item 1</li> <li>Item 2</li> </ul> <!-- Ordered list --> <ol> <li>First item</li> <li>Second item</li> </ol>
HTML Forms
Forms allow user input:
Form Example
<form action="/submit" method="post"> <label for="name">Name:</label> <input type="text" id="name" name="name"><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br> <input type="submit" value="Submit"> </form>
HTML5 Semantic Elements
Modern HTML includes semantic tags for better structure:
<header> - Introductory content<nav> - Navigation links<main> - Main content<section> - Thematic grouping<article> - Independent content<footer> - Footer contentPractice Exercise
Create a Simple Page
Try creating a page with:
- A main heading
- Two paragraphs
- An image
- A link to another page
- An unordered list
<!DOCTYPE html> <html> <head> <title>Practice Page</title> </head> <body> <!-- Your code here --> </body> </html>
