Introduction to HTML: Structuring Your First Webpage
Learn the basic structure of an HTML document and create a simple webpage using headings, paragraphs, and lists.
A text editor (e.g., Notepad++, VS Code, or Sublime Text)
A web browser (e.g., Google Chrome, Mozilla Firefox)
Open your text editor.
Click > to create a new document.
Save the file (if using Notepad, Make sure to select “All Files” as the file type).
Type the following code into your text editor:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My First Webpage</h1>
</body>
</html>
<!DOCTYPE html> → Declares the document as an HTML5 file.
<html lang=”en”> → Starts the HTML document and specifies English as the language.
<head> → Contains metadata like the character encoding and title of the page.
<meta charset=”UTF-8″> → Ensures special characters are displayed correctly.
<title> → Sets the title of the webpage (shown in the browser tab).
<body> → Contains the content of the webpage.
<h1> → A heading element (largest heading).
Modify the <body> section to include headings and paragraphs:
<body>
<h1>Welcome to My First Webpage</h1>
<h2>About This Page</h2>
<p>This is a simple HTML webpage created as a beginner exercise.</p>
<h2>Why Learn HTML?</h2>
<p>HTML is the foundation of all webpages. It helps structure content using elements like headings, paragraphs, and lists.</p>
</body>
<h2> → A subheading (smaller than <h1>).
<p> → A paragraph element used for text content.
Extend your webpage by adding lists:
<body>
<h1>Welcome to My First Webpage</h1>
<h2>About This Page</h2>
<p>This simple HTML webpage was created as a beginner exercise.</p>
<h2>Why Learn HTML?</h2>
<p>HTML is the foundation of all web pages. It helps structure content using elements like headings, paragraphs, and lists.</p>
<h2>Topics Covered:</h2>
<ul>
<li>HTML Structure</li>
<li>Headings and Paragraphs</li>
<li>Lists</li>
</ul>
<h2>Steps to Learn HTML:</h2>
<ol>
<li>Understand the basic structure.</li>
<li>Learn about headings and paragraphs.</li>
<li>Practice creating lists.</li>
</ol>
</body>
<ul> → Creates an (bullets).
<li> → Defines each list item inside the list.
<ol> → Creates an (numbers).
Click > in your text editor.
Open your file explorer and navigate to the saved file.
Double-click the file to open it in your web browser.
You should see a structured webpage with headings, paragraphs, and lists.
You have successfully created a basic HTML webpage! You learned:
✅ How to structure an HTML document
✅ How to use headings (<h1> to <h6>)
✅ How to create paragraphs (<p>)
✅ How to make ordered (<ol>) and unordered (<ul>) lists
