By the end of this lesson, you will be able to understand what HTML is and why it exists, identify the basic structure of an HTML document, recognize common HTML tags and understand their purpose, and create your first simple HTML page. These skills form the foundation for all web development work.
No prior coding experience is required for this lesson. You only need a text editor (like Notepad, TextEdit, or VS Code) and a web browser (Chrome, Firefox, Safari, or Edge) installed on your computer.
HTML stands for HyperText Markup Language. This name tells us something important about what HTML does. The word "markup" indicates that HTML doesn't create the content itself, but rather marks up or labels content to tell web browsers how to display and organize that content.
Think of HTML like a blueprint for a building. Just as a blueprint provides structure and instructions for constructing a building, HTML provides structure to web pages. It tells browsers where headings go, where paragraphs belong, and how content should be organized.
When you visit a website, your web browser receives HTML code and interprets it to display the page you see. Without HTML, browsers would have no way to understand:
HTML acts as the universal language that allows any browser on any device to display web content in a consistent, structured way. Whether you're using Chrome, Firefox, Safari, or Edge, they all understand HTML and can render your pages correctly.
Understanding HTML matters because it forms the foundation of every website you see on the internet. Whether you're viewing:
HTML is always present, working behind the scenes to organize and structure the content. Learning HTML gives you the ability to:
HTML is an essential skill for web development, content creation, and digital communication. Once you understand HTML, you can build on this knowledge to learn CSS for styling and JavaScript for interactivity.
Before diving into writing HTML code, it's important to understand that HTML and CSS are simply text files saved on your computer. These files contain instructions written in special languages that web browsers can read and interpret.
Just like you might create a document in a word processor and save it as a .docx file, you create web pages by writing HTML code and saving it as an .html file. When you create an HTML file, you're creating a plain text file with special formatting.
The file extension tells your computer what type of file it is:
.html - HTML files containing webpage structure.css - CSS files containing styling instructionsThese extensions are important because they help your computer identify which program should open the file. When you double-click an HTML file, your computer knows to open it in a web browser rather than a text editor.
The process of working with HTML and CSS files follows a simple, repeatable workflow:
.html or .css)This cycle of editing → saving → refreshing is fundamental to web development. You'll use this workflow constantly as you build websites.
Understanding this file-based workflow matters because it shows that web development doesn't require special software or complex setup. You can create HTML files using:
The code you write is just text, saved in a file that browsers know how to interpret. This simplicity is one of HTML's greatest strengths - you don't need expensive software or complicated setup to get started.
This example demonstrates the complete process of creating an HTML file, from opening a text editor to viewing it in a browser. Following these steps helps you understand how HTML files work on your computer.
Start by opening a text editor on your computer. You have several options:
Create a new file in your text editor. Type or copy the following simple HTML code into the file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First File</title>
</head>
<body>
<h1>Hello from my HTML file!</h1>
</body>
</html>Now save this file. Choose File → Save from your editor's menu. When the save dialog appears:
"my-website" if you don't have one yet"index.html" - make sure to include the .html extensionThis extension is crucial because it tells your computer this is an HTML file. Without it, your computer won't know to open it in a browser.
After saving, navigate to the folder where you saved your file using your computer's file explorer (Windows) or Finder (Mac). You should see a file named "index.html".
Notice: The file might have a browser icon, indicating your computer recognizes it as a web page. Double-click this file, and it should open in your default web browser, displaying "Hello from my HTML file!" as a heading.
Now let's practice the edit-save-refresh workflow. This is the cycle you'll use constantly when building websites:
"Hello from my HTML file!" to "I changed this text!"You should now see "I changed this text!" instead of the original heading.
Important reminder: Your browser doesn't automatically detect file changes, so you must refresh to see updates. This cycle of editing → saving → refreshing is fundamental to web development.
Every HTML document follows a specific structure that tells the browser what type of document it is and how to interpret the content. This structure consists of several key elements that work together to create a valid web page.
The first line of every HTML document should be a document type declaration, written as:
<!DOCTYPE html>This tells the browser that it's reading an HTML5 document, which is the current standard. While browsers are often forgiving if this line is missing, including it ensures your page will display correctly across all browsers and devices.
After the document type declaration, every HTML document is wrapped in an <html> tag. This tag tells the browser where the HTML content begins and ends.
Inside the <html> tag, there are two main sections:
<head> section: Contains information about the document that isn't displayed on the page itself, such as:
<body> section: Contains all the visible content that users will see when they visit your page<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first HTML page.</p>
</body>
</html>The lang="en" attribute in the opening <html> tag specifies that the document is written in English. This helps:
The <meta charset="UTF-8"> line in the head section tells the browser which character encoding to use. UTF-8 ensures that:
This is essential for any page that might include content beyond basic English letters and numbers.
HTML uses tags to mark up content. Tags are written using angle brackets (< and >), with most tags coming in pairs:
< followed by the tag name and ends with >/ before the tag nameThe content that appears between the opening and closing tags is what the browser will display or apply that tag's meaning to.
For example, if you want to create a paragraph, you would use the <p> tag:
<p>This is a paragraph.</p>To mark where your paragraph begins, you write <p>, then type your paragraph content, and finally close the paragraph with </p>. The browser interprets this and displays your text as a paragraph with appropriate spacing.
This pairing of opening and closing tags creates what we call an HTML element. An element consists of:
Some tags are self-closing, meaning they don't require a closing tag. These are typically used for elements that don't contain content, such as:
<br> creates a line break<img> displays an image<hr> creates a horizontal lineIn HTML5, you can write self-closing tags as <br> or <br /> - both work the same way. The /> syntax is optional but some developers prefer it for clarity.
Understanding tags is fundamental because every piece of content on a web page is marked up with tags. These tags don't just affect how content looks visually, but more importantly, they provide semantic meaning.
For example, when you use an <h1> tag, you're not just making text large and bold - you're declaring that this text is the main heading of the page. This semantic meaning is important for:
By using the right tags for the right content, you create websites that are not only visually appealing but also meaningful to both humans and machines.
While HTML has many tags available, certain tags appear in almost every web page you'll create. Understanding these fundamental tags gives you the ability to create meaningful, well-structured web pages.
Heading tags, written as <h1> through <h6>, are used to create headings of different importance levels:
<h1> - Most important heading (main page title)<h2> - Section headings<h3> - Subsections<h4> through <h6> - Further subdivisionsThe <h1> tag represents the most important heading on the page and is typically used for the main title. Each subsequent number represents a heading of lesser importance, allowing you to create a hierarchy of information.
Important: You should use only one <h1> per page, as this represents the main topic or title of the entire page. Using headings in a logical order helps users and search engines understand the structure of your content.
The paragraph tag, written as <p>, is used to wrap blocks of text content. When the browser encounters a paragraph tag, it displays the text with appropriate spacing before and after, creating visual separation between different paragraphs.
<p>This is one paragraph.</p>
<p>This is another paragraph.</p>This makes your content more readable and organized. Every paragraph you write should be wrapped in opening and closing paragraph tags.
The anchor tag, written as <a>, creates hyperlinks that allow users to navigate to other pages or sections. The anchor tag requires an attribute called href that specifies the destination of the link.
Attributes provide additional information about HTML elements and are written inside the opening tag. For a link, you write the destination URL in the href attribute:
<a href="https://example.com">Click here</a>The text between the opening and closing anchor tags (Click here in this example) is what users will see and click on.
Note: Links are fundamental to web development and there's much more to learn about them. For a complete guide to working with links, including navigation menus, link styling, and best practices, see Lesson 10: Working with Links.
You'll encounter several other essential tags frequently:
<img> - Displays pictures (requires a src attribute with the image file path)<strong> - Emphasizes important text (typically displays as bold)<em> - Emphasizes text (typically displays as italic)<ul> (unordered list) and <ol> (ordered list) with <li> (list items)Each of these tags serves a specific purpose in marking up your content meaningfully. As you practice, you'll learn when to use each tag appropriately.
Note: Images are an important part of modern web pages. For a comprehensive guide to adding images, including file formats, accessibility with alt text, sizing, positioning, and responsive images, see Lesson 09: Working with Images.
This example demonstrates how to use several common HTML tags together to create a simple but complete web page. Seeing these tags work together helps you understand how they combine to create structured content.
Create a new HTML file and add the basic document structure we learned earlier. Inside the <body> section, let's add content using different tags.
Start with: An <h1> tag for the main title of your page. Following best practices, use only one <h1> per page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Learning Journey</title>
</head>
<body>
<h1>Learning Web Development</h1>
<h2>Getting Started</h2>
<p>I'm learning HTML and CSS to build my own websites. This is exciting!</p>
<h2>What I've Learned</h2>
<p>So far, I understand how HTML tags work. The <strong>strong</strong> tag makes text bold, and the <em>emphasis</em> tag makes text italic.</p>
<p>Visit <a href="https://www.example.com">this example website</a> to see more.</p>
</body>
</html>Save this file with an .html extension and open it in your browser. You'll see:
<h2> headings: "Getting Started" and "What I've Learned"<strong> text appearing bold<em> text appearing in italicsTry modifying:
<h3>, <h4>)Each time you make a change, save the file and refresh your browser to see the results. This practice helps you understand how each tag affects the display of your content.
Creating your first HTML page involves several steps, and understanding why each step matters will help you remember the process. We'll create a simple page that displays a greeting and a short paragraph.
Try it yourself: Edit the code below! Modify the heading text or add a new paragraph. You'll see your changes appear instantly in the live preview.
Instructions: Edit the HTML and CSS code in the panels above. As you type, you'll see your changes appear in the live preview. Use the Reset button to start over, or Show Solution to see a complete example with additional elements.
First, open a text editor on your computer. You can use:
Create a new file and save it with the name "my-first-page.html". The .html extension is important because it tells your computer and browser that this file contains HTML code.
Now we'll write the HTML structure. Follow this order:
<!DOCTYPE html> on the first line - this tells the browser we're using HTML5<html lang="en"> tag with the language attribute<head> section, which contains metadata about our page:
<meta charset="UTF-8"> tag for character encoding<title> tag with text that describes your page (this appears in the browser tab)</head>After closing the head section, open the <body> section where your visible content will go:
<h1> heading tag with a greeting message<p> paragraph tag containing a sentence about what you're learning</body>, then </html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>I'm learning HTML and this is my first web page.</p>
</body>
</html>To view your page, navigate to the folder where you saved your HTML file using your computer's file explorer (Windows) or Finder (Mac). Double-click the file, and it should open in your default web browser.
You should see your heading and paragraph displayed on the page. If something doesn't appear correctly:
.html extensionThis simple example demonstrates the fundamental structure that every HTML document follows. As you continue learning, you'll add more content and tags, but the basic structure will remain constant:
<!DOCTYPE html>)<html>)<head>)<body>)This structure is the foundation for all your HTML pages, no matter how complex they become.
Create an HTML page about a topic that interests you. Your page should include:
<head> section<h1> tag<p> tags<h2> somewhere in your content<a> anchor tagSave your file with a .html extension and open it in a web browser to see how it looks.
When you're finished, compare your code structure to the worked examples above. Make sure:
<!DOCTYPE html>, <html>, <head>, and <body>If something doesn't display correctly: Check that you've closed all your tags and that your file has the .html extension. Remember to save your file and refresh your browser after making changes.
HTML provides the structural foundation for all web pages. It uses tags to mark up content, giving browsers instructions on how to organize and display information.
Every HTML document follows a consistent structure:
<!DOCTYPE html>)<html> element containing <head> and <body> sectionsThe tags you've learned in this lesson form the building blocks you'll use in every web page you create:
<h1> through <h6> for creating information hierarchy<p> for organizing text content<a> for navigation and connecting pagesHTML is about meaning and structure, not visual appearance. The visual styling comes later when we learn CSS. Focus on using the right tags for the right content - this creates websites that are accessible, semantic, and well-organized.
Understanding why HTML exists and how these basic tags work prepares you to build more complex pages as you continue learning. In Lesson 02, you'll learn about semantic HTML, which involves choosing the most meaningful tags for your content.
Once you're comfortable creating basic HTML pages with headings, paragraphs, and links, you're ready to move on to Lesson 02, which covers semantic HTML. Semantic HTML involves choosing the most meaningful tags for your content, which creates better structure and improves accessibility for all users.
Mozilla Developer Network. "HTML: HyperText Markup Language." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/HTML
Mozilla Developer Network. "HTML Elements Reference." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/HTML/Element
W3Schools. "HTML Tutorial." W3Schools. https://www.w3schools.com/html/
The Odin Project. "HTML Foundations." The Odin Project Curriculum. https://www.theodinproject.com/paths/foundations/courses/foundations