Embarking on the journey to build your first website is an exciting milestone in web development. This comprehensive tutorial guides beginners through creating a simple, functional website using HTML. No prior experience is required—just a text editor and a web browser. By the end, you'll have a complete webpage ready to showcase.[1][2][6]
Why Learn HTML? HTML, or HyperText Markup Language, forms the backbone of every website. It structures content like text, images, and links, making pages readable by browsers. Mastering HTML is the first step toward full-stack web development, and it's easier than you think.[1][5][6]
Prerequisites: What You'll Need
- A text editor like Notepad (Windows), TextEdit (Mac), or free options such as Visual Studio Code or Sublime Text.
- Any modern web browser (Chrome, Firefox, Edge, or Safari).
- No installations required—everything runs locally.[1][2][3]
Step 1: Create Your First HTML File
Start by opening your text editor. Create a new file and save it immediately with a .html extension, e.g., index.html. This tells your computer it's an HTML document.[2][3]
Every HTML page begins with a basic structure called the DOCTYPE declaration, followed by the root <html> element. Add this template:
<!DOCTYPE html>[2][6]
<html>
<head>
<title>My First Website</title>
</head>
<body>
</body>
</html>
Save the file, then double-click it to open in your browser. You'll see a blank page with "My First Website" in the tab—a successful start![3][6]
Understanding the HTML Boilerplate
- <!DOCTYPE html>: Declares the document as HTML5, ensuring proper rendering.[2]
- <html>: The root element wrapping everything.
- <head>: Contains metadata like the page title, which appears in browser tabs.[3][7]
- <body>: Holds visible content like text and images.[2][5]
Step 2: Add Headings and Paragraphs
Inside the <body>, add content. Headings range from <h1> (largest, most important) to <h6> (smallest). Paragraphs use <p>.[1][5]
Update your <body>:
<h1>Welcome to My First Website</h1>[1][3][5]
<p>This is my <strong>very first</strong> webpage. I'm thrilled to share it with you.</p>
<h2>What You'll Learn Here</h2>
<p>In this tutorial, we'll cover HTML basics step by step.</p>
Save and refresh your browser. Notice how <strong> makes text bold for emphasis—perfect for key phrases.[5]
Pro Tip: Use headings semantically for accessibility and SEO. Search engines prioritize well-structured content.[9]
Step 3: Formatting Text with Inline Elements
Enhance text with inline tags that don't create new lines:
- <strong> or <b>: Bold text.
- <em> or <i>: Italicized (emphasized) text.
- <br>: Line break without a new paragraph.
- <hr>: Horizontal rule (line divider).[1][3]
Example:
<p>This text is <strong>bold</strong> and this is <em>italic</em>.</p>[3][5]
<p>Line one<br>Line two.</p>
<hr>
These elements are nested inside paragraphs, improving readability without clutter.[1]
Step 4: Creating Lists
Lists organize information effectively. Use unordered (<ul>) for bullets and ordered (<ol>) for numbers.[1][9]
Add this to your body:
<