HTML Elements - Links, Images, Lists & More - Learn • Build • Collaborate

Now that you know basic HTML structure, let's explore the elements that make web pages interactive and organized.

Links - Connecting the Web

The <a> (anchor) tag creates hyperlinks — clickable text that takes you to another page.

Basic Link Syntax

<a href="https://www.google.com">Go to Google</a>

href = the destination URL (where the link goes)
The text between tags = what users click on

Different Types of Links

External Links (to other websites)

<a href="https://github.com">Visit GitHub</a>

Internal Links (to pages in your site)

<a href="about.html">About Us</a>
<a href="contact.html">Contact</a>

Links to Specific Sections

<!-- The link -->
<a href="#contact-section">Jump to Contact</a>

<!-- Later in the page -->
<h2 id="contact-section">Contact Us</h2>

Email Links

<a href="mailto:info@example.com">Send us an email</a>

Phone Links

<a href="tel:+212123456789">Call us</a>

Link Attributes

Open in New Tab

<a href="https://example.com" target="_blank">Open in new tab</a>

<a href="about.html" title="Learn more about us">About Us</a>

Images - Adding Visuals

The <img> tag displays images. It's self-closing (no closing tag needed).

Basic Image Syntax

<img src="photo.jpg" alt="Description of image">

src = path to the image file
alt = text description (for screen readers and if image fails to load)

Image Sources

Local Image (in your project folder)

<img src="images/logo.png" alt="Company Logo">

Image from the Web

<img src="https://example.com/photo.jpg" alt="Photo description">

Image Attributes

Width and Height

<img src="photo.jpg" alt="Photo" width="300" height="200">

Note: It's better to control size with CSS, but these attributes help prevent layout shifts while images load.

Making Images Clickable

<a href="large-photo.jpg">
  <img src="thumbnail.jpg" alt="Click to see full size">
</a>

Lists - Organizing Content

HTML has three types of lists:

1. Unordered Lists (Bullet Points)

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Result:

HTML
CSS
JavaScript

2. Ordered Lists (Numbered)

<ol>
  <li>Open your code editor</li>
  <li>Write HTML code</li>
  <li>Save the file</li>
  <li>Open in browser</li>
</ol>

Result:

Open your code editor
Write HTML code
Save the file
Open in browser

3. Description Lists (Term + Description)

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language - structures web content</dd>
  
  <dt>CSS</dt>
  <dd>Cascading Style Sheets - styles web pages</dd>
  
  <dt>JavaScript</dt>
  <dd>Programming language - adds interactivity</dd>
</dl>

Nested Lists

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Node.js</li>
      <li>Python</li>
      <li>PHP</li>
    </ul>
  </li>
</ul>

Semantic HTML - Meaningful Structure

Semantic HTML = tags that describe what content means, not just how it looks.

Why Use Semantic Tags?

Better SEO — search engines understand your content
Accessibility — screen readers can navigate easier
Maintainability — code is easier to read and update

Common Semantic Tags

The top section of a page or article (logo, navigation, etc.)

<header>
  <h1>My Website</h1>
  <nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
  </nav>
</header>

`<nav>`

Navigation links

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

`<main>`

The main content of the page (only one per page)

<main>
  <h1>Welcome to Our Site</h1>
  <p>This is the main content area.</p>
</main>

`<article>`

Self-contained content (blog post, news article, etc.)

<article>
  <h2>How to Learn HTML</h2>
  <p>Published on November 26, 2025</p>
  <p>HTML is the foundation of web development...</p>
</article>

`<section>`

A thematic grouping of content

<section>
  <h2>Our Services</h2>
  <p>We offer web design, development, and consulting.</p>
</section>

`<aside>`

Content related to main content but not essential (sidebar, ads, etc.)

<aside>
  <h3>Related Articles</h3>
  <ul>
    <li><a href="#">CSS Basics</a></li>
    <li><a href="#">JavaScript Intro</a></li>
  </ul>
</aside>

Bottom section of page or article (copyright, contact info, etc.)

<footer>
  <p>&copy; 2025 CIT Web Development</p>
  <p>Contact: info@cit.com</p>
</footer>

Putting It All Together

Here's a complete page using semantic HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Blog</title>
</head>
<body>
  
  <header>
    <h1>My Coding Blog</h1>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <article>
      <h2>My First Blog Post</h2>
      <p><em>Published on November 26, 2025</em></p>
      
      <img src="coding.jpg" alt="Person coding" width="400">
      
      <p>Today I learned HTML! Here's what I covered:</p>
      
      <ul>
        <li>Page structure</li>
        <li>Headings and paragraphs</li>
        <li>Links and images</li>
      </ul>
      
      <p>Check out my <a href="https://github.com/username" target="_blank">GitHub profile</a>!</p>
    </article>
    
    <aside>
      <h3>Recent Posts</h3>
      <ul>
        <li><a href="#">Getting Started with HTML</a></li>
        <li><a href="#">CSS Basics</a></li>
      </ul>
    </aside>
  </main>
  
  <footer>
    <p>&copy; 2025 My Blog. All rights reserved.</p>
    <p>Contact: <a href="mailto:me@example.com">me@example.com</a></p>
  </footer>
  
</body>
</html>

Practice Exercise

Create a page about your favorite hobby:

Requirements:

Use semantic HTML (<header>, <main>, <footer>)
Include at least 3 links (one external, two internal)
Add 2 images with proper alt text
Create an unordered list of items related to your hobby
Use a <nav> section with links to other pages

What's Next?

Now you can structure content with meaning! In Part 3, we'll learn CSS to make it all look beautiful.

Keep practicing — the more you code, the better you'll get! 🚀

HTML Elements - Links, Images, Lists & More