Setup and Structure
3.1 Getting Started
To write HTML, you only need:
• A text editor (e.g., VS Code, Sublime, Notepad).
• A web browser (e.g., Chrome, Firefox, Safari).
Save your file with the .html extension (like index.html), then open it in a browser.
• A text editor (e.g., VS Code, Sublime, Notepad).
• A web browser (e.g., Chrome, Firefox, Safari).
Save your file with the .html extension (like index.html), then open it in a browser.
3.2 Basic HTML Document Structure
example.html
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>My First HTML Page</title>
6 </head>
7 <body>
8 <h1>Hello World</h1>
9 <p>This is a basic HTML structure.</p>
10 </body>
11</html>🔍 Breaking It Down
1. <!DOCTYPE html> → tells the browser we're using HTML5.
2. <html> → the root element, everything goes inside.
3. <head> → contains metadata (title, encoding, links, scripts, styles).
4. <title> → shows the page title in the browser tab.
5. <body> → contains everything visible to users (text, images, links, etc.).
3.3 Pro Tips
• Always include <!DOCTYPE html> at the top for modern standards.
• Use UTF-8 encoding (<meta charset="UTF-8">) to support all languages.
• Keep only one <h1> per page for SEO and accessibility.
• Use UTF-8 encoding (<meta charset="UTF-8">) to support all languages.
• Keep only one <h1> per page for SEO and accessibility.
3.4 Key Takeaways
• Every HTML page follows a head + body structure.
• <!DOCTYPE html> = tells the browser it's HTML5.
• <head>= information about the page, <body> = visible content.
• Save files with .html and open in a browser to run them.
• <!DOCTYPE html> = tells the browser it's HTML5.
• <head>= information about the page, <body> = visible content.
• Save files with .html and open in a browser to run them.