HTML Essentials

contain

Open Your HTML File

Open your HTML 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?

HTML Document Structure

The Basic Skeleton

Every HTML document has this structure:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Metadata, title, styles -->
  </head>
  <body>
    <!-- Visible content -->
  </body>
</html>

Check your code: Does it have all these parts?

What's in <head>?

Look at your <head> section. You might find:

Tag Purpose
<title> Browser tab title
<meta charset> Character encoding
<meta viewport> Mobile responsiveness
<link> External CSS files
<style> Internal CSS

Question: What's your page's <title>? Is it meaningful?

What's in <body>?

Everything users see goes in <body>.

Look at your code:

  • How is the content organized?
  • Do you see any patterns in how elements are nested?
  • Are there lots of <div> tags?

Finding Tags in Your Code

Common Tags - Find Them!

Look through your code and find examples of:

Tag What it does Found it?
<h1> - <h6> Headings (different levels) ☐
<p> Paragraphs ☐
<a> Links ☐
<img> Images ☐
<div> Generic container ☐

Don't know what a tag does? Ask AI or check MDN

Tags with Attributes

Some tags have attributes - extra information inside the opening tag.

<a href="https://babson.edu">Babson</a>
<img src="photo.jpg" alt="A description">

Find in your code:

  • What URL does your <a> link to?
  • What image file does your <img> use?

Lists

Does your code have any lists? Look for:

Tag What it does
<ul> Unordered list (bullets)
<ol> Ordered list (numbers)
<li> List item (inside ul or ol)
<dl> Description list (term + definition)
<dt> Description term
<dd> Description detail

Navigation menus are often built with <ul> + <li> + <a>

Semantic HTML

What is "Semantic"?

Semantic = meaningful

Compare these two approaches:

<!-- Non-semantic (what AI often generates) -->
<div class="header">
  <div class="nav">...</div>
</div>

<!-- Semantic (better!) -->
<header>
  <nav>...</nav>
</header>

Same visual result, but semantic HTML tells the browser what the content means.

Why Does Semantic HTML Matter?

  • Accessibility: Screen readers understand your page structure
  • SEO: Search engines rank semantic pages higher
  • Maintainability: Easier to read and update
  • AI: Helps AI tools generate better code

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

Audit: How Semantic Is Your Code?

Count in your HTML file:

What to count Your count
<div> tags ____
<header> tags ____
<nav> tags ____
<main> tags ____
<footer> tags ____

Lots of <div> and few semantic tags = "div soup" 🍜

The "Div Soup" Problem

AI often generates code like this:

<div class="header">
  <div class="logo">My Site</div>
  <div class="nav">
    <div class="nav-item">Home</div>
  </div>
</div>

What's wrong?

  • No semantic meaning
  • Harder for screen readers
  • Harder to maintain

Better Version

<header>
  <h1>My Site</h1>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>

What's better?

  • Clear structure
  • Screen readers understand it
  • Proper heading hierarchy

Your Task: Find One Div to Replace

Look at your code. Find ONE <div> that should be a semantic tag:

  • <div class="header"> → <header>
  • <div class="nav"> → <nav>
  • <div class="footer"> → <footer>
  • Generic wrapper → maybe <main> or <section>

Accessibility Basics

Who Benefits from Accessibility?

  • People with visual impairments
  • People with motor impairments (can't use a mouse)
  • People with cognitive differences
  • People in temporary situations (broken arm, bright sunlight)
  • Everyone using voice assistants

~15% of the world's population has some form of disability.

Alt Text for Images

Find all <img> tags in your code.

<!-- Bad - no alt -->
<img src="photo.jpg">

<!-- Bad - useless alt -->
<img src="photo.jpg" alt="image">

<!-- Good - descriptive -->
<img src="photo.jpg" alt="Golden retriever playing in a park">

<!-- Decorative image -->
<img src="decoration.jpg" alt="">

Alt Text Checklist

For each <img> in your code:

  • Does it have an alt attribute? ☐
  • Does the alt actually describe the image? ☐
  • If decorative, is alt empty (alt="")? ☐

Testing with Lighthouse

DevTools → Lighthouse → Run "Accessibility" audit

  • 90+ = Great
  • 70-89 = Good, but has issues
  • Below 70 = Needs work

Run it on your site. What score did you get?

Making Improvements

Pick ONE Thing to Fix

Don't try to fix everything at once. Pick one:

  • Add a missing alt attribute
  • Replace one <div> with a semantic tag
  • Add lang="en" to your <html> tag
  • Wrap your navigation in <nav>
  • Add <main> around your main content

Make the change. Save. Test. Commit.

How to Ask AI for Help

If you want AI to improve your HTML:

  • "Can you refactor this HTML to use semantic tags instead of divs?"
  • "Check this HTML for accessibility issues"
  • "Add appropriate alt text to these images"

But always review what AI suggests!

Reference: Tables & Multimedia

Tables

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>
  • <table> - the table container
  • <tr> - table row
  • <th> - table header cell
  • <td> - table data cell

Tables should be used for tabular data only, not for page layout!

Audio and Video

<!-- Audio -->
<audio controls src="music.mp3">
  Your browser does not support audio.
</audio>

<!-- Video -->
<video controls width="400" src="video.mp4">
  Your browser does not support video.
</video>

Attributes: controls, autoplay, loop, muted

Embedding External Content

<!-- YouTube video (use embed URL) -->
<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID">
</iframe>

<!-- Google Map -->
<iframe src="https://www.google.com/maps/embed?..."></iframe>

Get embed code from YouTube: Share → Embed

Learn More

These slides don't cover everything. Use MDN or ask AI for details!