Computation for Linguists

HTML and Javascript, Day 2

Dr. Andrew M. Byrd

2025-09-12

Review

  • What did you learn last time about HTML?

Review from Day 1

  • We learned basic tags: <h1>, <p>, <em>, <strong>, <a>, <img>, <ul>, <li>
  • We practiced attributes like href and alt
  • We built a simple page with our name, a paragraph, a link, an image, and a list

Structure in HTML

Why Structure Matters

Without structure:

<!doctype html>
<html lang="en">
<h1>My Mini Site</h1>
<p>Hello world! ...</p>
<h2>Links</h2>
<p>Visit <a href="https://example.com">Example</a>.</p>
<h2>Image</h2>
<p><img src="pic.jpg" alt="..."></p>
</html>
  • We get a site, but this is bad HTML with no semantic outline.

Why Structure Matters

With structure:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>My Mini Site</title>
</head>
<body>
  <h1>My Mini Site</h1>

  <p>Hi, I'm Student Name. This site will become my simple portfolio.</p>

  <h2>Education</h2>
  <p>University of Somewhere — B.A. (2025)</p>

  <h2>Projects</h2>
  <p>Project One: a short description goes here.</p>

  <h2>Contact</h2>
  <p>Email me at <a href="mailto:student@example.edu">student@example.edu</a>.</p>

  <p><img src="https://picsum.photos/300/180" alt="A random placeholder image"></p>
</body>
</html>

Today’s Focus

  • Add structure with semantic tags
  • Learn the page skeleton:
    • <header> — title + navigation
    • <nav> — menu of links
    • <main> — main content
    • <section> — thematic grouping
    • <footer> — closing info
  • Add internal navigation with id and href="#..."

Learning HTML Structure

Create a New html File

  • Create a new .html file, call it stinkys.html.
  • Here is the starting code. You can see that right now it’s completely flat – there’s no inherent structure at the moment.
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>The Stinky Cheesemonger</title>
</head>
<body>
  <h1>The Stinky Cheesemonger</h1>

  <p>Welcome to The Stinky Cheesemonger — your neighborhood shop for gloriously pungent cheeses.</p>

  <h2>Cheeses</h2>
  <p>Try our favorites: Époisses, Limburger, Blue Stilton.</p>

  <h2>Shop Info</h2>
  <p>123 Rind Lane, Fromage City, Idaho</p>

  <h2>Contact</h2>
  <p>Email us at <a href="mailto:hello@stinkys.cheese">hello@stinkys.cheese</a></p>

  <p><img src="https://picsum.photos/320/200" alt="A plate of assorted cheeses"></p>
</body>
</html>

Add a <header>

<body>
 <header>
    <h1>The Stinky Cheesemonger</h1>
 </header>

...
</body>

<main>

Purpose: Contains the primary page content.

How it Works:

  • One per page. Improves accessibility.

  • Wrap your page’s primary content in a <main>...</main> element.

Add <main>

<body>

...

  <main>
    <p>Welcome to The Stinky Cheesemonger — your neighborhood shop for gloriously pungent cheeses.</p>

    <h2>Cheeses</h2>
    <p>Try our favorites: Époisses, Limburger, Blue Stilton.</p>

    <h2>Shop Info</h2>
    <p>123 Rind Lane, Fromage City, Idaho</p>

    <h2>Contact</h2>
    <p>Email us at <a href="mailto:hello@stinkys.cheese">hello@stinkys.cheese</a></p>

    <p><img src="https://picsum.photos/320/200" alt="A plate of assorted cheeses"></p>
  </main>
</body>

<section>

Purpose: Groups related content with a heading.

How it Works:

  • Each section begins with an <h2>.

  • Give each an id.

Add <section>s and ids

<body>
  ...

  <main>
    <section id="about">
      <h2>About</h2>
      <p>Welcome to The Stinky Cheesemonger — your neighborhood shop for gloriously pungent cheeses.</p>
      <p><img src="https://picsum.photos/320/200" alt="A plate of assorted cheeses"></p>
    </section>

    <section id="cheeses">
      <h2>Cheeses</h2>
      <p>Try our favorites:</p>
      <ul>
        <li>Époisses — washed-rind, famously aromatic</li>
        <li>Limburger — creamy, assertive, legendary funk</li>
        <li>Blue Stilton — crumbly, sharp, deeply savory</li>
      </ul>
    </section>

    <section id="shop">
      <h2>Shop Info</h2>
      <p>123 Rind Lane, Fromage City, Idaho</p>
      <p>Open Tue–Sat, 11am–6pm</p>
    </section>

    <section id="contact">
      <h2>Contact</h2>
      <p>Email us at <a href="mailto:hello@stinkys.cheese">hello@stinkys.cheese</a></p>
    </section>
  </main>
</body>

Activity: Add Structure to Your Own Website!

Activity: Add Structure to Your Own Website!

  • Open the HTML file you made yesterday.
  • At the top of your <body>, wrap title in a <header>.
  <nav>
     <a href="#about">About</a>
     <a href="#education">Education</a>
     <a href="#projects">Projects</a>
     <a href="#contact">Contact</a>
  </nav>
  • Wrap content in <main>.
  • Split into <section>s.
  • Add a <footer>. Be sure to add a page anchor at the top.
  • If you have time, add a fifth section on “Hobbies”, with links.