Skip to main content
April 1, 2026Dan Rodney/6 min read

Adding Images: Free HTML & CSS Tutorial

Master HTML Images with Professional Web Development Techniques

Essential HTML Elements Covered

Break Tag

Self-closing tag for creating line breaks in content. No closing tag required, simply performs its function.

Image Tag

Single tag for inserting images with source attribute. Supports JPEG and PNG formats with dimension specifications.

ALT Attributes

Accessibility text descriptions for screen readers and SEO optimization. Critical for inclusive web design.

Essential HTML Elements Covered in This Tutorial

Master three fundamental HTML elements that form the backbone of modern web development: the break tag for precise text formatting, the image tag with its crucial source attribute, and the essential width, height, and ALT attributes for professional, accessible web design.

Exercise Preview

coding images

Special Filename Convention

index.html is reserved for homepage files. When visitors go to a website URL, index.html displays as the first page automatically.

Exercise Overview

In this hands-on exercise, you'll master the art of integrating images into web pages while implementing accessibility best practices through alternative text. You'll also explore two additional HTML elements: the break tag for precise line control and techniques for creating visual content separation. These three elements share a critical characteristic in HTML architecture—they're self-closing tags that don't wrap around content, making them essential building blocks for clean, semantic markup.

Understanding these foundational elements is crucial for any web developer, as they form the basis for more complex layouts and ensure your websites meet modern accessibility standards required by WCAG 2.1 guidelines.

  1. In your code editor, navigate to File > Open.
  2. Navigate to Desktop > Class Files > Web Dev Class > News website.

  3. Double-click on index.html to open it.

    NOTE: The index.html filename is a web standard that designates the default entry point for any website. When users visit a domain (like example.com), web servers automatically serve the index.html file as the homepage. This convention has remained consistent across all major web servers since the early days of the internet and is still the standard practice in 2026.

  4. Preview the page in your browser to familiarize yourself with the current layout and structure. TIP: If you're using Visual Studio Code with the Live Server extension (the current industry standard), press Option–L Option–O (Mac) or ALT–L ALT–O (Windows) to launch a local development server with hot reload capabilities.

Implementing Strategic Line Breaks

The main heading currently runs as a single line, which compromises readability and visual hierarchy. The break tag <br> provides precise control over line breaks, allowing you to enhance typography without relying on CSS modifications.

  1. Return to index.html in your code editor. Insert a break tag to create a more readable two-line heading structure:

    <body>
   <h1>
      Latest News from The Onion:<br> 
      Today's Top National Headlines
   </h1>

    The <br> tag belongs to a category of HTML elements called "void elements" or "empty elements." Like doctype and meta tags, it's self-closing and requires no end tag because it contains no content—it simply performs its formatting function and moves the cursor to the next line.

  2. Save the file using Ctrl+S (Windows) or Cmd+S (Mac).

  3. Return to your browser and refresh the page (F5 or Cmd+R) to see the improved heading layout with the strategic line break.

Professional Image Integration

Images are fundamental to modern web design, but they require careful implementation to ensure optimal performance and accessibility. The image tag is another self-closing element, but it carries significant responsibility through its various attributes. Let's explore the two primary image formats you'll use throughout your web development career: JPEG for photographic content with its superior compression, and PNG for graphics requiring transparency or sharp edges.

  1. Return to index.html in your code editor.

  2. Add your first image below the main heading. Insert the following code as a single line (despite how it may appear in print):

    <body>
   <h1>
      Latest News from The Onion:<br> 
      Today's Top National Headlines
   </h1>
   <img src="images/newsthumb-bill-gates.jpg" height="145" width="190" ALT="Bill Gates, Radiohead Fan">

   <h2>Bill Gates Finally Getting Into Radiohead's <em>Kid A</em></h2>

  3. Let's analyze the code you've just implemented. The <img> tag requires a src attribute (source) that defines the path to your image file. Following web development best practices, images are organized in a dedicated subdirectory—we've chosen "images" for clarity, though "img" or "assets" are equally valid naming conventions.

    The width and height attributes serve a crucial performance function: they help prevent layout shift during page load by reserving the correct space for the image before it fully downloads. This contributes to better Core Web Vitals scores, which Google uses as ranking factors in 2026.

