Skip to main content

INFO 1300: Structuring Content with HTML

Class 2: An Introduction to HTML​

  • A website's audience
  • What is HTML?
  • Defining the structure of content
  • HTML and accessibility

Copyright 2026, Kyle J. Harms

Review: How to Create a Website​


  1. Design the website.
  2. Code the website.

Review: Designing a Website​

  1. Identify the website's audience by their goals. (Not your goals.)
  2. Assemble/create content to address the audience's goals.
  3. Organize content into web pages. (Websites have multiple pages.)
  4. Plan the website's design.
  5. Evaluate the site's design. Does the website address the audience's goals?

Review: Coding a Website​

For each webpage on the website:

  1. Structure the content in HTML.
  2. Style the content with CSS using your design plan.
  3. Add interactivity with JavaScript to enhance the user's experience with the content.

Review: Where do we start?​

When designing and programming a website, where do we start!?

The Content!

How do we select the content?

Understanding a website's audience​

Designing a website requires identifying an audience.

  • Define an audience by their goals, not by their identity.
  • An audience is cohesive if the group shares common goals for interacting with the website.

Gotcha: "everyone" often means designing for no one.

Activity: Is it a Cohesive Audience?​

Thumbs up: The audience is cohesive. Thumbs down: The audience is not cohesive.

  1. The audience shares the same identity, but has different goals for interacting with the website.
  2. The audience shares the same goals for interacting with the website, but has different identities.

Activity: Understanding a website's audience​

The Ithaca Zoo has contracted with your web design firm. They would like you to design a new website for them.

With the students sitting around you, identify a cohesive audience for the site.

Hint: Think about a set of goals, and what groups of people might have those goals. How might you describe that "group" in terms of those goals?

Example: Cohesive Audiences​

Likely Cohesive​

  • "Area Tourists" (Goals: visit the zoo, often for the first time; etc.)
  • "Families with young children" (Goals: plan a fun, educational outing for young children; etc.)

Unlikely Cohesive​

  • Everyone (Goals: ?)
  • Cornell Students (Are these goals different from Ithaca College Students? Are these goals different from any Ithaca-area resident?)
  • Cornell First-Year Students

Tip: Can you identify other groups that have the same goals as your "audience"? If yes, then your audience might be too specific.

How to Create a Website​


  1. Design the website.
  2. Code the website.

2. Coding a Website​

  1. Structure the content in HTML.
  2. Style the content with CSS using your design plan.
  3. Add interactivity with JavaScript to enhance the user's experience with the content.

HTML: HyperText Markup Language​

HTML describes the structure of web pages.

HTML is a programming markup language.


Examples: This piece of content is a paragraph. This piece of content is a heading. This piece of content is a list. etc.

Activity: Structure Practice​

Assume your group identified "Area Tourists" (Goals: visit the zoo, often for the first time; etc.) as a primary audience for the new Ithaca Zoo website.

With your group, do the following:

  1. As a group, discuss how you might appropriately group and structure the lines of text on the in-class handout.

  2. Label each piece of content using natural language (e.g. "paragraph") on the handout.

    Do not use HTML tags.

Example: Structure Practice​

:pencil:

Structure Content; Do Not Style Content​

Correct HTML Markup​

  • Structural Markup
    • "This is a heading" <h2>
    • "This is an aside" <aside>
    • "An abbreviation" <abbr>
  • Semantic Markup
    • "Emphasized this" <em>
    • "Strong importance" <strong>

"Bad" HTML Markup​

  • Styling Markup – Never!
    • "Bold" <b>
    • "Italics" <i>
    • "Underlined" <u>
    • "Line break" <br>

