Introduction to Web Development & HTML Fundamentals
From the Web Development 1 curriculum
Introduction to Web Development & HTML Fundamentals
TL;DR
Web development is about building websites, and it involves three main parts: structure, style, and interactivity. HTML is the backbone, defining the content and structure of every webpage you see. Learning HTML is your first step to creating anything on the web.
1. The Mental Model
Think of a webpage like a house. HTML is the basic blueprint and framework – it defines where the walls, doors, and windows go. It doesn't care about the paint color or furniture; it just sets up the core structure.
2. The Core Material
Web development is usually split into three big areas:
- Structure (HTML): This is the skeleton of your webpage. It tells the browser what content is there (text, images, links) and how it's organized.
- Style (CSS): This is like the interior designer. CSS makes your page look good – colors, fonts, layouts, animations.
- Interactivity (JavaScript): This is the brain. JavaScript adds dynamic behavior, like pop-up menus, form validation, or games.
For now, we're focusing on HTML. It's the essential foundation for everything else.
What is HTML?
Photo by César Gaviria on Pexels
HTML stands for HyperText Markup Language. You use "tags" to mark up different parts of your content, telling the browser what each part is. For example, <h1> means "this is a main heading," and <p> means "this is a paragraph."
Basic HTML Document Structure
Photo by Pixabay on Pexels
Every HTML document follows a standard structure. It's like having a foundation, walls, and a roof for your house.
<!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, Web!</h1>
<p>This is my very first paragraph.</p>
</body>
</html>
Let's break that down:
<!DOCTYPE html>: This isn't an HTML tag, but a declaration. It tells the browser you're using HTML5, the latest version. Always put it at the very top.<html lang="en">: This is the root element that wraps all the content on your page. Thelang="en"part is an "attribute" that helps search engines and screen readers understand the page's primary language.<head>: This section holds meta-information about your page, like its title (which appears in the browser tab) and links to stylesheets. What's inside<head>usually isn't directly visible on the page itself.<meta charset="UTF-8">: Essential for displaying characters correctly (like emojis or special accents).<meta name="viewport" content="width=device-width, initial-scale=1.0">: Helps your page look good on different screen sizes (mobile, desktop).<title>My First Webpage</title>: The text that shows up in the browser tab or window title bar.
<body>: This is where all your visible content goes – headings, paragraphs, images, links, etc. Everything you want users to see on your webpage lives here.
Common HTML Elements (Tags)
Photo by César Gaviria on Pexels
HTML uses elements, which are usually made of an opening tag, content, and a closing tag. For example, <p>My content</p>. Some elements are "self-closing" and don't need a separate closing tag, like <img> for images.
Here are some tags you'll use constantly:
<h1>,<h2>,<h3>, etc.: Heading elements.<h1>is the most important heading,<h6>the least.<p>: Paragraph. For blocks of text.<a>: Anchor. Used for hyperlinks. You add anhrefattribute to specify the link's destination:<a href="https://google.com">Go to Google</a>.<img>: Image. Self-closing. You use thesrcattribute to point to the image file andaltfor alternative text (important for accessibility if the image can't load). Example:<img src="my-image.jpg" alt="A descriptive image text">.<ul>: Unordered list. Creates a bulleted list.<li>: List item. Used inside<ul>or<ol>.
<ol>: Ordered list. Creates a numbered list.<li>: List item.
<div>: A generic container. Great for grouping content for styling later with CSS.<span>: A generic inline container. Useful for styling small pieces of text within a larger block.
Here's a diagram showing the basic HTML document hierarchy:
graph TD
A["Web Browser"] --> B["HTML Document (index.html)"]
B --> C["<!DOCTYPE html>"]
B --> D["<html> (lang='en')"]
D --> E["<head> (metadata)"]
E --> F["<meta charset='UTF-8'>"]
E --> G["<meta viewport>"]
E --> H["<title>"]
D --> I["<body> (visible content)"]
I --> J["<h1>Heading</h1>"]
I --> K["<p>Paragraph</p>"]
I --> L["<a href='...'>Link</a>"]
I --> M["<img>"]
3. Worked Example
Let's create a simple HTML page for a fictional "About Me" section.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Me - Your Name</title>
</head>
<body>
<h1>Hi, I'm [Your Name]!</h1>
<p>
I'm just starting my journey into web development, and I'm really excited
to learn how to build amazing things for the internet.
</p>
<h2>My Hobbies</h2>
<ul>
<li>Reading fantasy novels</li>
<li>Playing board games</li>
<li>Hiking with my dog</li>
</ul>
<h2>My Favorite Websites</h2>
<p>Here are a few places I often visit:</p>
<ol>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML">MDN Web Docs (HTML)</a></li>
<li><a href="https://youtube.com">YouTube</a></li>
<li><a href="https://github.com">GitHub</a></li>
</ol>
<p>
I'm looking forward to making my own cool websites soon!
You can connect with me on <a href="https://linkedin.com/in/yourprofile" target="_blank">LinkedIn</a>.
</p>
</body>
</html>
If you save this code as index.html and open it in your browser, you'll see a basic webpage with a main title, a paragraph, a bulleted list of hobbies, a numbered list of links, and another paragraph with a link that opens in a new tab (target="_blank").
4. Key Takeaways
- HTML is the foundational language for creating the structure and content of all web pages.
- Every HTML document needs a
<!DOCTYPE html>declaration and<html>,<head>, and<body>tags. - The
<head>section contains meta-information not directly visible on the page, like the title. - The
<body>section contains all the visible content you want users to see. - HTML uses opening and closing tags (like
<p>...</p>) to define elements, or self-closing tags (like<img>). - Attributes like
href(for links) andsrc(for images) provide extra information about an element. - Learning common tags like
<h1>,<p>,<a>,<ul>,<ol>,<li>,<div>, and<span>is crucial.
Common mistakes to avoid:
- Forgetting the <!DOCTYPE html> declaration at the very top.
- Not closing tags, which can lead to unexpected display issues.
- Placing visible content inside the <head> section instead of the <body>.
- Confusing ul (unordered list) with ol (ordered list) or forgetting li (list item) inside them.
- Not providing alt text for images, which is important for accessibility and when images don't load.
5. Now Try It
Create a new HTML file named my_first_page.html on your computer. Inside it, build a page about your favorite animal. Include:
1. A main heading (<h1>) with the animal's name.
2. A paragraph (<p>) describing why you like this animal.
3. An unordered list (<ul> with <li>) of 3-5 interesting facts about it.
4. A link (<a>) to a Wikipedia page about your animal. Make sure it opens in a new tab.
What success looks like: When you open my_first_page.html in your browser, you'll see a well-structured page about your favorite animal, with a clickable link that takes you to its Wikipedia page in a new tab.
Frequently asked about Introduction to Web Development & HTML Fundamentals
Get the full Web Development 1 curriculum
Clone the complete plan to your dashboard for unlimited AI-generated notes, practice quizzes, and a personalised revision schedule.
Create Free Account