Creating Your First HTML Page
Learning Objectives
- Understand HTML structure and semantics
- Create well-formed HTML documents
- Use HTML tags effectively
- Build accessible web content
The Building Blocks of the Web
HTML (HyperText Markup Language) is the fundamental language of the web. Every website you've ever visited is built with HTML at its core. Today, we'll learn how to create our very first HTML page and understand its basic structure.
The Blueprint Analogy
Think of HTML as the blueprint for a building:
- HTML elements are like the structural components (walls, doors, windows)
- Tags define what each element is and how it should function
- Attributes provide additional details (like specifying the size of a window)
- The content between tags is what visitors actually see (like the furniture inside rooms)
Just as architects use standardized symbols in blueprints that contractors understand, web developers use standardized HTML tags that browsers understand how to display.
Understanding HTML Structure
Anatomy of an HTML Element
The Parts of an HTML Element:
- Opening Tag: Tells the browser "an element starts here"
- Content: What appears on the webpage
- Closing Tag: Tells the browser "this element ends here"
- Attributes: Additional information about the element
- Attribute Values: Specific settings for the attributes
Examples of HTML Elements:
<h1>This is a heading</h1>- A level 1 heading<p>This is a paragraph.</p>- A paragraph of text<img src="photo.jpg" alt="A photo">- An image (note: no closing tag needed)<a href="https://example.com">Visit Example</a>- A link to another website
Basic HTML Document Structure
graph TD
A["<!DOCTYPE html>"] --> B["<html>"]
B --> C["<head>"]
B --> D["<body>"]
C --> E["<title>"]
C --> F["<meta>"]
C --> G["<link>"]
D --> H["<header>"]
D --> I["Content Elements"]
D --> J["<footer>"]
I --> K["<h1>, <p>, <img>, etc."]
Essential Parts of an HTML Document:
- <!DOCTYPE html> - Tells the browser this is an HTML5 document
- <html> - The root element that contains all other elements
- <head> - Contains meta-information about the document (not visible on the page)
- <title> - Sets the page title shown in the browser tab
- <meta> - Provides additional information about the document
- <body> - Contains all the visible content of the webpage
The Book Analogy
An HTML document is like a book:
- <!DOCTYPE> is like the book format specification (hardcover, paperback, etc.)
- <html> is like the entire book from cover to cover
- <head> is like the information on the cover and copyright page
- <title> is like the title printed on the spine and cover
- <meta> tags are like the ISBN, publisher information, and edition notes
- <body> is like all the actual content inside the book
Creating Your First HTML Page
What You'll Need
- A text editor (we're using VS Code)
- A web browser (Chrome, Firefox, Edge, Safari, etc.)
- That's it! No special software required
Step-by-Step Guide
Step 1: Create a New File
- Open VS Code
- Go to File > New File
- Save the file as
index.html(File > Save) - Choose a location where you'll remember to find it
Why "index.html"?
Web servers automatically look for a file named "index.html" when a user visits a directory. It's the default homepage for websites.
Step 2: Add the Basic HTML Structure
Type or copy the following code into your file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first web page.</p>
</body>
</html>VS Code Shortcut!
In VS Code, you can type ! and press Tab to automatically generate this basic HTML structure!
Step 3: Save Your File
- Press Ctrl+S (Windows/Linux) or Cmd+S (Mac) to save
- Make sure it's saved with the .html extension
Step 4: View Your HTML Page
- Find your saved file in your file explorer/finder
- Double-click it to open in your default browser
- Alternatively, right-click and choose "Open with" to select a specific browser
VS Code Live Server!
If you've installed the Live Server extension in VS Code, you can right-click your HTML file in VS Code and select "Open with Live Server" to see your page with automatic refresh when you make changes.
Step 5: Make Some Changes
- Go back to VS Code
- Modify some of the text between the tags
- Save the file again
- Refresh your browser to see the changes
Congratulations!
You've just created your first HTML page! While it may be simple, every website on the internet starts with these same basic building blocks. Even the most complex websites are built upon this foundation.
Essential HTML Elements for Your First Page
Categories of HTML Elements
Text Elements
<h1>through<h6>- Headings (h1 is most important, h6 is least)<p>- Paragraphs<br>- Line break<strong>- Bold text (semantically important)<em>- Italic text (emphasized)<span>- Inline container for text
Example:
<h1>My Portfolio</h1>
<h2>About Me</h2>
<p>Hello! I'm a <strong>web development</strong> student learning <em>HTML, CSS, and JavaScript</em>.</p>List Elements
<ul>- Unordered list (bullet points)<ol>- Ordered list (numbered)<li>- List item
Example:
<h2>My Skills</h2>
<ul>
<li>HTML</li>
<li>CSS (learning)</li>
<li>JavaScript (soon)</li>
</ul>
<h2>My Learning Path</h2>
<ol>
<li>Master HTML basics</li>
<li>Learn CSS styling</li>
<li>Study JavaScript for interactivity</li>
<li>Explore PHP and WordPress</li>
</ol>Link Elements
<a>- Anchor (hyperlink)
Example:
<p>Visit my <a href="projects.html">projects page</a> to see my work.</p>
<p>Check out <a href="https://developer.mozilla.org" target="_blank">MDN Web Docs</a> for more HTML resources.</p>Link Types:
- Relative links point to pages within your own site (like "projects.html")
- Absolute links point to external websites (like "https://example.com")
- Adding
target="_blank"makes the link open in a new tab
Image Elements
<img>- Image
Example:
<img src="profile.jpg" alt="My profile picture" width="300" height="200">Important Attributes:
src- The image file path (required)alt- Alternative text description (required for accessibility)widthandheight- Dimensions in pixels (optional but recommended)
Structural Elements
<div>- Generic container (block-level)<header>- Page or section header<nav>- Navigation links<main>- Main content area<section>- Standalone section<article>- Independent content<aside>- Sidebar content<footer>- Page or section footer
Example:
<header>
<h1>My Portfolio</h1>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="projects.html">Projects</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<main>
<section id="about">
<h2>About Me</h2>
<p>I'm learning web development.</p>
</section>
<section id="projects">
<h2>My Projects</h2>
<article class="project">
<h3>Project 1</h3>
<p>Description of project 1.</p>
</article>
</section>
</main>
<footer>
<p>© 2025 My Portfolio</p>
</footer>Building a More Complete First Page
A Personal Profile Page
Let's create a more comprehensive example that you can use as a starting point for your homework:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Development Journey</title>
</head>
<body>
<header>
<h1>My Web Development Journey</h1>
<nav>
<a href="#about">About Me</a> |
<a href="#goals">My Goals</a> |
<a href="#progress">Progress</a> |
<a href="#resources">Resources</a>
</nav>
</header>
<main>
<section id="about">
<h2>About Me</h2>
<img src="profile.jpg" alt="My profile picture" width="200">
<p>Hello! My name is [Your Name]. I'm a student in the PHP WordPress Development course. I'm excited to learn how to build professional websites!</p>
<p>When I'm not coding, I enjoy [your hobbies or interests].</p>
</section>
<section id="goals">
<h2>My Goals for This Course</h2>
<ul>
<li>Master HTML, CSS, and JavaScript fundamentals</li>
<li>Understand PHP programming</li>
<li>Learn WordPress development</li>
<li>Build a portfolio website</li>
<li>[Add your personal goals here]</li>
</ul>
</section>
<section id="progress">
<h2>My Learning Progress</h2>
<ol>
<li>
<strong>Week 1:</strong>
<ul>
<li>Set up development environment ✓</li>
<li>Created first HTML page ✓</li>
<li>Learning HTML basics...</li>
</ul>
</li>
<li>
<strong>Week 2:</strong>
<ul>
<li>JavaScript fundamentals</li>
<li>Introduction to PHP</li>
</ul>
</li>
<!-- More weeks can be added as the course progresses -->
</ol>
</section>
<section id="resources">
<h2>Helpful Resources</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/" target="_blank">MDN Web Docs</a></li>
<li><a href="https://www.w3schools.com/" target="_blank">W3Schools</a></li>
<li><a href="https://css-tricks.com/" target="_blank">CSS-Tricks</a></li>
<li><a href="https://wordpress.org/documentation/" target="_blank">WordPress Documentation</a></li>
</ul>
</section>
</main>
<footer>
<p>© 2025 [Your Name] - PHP WordPress Development Course</p>
<p><a href="mailto:your.email@example.com">Contact Me</a></p>
</footer>
</body>
</html>How Your Page Will Look
Even without CSS styling, your HTML page will have structure and hierarchy. The browser applies default styling to HTML elements, so your page won't be completely plain.
Testing in Different Browsers
Why Test in Multiple Browsers?
Different browsers may render HTML slightly differently. While modern browsers have become more standardized, it's still a good practice to check your page in various browsers to ensure it looks and functions as expected for all users.
Popular Browsers to Test With:
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
- Safari (if you have access to a Mac)
For this first exercise, your simple HTML page should look very similar across all browsers. As we add CSS and JavaScript later, browser differences will become more apparent.
Validating Your HTML
Why Validate Your HTML?
Even though browsers are forgiving and will try to display your page even with errors, valid HTML ensures:
- Better compatibility across browsers
- Improved accessibility for users with disabilities
- Easier maintenance and debugging
- Better search engine optimization (SEO)
How to Validate Your HTML
The W3C provides a free validation service:
- Visit the W3C Markup Validation Service
- Choose either:
- Validate by URI (if your page is online)
- Validate by File Upload (upload your HTML file)
- Validate by Direct Input (copy and paste your HTML code)
- Review any errors or warnings
- Fix the issues in your HTML code
- Validate again until all errors are resolved
Common HTML Validation Errors
- Missing or improperly nested tags
- Missing required attributes (like
altfor images) - Unclosed elements
- Using deprecated elements or attributes
- Improper character encoding
Homework Assignment
Your Task
Create an enhanced version of the HTML page we made today:
- Use the template provided in the "Building a More Complete First Page" section as a starting point
- Personalize it with your own information:
- Add your name, background, and reason for taking this course
- Include your specific goals for learning web development
- Add at least one real image of yourself, a hobby, or something that represents you
- Add any additional sections that you'd like to include
- Save the file as
index.html - Create a GitHub account if you haven't already
- Create a new repository named "php-wordpress-course"
- Upload your HTML file to your GitHub repository
Additional Learning Resources
Frequently Asked Questions
Do I need to memorize all HTML tags?
No! Even experienced developers regularly look up tags and their attributes. The most important thing is to understand the concept of HTML structure and know where to find references (like MDN Web Docs). You'll naturally memorize the most common tags through regular use.
Why doesn't my image show up?
The most common reasons for missing images are:
- Incorrect file path in the
srcattribute - The image file doesn't exist or has a different name
- The image file is in a different folder than you specified
Check your file paths carefully. For beginners, it's easiest to keep your images in the same folder as your HTML file.
Do spaces, tabs, and line breaks matter in HTML?
In most cases, no. Browsers ignore extra whitespace when rendering HTML. Multiple spaces, tabs, and line breaks are collapsed into a single space in the rendered output. This gives you freedom to format your code for readability without affecting how it appears on the page.
However, whitespace does matter within <pre> tags and when using the CSS white-space property.
When should I use divs vs. semantic elements?
Use semantic elements (<header>, <nav>, <section>, etc.) whenever they accurately describe the content's purpose. These elements improve accessibility and SEO. Use <div> elements when you need a generic container that doesn't have specific semantic meaning.