Avoid! Use CSS for styling!
(Wait! We'll cover CSS in a bit!)

Define Structure Using HTML Tags​

HTML provides structure to content with <tags>.

Opening Tag: <exampleTag> Closing Tag: </exampleTag>

Content is placed between the opening and closing tags:

<exampleTag>sample content</exampleTag>

exampleTag describes sample content

Examples​

<p>
  This is a paragraph of text.
</p>
<main>
  This is the main content of the page.
</main>

Example: Content Structured in HTML​

<h2>Welcome!</h2>

<p>
  I am an associate teaching professor...
</p>

<p> For information about... </p>

Note: Whitespace (spaces, newlines, etc.) is ignored by the browser when rendering content.

HTML Elements​

Definition: An element is a piece of content that is structured with an opening and closing tag.

Identify an appropriate HTML element.

  • There often isn't a perfect match; find an element that best describes it.
  • Review reference documentation:

Example: HTML Elements​

Which element should I use?

Refer to the mozilla reference documentation. Pick the one that closest matches the structure or semantic meaning.

Tip: search "mozilla elements"

How to structure the FAQ page title?

<h1>FAQ</h1>

Caution: ChatGPT​

Generative AI models, like ChatGPT sometimes suggest frequently misused HTML elements.

Double-check the reference documentation to verify elements suggested by generative AI.

A poem should be <p> and <br>...

Elements without Content; Empty Elements​

Some elements prohibit content (invalid), like <hr> (horizontal rule):

<hr></hr>

Use the empty tag syntax for "no content" elements (valid):

<hr>

Note: <hr> is a horizontal rule 🠇 (It's not for styling; it has a meaning!)


What's the meaning? Review the reference documentation.

Nested Elements​

Place elements inside of elements to describe the structure (or hierarchy) of the content.

<h1>Home</h1>
<main>
  <section>
    <h2>Welcome</h2>
    <p>This is a paragraph inside a section.</p>
    <p>This is another paragraph inside the same section.</p>
  </section>
  <section>
    <h2>About</h2>
    <p>This is a paragraph inside a different section.</p>
  </section>
</main>

How to Create a Web Page (HTML File)​

HTML files (.html) are plain text files (.txt)​

  1. In any text editor, create a new text file.
  2. Add your content to the file.
  3. Structure your content with HTML.
  4. Save the file with an .html extension (i.e. index.html)
  5. Open the HTML file in a web browser!

HTML Document Boilerplate​

Boilerplate is a template that can be reused to create new files.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>TODO</title>
</head>

<body>
  TODO
</body>
</html>

Note: You may copy boilerplate without attribution or concerns about academic integrity.

Demo: HTML Boilerplate + Structure​

  1. Open the code repository as a Codespace.
  2. Create a new file in Codespace (index.html).
  3. Generate the HTML boilerplate from genAI and add it to the file.
  4. Copy the content from content.md into the <body> element.
  5. Add the appropriate HTML elements to structure the content.
  6. View the page in your browser. (Go Live)
  7. Ignore the structured content's styling in the browser!
  <h1>The Ithaca Zoo</h1>

  <section>
    <h2>Welcome!</h2>

    <p>
      We're so excited to share our love of animals with our neighbors,
      and we hope you come visit soon. Whether you stop by once while
      you're passing through town or come multiple times a week, you'll
      find the Ithaca Zoo is ready to welcome you with open arms.
    </p>

    <p>
      <strong>Advisory: due to upcoming hot weather, we advise all guests
      to make sure they bring sunscreen for protection from ultraviolet
      rays and a water bottle to help stay hydrated.</strong> We have
      water fountains all over the zoo where you can fill up. Just look
      for the signs that say "Watering Hole."
    </p>
  </section>

Gotcha: HTML Default Styling​

The browser will style your content by default. Ignore it! We are not styling our content. We are describing its structure.

A Website​

A website is a collection of web pages and related content.

Static Websites (INFO 1300)​

A website with fixed content; the website is the same for all users.

Dynamic Websites (INFO 2310)​

A website with content that changes depending on several factors (user, time of day, etc.)

Static Website = Collection of Web Pages​

Web page = HTML File​

Accessibility​

❌ Never use HTML for style!​

  • Do not use HTML to change the way text looks!
  • Don't use <b>, <i>, <u> to bold, italicize, or underline text.
  • Never use <br> to "add space" to design. (Use CSS to add spacing)
  • Never use <hr> to add a line to your design. (Use CSS to add lines)

Tip: Ignore page styling in your browser for now.

Accessibility​

✔️ Do check the reference documentation for proper element usage.​

  • This is what the pros do!
  • Learn this skill. It will future-proof your web dev expertise.

✔️ Do use HTML to markup structure.​

<p>    <main>    <section>    <aside>  ...

Accessibility​

✔️ Do use HTML to markup semantic meaning.​

<strong>    <em>    <br>    <hr>    <abbr>  ...

✔️ Write valid HTML code​

  • Click the W3C Validator in the bottom menu bar to test your HTML code
  • Open Problems tab from View menu in Codespace.
  • Pass W3C validator with 0 errors; warnings are okay.

What's Next​

Attend Friday's section to work on Homework 1 with your peers.

Deadline: Class 3 Preparation, due Sunday, 8/30/2026, 11:59pm Deadline: Homework 1, due Monday, 8/31/2026, 11:59pm

Getting Help​

Refer to the help resources!

Clarification Question​

  1. Post to the discussion forum.
  2. Attend instructor office hours.

Assignment Help​

  1. Ask/work with a peer.
  2. Attend TA office hours.
  3. Post to the discussion forum.
  4. Attend instructor office hours.

Note: Please do not email us with clarification questions or for assignment help.

Last updated on