how to put text next to an image in html

Daniel Parker

3 min read

·

07-02-2025

1

0

Share

Placing text alongside an image is a fundamental task in web design. It allows you to create visually appealing layouts and provide context for your images. This article explores several HTML and CSS methods to achieve this, catering to different layout needs and design preferences. We'll cover techniques suitable for both beginners and those with more advanced HTML and CSS knowledge.

Method 1: Using the <figure> and <figcaption> Elements (Semantic Approach)

The most semantically correct way to associate a caption or descriptive text with an image is using the <figure> and <figcaption> elements. This approach is recommended for its accessibility and SEO benefits.

<figure>
  <img src="image.jpg" alt="Descriptive text for the image">
  <figcaption>This is the caption or descriptive text for the image.</figcaption>
</figure>

This method places the caption below the image. While it's semantically sound, it doesn't directly place text to the side of the image. However, we can use CSS to style this further. This is a great foundation for more complex layouts.

Method 2: Using Floats (CSS-based Approach)

Floats are a classic CSS technique for arranging elements side-by-side. This method requires understanding of float, clear, and potentially overflow properties.

<div>
  <img src="image.jpg" alt="Descriptive text for image" style="float: left;">
  <p>This text appears to the right of the image.</p>
</div>

In this example, the image floats to the left, allowing the paragraph text to wrap around it. Remember to clear the float afterward to prevent subsequent elements from overlapping. You'll typically do this with a <div> and the clear: both; style applied.

div {
  overflow: auto; /* Or use a clearfix */
}

The overflow: auto; approach is simpler, but a dedicated clearfix (search for "CSS clearfix") can offer better browser compatibility for older browsers. Choosing the best approach depends on your project's complexity and browser support needs.

Important Considerations with Floats: Floats can be challenging for beginners, and unexpected layout problems can arise if not handled carefully. They also don't always play nicely with more modern layout techniques.

Method 3: Using Flexbox (Modern and Flexible Layout)

Flexbox is a powerful CSS layout module that simplifies the process of aligning and distributing elements within a container. It's a more modern and generally preferred method over floats for many layouts.

<div style="display: flex;">
  <img src="image.jpg" alt="Descriptive text for image">
  <p>This text appears next to the image.</p>
</div>

By default, Flexbox arranges items in a row. You can adjust this behavior with properties like flex-direction (to arrange items vertically) and align-items (to control vertical alignment).

Method 4: Using Grid Layout (Advanced Grid-Based Layout)

Grid layout provides even more control over the placement and sizing of elements, making it ideal for complex layouts.

<div style="display: grid; grid-template-columns: 1fr 2fr;">
  <img src="image.jpg" alt="Descriptive text for image">
  <p>This text appears next to the image.  Grid gives you precise control over the layout.</p>
</div>

Here, grid-template-columns: 1fr 2fr; divides the container into two columns, with the image taking up one fraction (1fr) and the text taking up two fractions (2fr). You can further customize this with grid-gap, grid-row, and many other grid properties.

Choosing the Right Method

• Semantic Approach (<figure>, <figcaption>): Best for simple captions directly below the image. Use CSS for side-by-side placement if needed.
• Floats: A classic approach, but can be less intuitive and harder to manage in complex layouts.
• Flexbox: A powerful and flexible option suitable for many modern layouts. Easy to learn and use.
• Grid: Offers the most control for complex and responsive designs, but has a steeper learning curve.

Remember to always include descriptive alt text for your images for accessibility and SEO. Experiment with these methods to find the best approach for your specific needs and design preferences. Consider responsiveness – how your layout adapts to different screen sizes – when implementing these techniques.