Lesson 3 of 18

HTML Elements 🏠

🎯 Grades 9–12 ⏱ ~35 minutes 💚 Intermediate

What You'll Learn

Use heading, paragraph, link, image, and list elements
Understand block vs inline elements
Build a structured web page

Headings and Paragraphs

HTML

<h1>Main Heading (Largest)</h1>
<h2>Section Heading</h2>
<h3>Sub-section Heading</h3>
<p>This is a paragraph of text. It can be as long as you need.</p>
<p>Each p tag creates a new paragraph with spacing above and below.</p>

💡

h1 = One Per Page

Search engines treat h1 as the main topic of the page. Use only one h1 per page. Use h2–h6 for sections and sub-sections.

Links and Images

HTML

<!-- Link - a element -->
<a href="https://okstem.org">Visit OKSTEM</a>

<!-- Open in new tab -->
<a href="https://okstem.org" target="_blank">Open in new tab</a>

<!-- Image - img element (self-closing) -->
<img src="img/photo.jpg" alt="A description of the image" width="400">

💡

Always Add Alt Text

The alt attribute describes images for screen readers and shows when images fail to load. Always include it!

Lists

HTML

<!-- Unordered (bullet) list -->
<ul>
  <li>Python</li>
  <li>JavaScript</li>
  <li>HTML</li>
</ul>

<!-- Ordered (numbered) list -->
<ol>
  <li>Learn HTML</li>
  <li>Learn CSS</li>
  <li>Build a project</li>
</ol>

🏠">Build an About Me Page

Create a page with: an h1 with your name, an h2 "About Me", a paragraph about yourself, an unordered list of 3 hobbies, a link to your favorite website, and an img (can use a placeholder for now).

Quick Check

Which element creates a hyperlink?

Alink

Bhref

What does the alt attribute on an image do?

ASets the image width

BDescribes the image for accessibility and when it fails to load

CLinks to another page

What is the difference between ul and ol?

Aul is bigger

Bul is unordered bullets, ol is ordered numbers

Col must have exactly 3 items