Webbo3 Web Development Bootcamp · HTML Module · Lesson 3

Text, Links, and Media: Anchors, Images, Lists, Tables, and Figures

A practical lesson covering how to create links, embed images with accessibility, build structured lists and tables, and use semantic figure elements in HTML.

HTML was invented to link documents together and present structured information. Every webpage you visit, from a news article to a dashboard to an e-commerce product page, is built from the same handful of elements: text wrapped in tags, links that connect pages, images that communicate visually, lists that organize items, and tables that display data. This lesson is about those building blocks. You will learn to create hyperlinks that work reliably, embed images with proper accessibility, build lists and tables that screen readers can navigate, and use the figure element to group media with captions. These are not decorative skills. They are the foundation of every webpage you will ever build. Get them right now, and everything that follows becomes easier.

1. Anchor Tags: Creating Links

The anchor tag, , is the element that makes the web the web. Without it, every page would be an island. With it, pages connect into a network. The anchor tag wraps the clickable text or element and uses the href attribute to specify where the link goes.

Visit Webbo3

This creates a clickable piece of text that says "Visit Webbo3." When clicked, the browser navigates to the URL specified in the href attribute. The text between the opening and closing tags is what the user sees and clicks. It should always describe the destination, not just say "click here." Screen readers announce links by reading this text out loud, so "click here" gives no context to a visually impaired user.

Opening links in a new tab. Use the target attribute with the value _blank to open the link in a new browser tab. Always pair this with rel="noopener noreferrer" for security:

  Visit Webbo3 in a new tab

The noopener value prevents the new page from accessing your page through the window.opener property, which is a security vulnerability. The noreferrer value prevents the browser from sending the referring page address to the destination, which also protects privacy. These are not optional extras. They are standard practice for every external link that opens in a new tab.

Linking to email addresses and phone numbers. Use the mailto: and tel: protocols:

Email us
Call us

Clicking the email link opens the user's default email client with a new message addressed to hello@webbo3.com. Clicking the phone link initiates a call on mobile devices. The tel protocol requires the plus sign and country code for international compatibility.

Linking to sections within the same page. Use an id attribute on the target element and reference it with a hash symbol:

Contact Section

This is essential for long pages with table of contents navigation. The id must be unique across the entire page. No two elements can share the same id.

2. Absolute vs Relative Paths

Every link, image, stylesheet, and script in your HTML references a file somewhere. The way you write that reference determines whether the browser finds it or not. Understanding the difference between absolute and relative paths is fundamental to building a site that works on your local machine, on a staging server, and in production without rewriting every URL.

Absolute paths. An absolute path includes the complete URL, including the protocol, domain, and full path to the resource:

HTML Course

Absolute paths are reliable because they point to the exact same location regardless of which page contains them. Use them for external resources, links to other websites, and CDN-hosted assets. The drawback is that if your domain changes, you must update every absolute path. They also make local development harder because a link to https://www.webbo3.com will not work on your localhost.

Relative paths. A relative path references a file relative to the current file's location. It does not include the domain:

About Us

Back to Home

Relative paths are the standard for internal site navigation and local assets. They make your site portable. You can move the entire site folder from your laptop to a server, and every link still works because the relationships between files stay the same. There are three types of relative paths you must know:

Same directory: Just the filename. about.html looks for about.html in the same folder as the current page.

Subdirectory: Folder name followed by slash and filename. images/photo.jpg looks for a folder named images inside the current folder, then finds photo.jpg inside that.

Parent directory: Two dots followed by slash. ../index.html goes up one folder level from the current file's location, then looks for index.html. ../../index.html goes up two levels. This is essential when your site has nested folder structures, for example blog/posts/2026/article.html linking back to the root index.html.

Root-relative paths. A path starting with a forward slash is relative to the domain root:

This looks for the images folder at the root of the domain, regardless of which folder the current page is in. It is useful for large sites with deep folder structures because you do not need to count ../ levels. However, it only works on a real web server. On your local machine, opening an HTML file directly in the browser with file:// protocol, a root-relative path like /images/logo.png will fail because there is no server root to resolve against. Use a local development server like Live Server in VS Code to avoid this issue.

3. Images with Alt Text

The tag embeds images in your page. It is a self-closing tag, meaning it has no closing tag. It requires two attributes: src, which specifies the image source, and alt, which provides alternative text for screen readers and displays when the image fails to load.

Basic image syntax.

The alt text should describe the content and function of the image, not just its appearance. "Photo of team" is too vague. "Five team members standing in the Webbo3 office smiling at the camera" tells a screen reader user what the image conveys. If the image is purely decorative, for example a background pattern or a border flourish, use an empty alt attribute: alt="". This tells screen readers to skip the image entirely, which is better than reading out a meaningless description.

Image dimensions and performance. Always specify width and height attributes to prevent layout shift:

When the browser knows the image dimensions before the image downloads, it reserves the correct space on the page. Without these attributes, the page layout jumps as images load, which is a poor user experience and a negative factor in search engine ranking. The width and height attributes are in pixels and describe the intrinsic size of the image. You can still use CSS to make the image responsive, for example max-width: 100%; height: auto;.

Responsive images with srcset. For images that need to display at different sizes on different devices, use the srcset attribute:

     srcset="images/photo-400.jpg 400w,
             images/photo-800.jpg 800w,
             images/photo-1200.jpg 1200w"
     alt="Team photo"
     width="800" height="600">

The browser chooses the most appropriate image based on the device's screen width and pixel density. A mobile phone loads the 400-pixel version, saving bandwidth. A desktop loads the 1200-pixel version for crisp display. This is essential for performance on image-heavy pages.

4. Lists: ul, ol, and li

Lists are one of the most common structures on the web. Navigation menus, product features, article outlines, and breadcrumbs are all lists under the hood. HTML provides three list types: unordered lists for items with no particular sequence, ordered lists for sequential items, and definition lists for term-definition pairs. This lesson covers the first two, which you will use constantly.

Unordered lists with ul and li. Use

for a list where the order of items does not matter:

  
• HTML5 semantic markup

  
• CSS3 styling and layouts

  
• JavaScript interactivity

  
• Responsive design principles



Browsers render this with bullet points by default. The

• element, list item, is the only valid child of
  . You cannot place text or other elements directly inside
  without wrapping them in
  • first. Nested lists are created by placing a new
    inside an
    • :
      
        
      • Frontend
            
        
              
        • HTML
        
              
        • CSS
        
              
        • JavaScript
        
            
        
          
      
        
      • Backend
            
        
              
        • Node.js
        
              
        • Python
        
            
        
          
      
      

      This creates a hierarchical list with Frontend and Backend as top-level items, each containing nested sub-items. Screen readers announce the nesting level, which helps visually impaired users understand the structure.

      Ordered lists with ol and li. Use

      when the sequence matters, for example instructions, rankings, or step-by-step procedures:
      
        
      1. Download the installer from the official website
      
        
      2. Run the installer and accept the license agreement
      
        
      3. Choose the default installation path
      
        
      4. Restart your computer when prompted
      
      

      Browsers render this with numbers by default. You can change the numbering style with the type attribute, for example type="A" for uppercase letters, type="a" for lowercase letters, type="I" for Roman numerals. You can also start from a specific number using the start attribute:

      begins numbering at 5.

      Lists inside navigation. The standard pattern for a website navigation menu is a