01 / THE BIG IDEA

Make content easier to read

Imagine opening a website and finding one enormous paragraph with no title, no sections, and no clear starting point. Even if the writing is interesting, it would be difficult to read.

HTML helps us organize information into meaningful pieces. Headings identify topics, paragraphs hold related ideas, and emphasis helps draw attention to important words or phrases.

02 / MEET THE ELEMENTS

Headings, paragraphs, and emphasis

HTML uses elements to describe different kinds of content. Most elements have an opening tag, content, and a closing tag.

<h1>My Website</h1>

<p>This is a paragraph.</p>

<strong>This text is important.</strong>

<em>This text has emphasis.</em>

What do these tags do?

• <h1> identifies the main heading of the page.
• <h2> identifies a major section.
• <h3> identifies a subsection within a larger section.
• <p> identifies a paragraph.
• <strong> marks text as important.
• <em> adds emphasis to a word or phrase.

03 / HEADING HIERARCHY

Not every heading is the same

HTML provides six heading levels, from <h1> through <h6>. Think of them as an outline for your page.

<h1>My Creative Practice</h1>

<h2>Photography</h2>
<p>I use photography to explore movement and memory.</p>

<h2>Drawing</h2>
<p>My drawings begin with observations of everyday life.</p>

<h3>Current Projects</h3>
<p>I am developing a series of small sketchbooks.</p>

The <h1> introduces the overall topic. Each <h2> introduces a major section. The <h3> introduces a smaller topic within a section.

04 / YOUR FIRST CONTENT PAGE

Build a complete HTML document

Let’s put the pieces together. This example introduces a few parts of a complete HTML page that we will use throughout the semester.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Creative Page</title>
</head>
<body>

  <h1>My Creative Page</h1>

  <p>Welcome to my corner of the web. I am interested in art, design, and the things that inspire me.</p>

  <h2>Things I Like</h2>

  <p>I enjoy discovering new music, visiting galleries, and experimenting with creative projects.</p>

  <h2>A Current Goal</h2>

  <p>This semester, I want to learn how to build a website that reflects my personality.</p>

</body>
</html>

What are the new parts?

• <!DOCTYPE html> tells the browser to interpret the page using modern HTML.
• <html lang="en"> identifies the document language.
• <head> contains information about the page.
• <meta charset="UTF-8"> specifies the character encoding.
• The viewport <meta> element helps the page display appropriately on mobile devices.
• <title> sets the title shown in the browser tab.
• <body> contains the content visitors see on the page.

05 / ORGANIZING INFORMATION

Use lists when content belongs together

Lists are useful for collections of related items, such as interests, materials, favorite artists, or project goals.

<h2>My Creative Interests</h2>

<ul>
  <li>Photography</li>
  <li>Graphic design</li>
  <li>Music</li>
</ul>

An unordered list uses <ul>, while each item uses <li>. The browser displays the items with bullets by default.

<h2>My Design Process</h2>

<ol>
  <li>Gather inspiration</li>
  <li>Sketch ideas</li>
  <li>Create a first draft</li>
</ol>

An ordered list uses <ol> and is useful when sequence matters. Browsers number the items automatically.

06 / SYNCHRONOUS CLASS ACTIVITY

Rescue the messy page

In our live session, we will start with a page that contains unorganized text. Together, we will transform it into a clear content outline.

Your task

1. Create one main heading that introduces the page.
2. Break the text into at least two meaningful sections.
3. Give each section an <h2> heading.
4. Separate related ideas into paragraphs.
5. Add an unordered list of three interests.
6. Change the content so it reflects your own interests.

07 / INDEPENDENT PROJECT

Build a page about something you care about

For this week’s individual assignment, create a simple HTML page around a subject that interests you. It could be a musician, an artist, a film, a sport, a hobby, a personal goal, a game, a collection, or anything else you want to explore.

Requirements

• A complete HTML document with a title and viewport metadata.
• One <h1> that introduces the page.
• At least two <h2> section headings.
• At least three paragraphs written in your own words.
• At least one unordered or ordered list with three or more items.
• Use of <strong> or <em> where appropriate.
• Clear, logical organization that makes the content easy to follow.
• A working CodePen link submitted through the course’s D2L assignment area.

08 / REFLECTION & SUBMISSION

Show your work

Submit the link to your CodePen project in D2L. Before submitting, make sure your page works in the preview and that your content is your own.

Include a short reflection

Answer these questions in a few sentences:

1. How did headings and paragraphs help you organize your content?
2. What part of writing or organizing HTML felt easiest?
3. What is one thing you would like to learn to change about your page’s appearance?

09 / QUICK REFERENCE

HTML tags from this week

10 / BEFORE YOU GO

Design starts with decisions

Every website communicates through choices: what appears first, how information is grouped, and what the visitor is expected to notice. HTML gives us the structure that makes those decisions possible.

Next week, we will use lists and links to connect information and begin thinking about how visitors move through a website.