5 Chapter 5: HTML Basics
What is HTML?
When you open a website in your browser, you’re looking at a combination of HTML (HyperText Markup Language), CSS (Cascading Style Sheets), and JavaScript. Among these, HTML is the backbone. It provides the structure and content of the page, while CSS styles it and JavaScript makes it interactive.
Think of HTML as the framing of a house. The walls, roof, and rooms are defined by HTML, while paint and furniture (CSS) and electrical wiring (JavaScript) bring it to life.
– HyperText: Links that connect different documents or parts of a page.
– Markup: Tags that describe the structure of content (headings, paragraphs, images, etc.).
– Language: The rules (syntax) for writing code.
Key Point: Without HTML, there’s no website—just a blank screen.
5.2 Anatomy of an HTML Document
Every HTML file follows a standard structure:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is my very first website. Exciting, right?</p>
</body>
</html>
Breaking it down:
– <!DOCTYPE html>: Tells the browser this is an HTML5 document.
– <html>: Wraps all content on the page.
– <head>: Contains information about the page (title, metadata, styles).
– <title>: Sets the text shown on the browser tab.
– <body>: Holds all the visible content (headings, paragraphs, images, links).
5.3 Common HTML Tags
Here are some of the most frequently used tags you’ll work with:
Headings
<h1>Main Heading</h1>
<h2>Subheading</h2>
– Use only one <h1> per page (for accessibility and SEO).
– <h2>–<h6> create sub-sections.
Paragraphs
<p>This is a paragraph of text.</p>
Links
<a href=”https://www.cwidaho.cc”>Visit CWI</a>
Images
<img src=”puppy.jpg” alt=”Golden retriever puppy playing in grass”>
– alt provides alternative text for screen readers and broken images.
Lists
Unordered (bullets):
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
Ordered (numbers):
<ol>
<li>First step</li>
<li>Second step</li>
</ol>
5.4 Attributes and Best Practices
Attributes add extra information to elements. They appear inside the opening tag:
<a href=”https://www.boiseweekly.com” target=”_blank”>Boise Weekly</a>
– href → link destination
– target=”_blank” → opens in new tab
Best Practices:
– Always include alt text for images.
– Nest elements properly (<ul> must contain <li>).
– Keep code clean and indented.
5.5 Validating HTML
Even small mistakes—like a missing closing tag—can break your page. Luckily, there are free tools:
– W3C Validator: Checks for errors in your HTML.
– Browser DevTools (right-click → Inspect): Lets you see how the browser interprets your code.
Common beginner mistakes:
– Forgetting </p> or </li>.
– Misusing heading levels (jumping from <h1> to <h4>).
– Using images without alt text.
5.6 Try It Yourself
Here’s a mini practice exercise:
1. Create a new HTML file called practice.html.
2. Inside, write code that includes:
– A heading with your name.
– A paragraph describing your favorite hobby.
– An image (can be a placeholder like https://via.placeholder.com/150).
– A link to your favorite website.
– A list of three things you want to learn in this class.
Save it and open in your browser. You’ve just made your first web page! 🎉
Key Terms
– HTML (HyperText Markup Language) – The code that structures web pages.
– Tag – A keyword inside < > that defines an element (e.g., <p>).
– Element – A complete unit in HTML (opening tag + content + closing tag).
– Attribute – Extra information inside a tag (e.g., href, alt).
– Validation – Checking code for errors against web standards.
Summary
HTML is the foundation of web design. In this chapter, you learned the basic structure of an HTML page, common tags (headings, paragraphs, links, images, and lists), and how to use attributes. You also practiced writing valid HTML and learned how to check your code for mistakes.
Mastering HTML basics sets the stage for styling your pages with CSS in the next chapter.