ALT Text: Your Accessibility and SEO Foundation

The img tag's ALT attribute (alternative text) serves multiple critical functions in modern web development. Screen readers rely on ALT text to describe images to visually impaired users, making your content accessible to everyone. Search engines also use ALT text to understand image content, directly impacting your SEO performance and image search rankings.

Professional web development requires ALT text for all meaningful images. Write descriptive, concise text that conveys the image's purpose and content. For purely decorative images that add no informational value, use an empty ALT attribute (ALT="") to signal screen readers to skip them, or implement them through CSS background images instead.

  • Save your changes.

  • Refresh your browser to see the image rendered on the page.

    IMPORTANT: Images aren't embedded directly into HTML files—the img tag creates a reference to an external file. This means when you deploy your website to a production server, both your HTML files and your images folder must be uploaded to maintain the links. This architecture keeps HTML files lightweight while allowing browsers to cache images separately for better performance.

  • Now add a second image to create a visual gallery effect. Insert the following code below your first image:

    <body>
   <h1>
      Latest News from The Onion:<br> 
      Today's Top National Headlines
   </h1>
   <img src="images/newsthumb-bill-gates.jpg" height="145" width="190" ALT="Bill Gates, Radiohead Fan">
   <img src="images/newsthumb-wall-street-bull.jpg" height="145" width="190" ALT="Charging Bull">

   <h2>Bill Gates Finally Getting Into Radiohead's <em>Kid A</em></h2>

  • Save the file.

  • Refresh your browser and observe how the images display horizontally rather than stacking vertically.

    ALT Text Benefits and Considerations

    Pros
    Improves accessibility for screen readers
    Enhances Search Engine Optimization rankings
    Displays when images fail to load
    Required for inclusive web design standards
    Cons
    Requires additional time to write descriptions
    Must be updated when images change
    Can be redundant for purely decorative graphics
    Decorative Graphics Exception

    For purely decorative images, use empty ALT attribute (ALT='') or CSS techniques so screen readers can ignore them appropriately.

    Image Linking Reality

    Images are not embedded into HTML pages. The img tag creates placeholders for linked files that must be uploaded to web servers.

    • Understanding Inline Elements

    Images are classified as inline elements in HTML's document flow model. Like text and anchor tags, they naturally arrange themselves horizontally, flowing from left to right until they reach the container's edge, then wrapping to the next line.

    To control this behavior and force images to stack vertically, you have several options: place them in containers too narrow for horizontal alignment, wrap each image in a block-level element like a paragraph or div, or use CSS properties like display: block or modern layout techniques like Flexbox or CSS Grid.

  • Complete your image gallery by adding a third thumbnail:

    <img src="images/newsthumb-bill-gates.jpg" height="145" width="190" ALT="Bill Gates, Radiohead Fan">
<img src="images/newsthumb-wall-street-bull.jpg" height="145" width="190" ALT="Charging Bull">
<img src="images/newsthumb-patent.jpg" height="145" width="190" ALT="Microsoft Patent Illustration">

<h2>Bill Gates Finally Getting Into Radiohead's <em>Kid A</em></h2>

  • Save your work and refresh the browser to see your completed three-image gallery in action.

  • Keep both your code editor and browser open—you'll build upon this foundation in the next exercise where we'll explore advanced image positioning and responsive design techniques.

    • Key Takeaways

    1The br tag is self-closing with no content inside, used for creating line breaks to improve text readability
    2Images require the img tag with src attribute pointing to file location, typically in an organized subfolder structure
    3ALT text is essential for accessibility, SEO, and displays when images fail to load, making it a web development best practice
    4Width and height attributes in img tags can improve page rendering performance by providing dimension information upfront
    5Images are inline elements that naturally arrange horizontally, but can be controlled through containers or CSS properties
    6index.html serves as the special homepage filename that browsers automatically display when visiting website URLs
    7JPEG and PNG are the primary image formats, with JPEG better for photographs and PNG ideal for graphics with transparency
    8Images are linked files, not embedded content, requiring server upload alongside HTML pages for visitor accessibility

    RELATED ARTICLES