HTML Essentials

Foundations · Prereqs: F-WEB-001

--- theme: seriph title: HTML Essentials info: "Module F-HTML-001 — document structure, common tags, semantic HTML, accessibility quick-wins" --- # HTML Essentials AI can generate any HTML tag. Your job is to **read** HTML and **judge** its structure. --- # Open Your HTML File Open `index.html` from your `username.github.io` repo in VS Code. Look at it for 2 minutes. - Can you identify the **beginning** and **end** of the document? - Can you find where the **visible content** starts? - What patterns do you notice? --- # The Basic Skeleton Every HTML document has this structure: ```html <!DOCTYPE html> <html lang="en"> <head>  </head> <body>  </body> </html> ``` **Check your `index.html`:** Does it have all these parts? --- # What Goes Where? | Section | Contains | Examples | |---|---|---| | `<head>` | Metadata (invisible) | `<title>`, `<meta charset>`, `<link>` | | `<body>` | Content (visible) | headings, paragraphs, images, links | **Look at your `index.html`:** - What's your page's `<title>`? Is it meaningful? - How is the body content organized? > **AI tip:** If AI generated your HTML skeleton, check that it set a real `<title>` and not just "Document". --- layout: center --- # Finding Tags in Your Code --- # Common Tags Look through your `index.html` and find examples of these: | Tag | What it does | |---|---| | `<h1>` - `<h6>` | Headings (different levels) | | `<p>` | Paragraphs | | `<a href="...">` | Links | | `<img src="..." alt="...">` | Images | | `<ul>`, `<ol>`, `<li>` | Lists (unordered / ordered) | | `<div>` | Generic container | > Don't know what a tag does? Ask AI or check [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) --- # Tags Have Attributes Attributes add extra information inside the opening tag. ```html <a href="https://babson.edu">Babson</a> <img src="photo.jpg" alt="A description"> <html lang="en"> ``` **Find in your `index.html`:** - What URL does your `<a>` link to? - What image file does your `<img>` use? - Does your `<html>` tag have `lang="en"`? --- layout: center --- # Semantic HTML --- # What Is "Semantic"? **Semantic** = meaningful Compare these two approaches: ```html  <div class="header"> <div class="nav">...</div> </div>  <header> <nav>...</nav> </header> ``` Same visual result, but semantic HTML tells the browser what the content **means**. --- # Why Semantic HTML Matters - **Accessibility** — screen readers understand your page structure - **SEO** — search engines rank semantic pages higher - **Maintainability** — easier to read and update - **AI literacy** — when you can spot bad structure, you can fix AI output --- # Semantic Tags to Know | Tag | Use for | |---|---| | `<header>` | Top of page or section | | `<nav>` | Navigation links | | `<main>` | Main content (only ONE per page) | | `<section>` | Thematic grouping of content | | `<article>` | Self-contained content | | `<aside>` | Sidebar, related content | | `<footer>` | Bottom of page or section | --- # The "Div Soup" Problem AI-generated code often looks like this: ```html   <div class="header"> <header> <div class="logo">My Site</div> <h1>My Site</h1> <div class="nav"> <nav> <div class="nav-item">Home</div> <a href="/">Home</a> </div> </nav> </div> </header> ``` Left side: no meaning, harder to maintain, invisible to screen readers Right side: clear structure, accessible, proper heading hierarchy > **AI tip:** After AI generates HTML, search for `<div class="header">` or `<div class="nav">`. These are prime candidates to replace with semantic tags. --- # Your Turn Count in your `index.html` from `username.github.io`: | What to count | Your count | |---|---| | `<div>` tags | ____ | | `<header>`, `<nav>`, `<main>`, `<footer>` tags | ____ | **Lots of `<div>` and few semantic tags = "div soup"** Find ONE `<div>` to replace: - `<div class="header">` → `<header>` - `<div class="nav">` → `<nav>` - `<div class="footer">` → `<footer>` --- layout: center --- # Accessibility Quick-Wins --- # Alt Text for Images Find all `<img>` tags in your code: ```html  <img src="photo.jpg">  <img src="photo.jpg" alt="image">  <img src="photo.jpg" alt="Golden retriever playing in a park">  <img src="decoration.jpg" alt=""> ``` For each `<img>`: does it have an `alt` that **actually describes** the image? > **AI tip:** Ask AI to review your `alt` text: "Are these alt attributes descriptive enough for a screen reader?" --- # Heading Hierarchy Headings create an outline of your page. Use them in order: ```html <h1>Page Title</h1>  <h2>Major Section</h2> <h3>Subsection</h3> <h2>Another Section</h2> ``` - Do NOT skip levels (`<h1>` → `<h3>`) - Do NOT use headings just for font size — use CSS for that - Screen readers use headings to navigate --- # Landmarks and Language Two quick wins AI often misses: **1. Landmark regions** — semantic tags (`<header>`, `<nav>`, `<main>`, `<footer>`) create landmarks that screen readers use as jump points **2. Language attribute** — `<html lang="en">` tells the browser what language your content is in Check your code for both. These are one-line fixes with outsized impact. --- # Test with Lighthouse DevTools → Lighthouse → Run "Accessibility" audit - **90+** = Great - **70-89** = Good, but has issues - **Below 70** = Needs work Run it on your `username.github.io` site. What score did you get? > **AI tip:** Paste your Lighthouse report into AI and ask: "Which of these issues should I fix first?" --- # Key Takeaways 1. Every HTML page has the same skeleton: `<!DOCTYPE>`, `<html>`, `<head>`, `<body>` 2. Tags describe content; attributes add detail (`href`, `src`, `alt`) 3. **Semantic HTML** beats "div soup" — use `<header>`, `<nav>`, `<main>`, `<footer>` 4. Accessibility quick-wins: alt text, heading hierarchy, landmarks, `lang` 5. AI generates tags fluently — your value is **reading structure and judging quality** --- # Your Turn Create `about-me.html` in your `username.github.io` repo. 1. Use the HTML skeleton (`<!DOCTYPE html>`, `<html>`, `<head>`, `<body>`) 2. Include at least: `<header>`, `<main>`, `<footer>` 3. Add a heading, a paragraph about yourself, and an image with descriptive `alt` text 4. Validate: no "div soup," proper heading hierarchy, `lang="en"` set Commit, push, and verify it loads at `https://username.github.io/about-me.html` --- # What's Next You can now read and evaluate HTML structure. Next: **CSS Essentials**, how browsers decide what things look like.

HTML Essentials

Topics Covered

Content Slides Open fullscreen ↗

Taught In