Create Your First Webpage
Let's get started with HTML by creating a simple webpage. No prior coding experience is required!
What You'll Need
- A text editor
Any basic text editor like Notepad (Windows), TextEdit (Mac), or VS Code will work.
- A web browser
Chrome, Firefox, Safari, or Edge – any modern browser will display your HTML.
Creating Your First HTML Page
Step 1: Create an HTML File
Create a new file in a text editor like Notepad, VS Code, or TextEdit. Save it with a .html extension, for example, 'index.html'.
Step 2: Add the Basic HTML Structure
Every HTML document needs a specific structure. Copy the template code provided below.
HTML Template:
<!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>Hello, World!</h1>
<p>This is my first webpage.</p>
<h2>About Me</h2>
<p>I'm learning HTML!</p>
<h2>My Favorite Things</h2>
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
<p>Visit <a href="https://www.example.com">this website</a> to learn more.</p>
</body>
</html>Step 3: Save Your File
Save your file again to make sure all your code is preserved.
Step 4: Open in a Web Browser
Find your HTML file in your file explorer and double-click it. It will open in your default web browser.
Preview: What You'll See
Hello, World!
This is my first webpage.
About Me
I'm learning HTML!
My Favorite Things
- Item one
- Item two
- Item three
Visit this website to learn more.
Understanding Your First HTML Code
<!DOCTYPE html>
Tells the browser you're using HTML5, the current version of HTML.
<html lang="en">...</html>
The root element that contains all other HTML elements. The lang attribute specifies English language.
<head>...</head>
Contains meta-information about the document, like the character encoding, viewport settings, and the page title.
<body>...</body>
Contains all the content that will be visible on the page.
<h1>, <h2>, etc.
Heading elements that define titles and subtitles. The number indicates the level of importance (h1 is most important).
<p>
Defines a paragraph of text.
<ul> and <li>
Create an unordered list (bullet points) with list items.
<a href="...">
Creates a hyperlink to another webpage. The href attribute specifies the destination URL.
Tools to Help You Code HTML
While you can use any basic text editor to write HTML, these specialized tools can make the process easier:
Visual Studio Code
Free, powerful code editor with HTML syntax highlighting, autocompletion, and live preview extensions.
Features:
- •Syntax highlighting
- •Emmet abbreviations
- •HTML validation
- •Extensions for live preview
Sublime Text
Lightweight, fast text editor popular among web developers for its speed and simplicity.
Features:
- •Fast performance
- •Distraction-free mode
- •Multiple selections
- •Command palette
CodePen
Online editor that lets you write HTML, CSS, and JavaScript without installing anything.
Features:
- •No installation needed
- •Instant preview
- •Share your code easily
- •Import external libraries
Replit
Browser-based coding environment with HTML templates and live collaboration features.
Features:
- •Built-in hosting
- •Multiplayer coding
- •Complete development environment
- •Templates for beginners
Try It Yourself Challenge
Customize Your First Webpage
Now that you've created your first HTML page, try these modifications to make it your own:
- Change the page title to something personal
- Add your own name and information to the "About Me" section
- Replace the "My Favorite Things" list with your actual favorite things
- Add another section with a new heading of your choice
- Change the link to point to a website you actually want to share
After making these changes, save the file and refresh your browser to see your customized webpage!