1. Understanding the Basic HTML Structure
Every HTML page follows a standard structure. Below is a simple HTML boilerplate that serves as the foundation for any webpage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My First Web Page!</h1>
<p>This is my first experience writing an HTML page.</p>
</body>
</html>
Explanation of the Structure
<!DOCTYPE html>– Declares that the document is written in HTML5.<html>– The root element that contains all other elements.<head>– Contains metadata such as the title and character set.<meta charset="UTF-8">– Ensures proper text encoding for all characters.<meta name="viewport" content="width=device-width, initial-scale=1.0">– Makes the page responsive for mobile devices.<title>– Sets the title of the webpage (visible in the browser tab).<body>– Contains the visible content of the page.<h1>– A heading tag that represents the main title.<p>– A paragraph tag used for text content.
2. Creating and Saving an HTML File
- Open VS Code (or your preferred HTML editor).
- Create a new folder (e.g.,
MyWebsite). - Inside the folder, create a file named
index.html. - Copy and paste the above HTML structure into the file.
- Save the file (
Ctrl + SorCmd + S).
3. Viewing the HTML Page in a Browser
Method 1: Open Directly in Browser
- Navigate to the folder where
index.htmlis saved. - Right-click on the file and select Open With > Chrome/Firefox/Edge.
Method 2: Use Live Server in VS Code (Recommended)
- Install the Live Server extension in VS Code.
- Right-click on
index.htmland select Open with Live Server. - The page will open in your default browser and automatically refresh when changes are saved.
4. Adding More Content to Your Page
Headings (<h1> to <h6>)
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Heading</h3>Paragraphs (<p>)
<p>This is a paragraph of text.</p>
<p>Another paragraph with more content.</p>Lists (<ul> and <ol>)
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
</ol>Try it Yourself:
