Customize Slice Metadata and HTML attributes

Last updated on Oct 4, 2026

Learn how to configure URLs, Alt text, dimensions, and other properties in the Slice Options dialog box in Adobe Photoshop.

Slice metadata controls how individual slices appear and behave in exported HTML files. Each slice can have unique attributes, including hyperlinks, Alt text, dimensions, and background colors that define its appearance and functionality in web browsers.

Slice metadata controls how individual slices appear and behave in exported HTML files. Customize slice properties such as hyperlinks, Alt text, dimensions, and background colors to control the appearance and functionality of exported web content.

Edit slice metadata

Select the Slice Select tool from the toolbar or hold down the Crop tool to reveal it.

Double-click the slice you want to customize.

Configure the slice properties in the Slice Options dialog box.

Select OK to apply your changes.

Note

Modifying an auto slice converts it to a user slice, giving you full control over its properties.

Understanding slice property types

The following table describes each metadata option available in the Slice Options dialog box and how it affects your exported HTML:

Setting

Description

Applies to

Type

Specifies whether the slice contains image data or an empty table cell

All slices

Name

Sets a custom name for the slice (default naming follows Output Settings)

Image and No Image slices

URL

Specifies the hyperlink destination when users click the slice

Image slices

Target

Defines which browser frame or window opens the linked URL

Image slices

Message Text

Changes the browser status bar message (defaults to URL if specified)

Image slices

Alt Tag

Provides alternative text for accessibility and displays during image loading

Image slices

Dimensions (X, Y, W, H)

Sets precise pixel coordinates and size for the slice

All slices

Background Color

Fills transparent areas (Image slices) or entire cell (No Image slices)

Image and No Image slices

Text Is HTML

Interprets cell content as HTML code rather than plain text

No Image slices

Cell Alignment

Controls horizontal and vertical text positioning within the slice area

No Image slices

Add hyperlinks to image slices

Double-click the slice with the Slice Select tool.

In the URL box, enter a relative or absolute URL. Include the protocol (http:// or https://) for absolute URLs.

In the Target box, enter a frame name to control where the link opens: _blank for a new window, _self for the same frame, _parent for the parent frameset, or _top to remove all frames.

Select OK.

Configure Alt text for accessibility

Select the slice and double-click it with the Slice Select tool.

In the Message Text box, enter the text you want to appear in the browser's status bar.

In the Alt Tag box, enter descriptive text for screen readers and tooltips.

Select OK.

Note

Alt text improves accessibility and appears when images can't be displayed. Some browsers may also display it as a tooltip.

Add HTML text to No Image slices

Double-click the slice with the Slice Select tool.

Select No Image from the Type menu.

Enter your text content in the text box, including HTML tags if needed.

Select the Text Is HTML option to allow HTML formatting.

Choose horizontal alignment: Default, Left, Center, or Right.

Choose vertical alignment: Default, Top, Baseline, Middle, or Bottom.

Select OK.

Note

No Image slices don't display HTML formatting in the document window. Preview your exported HTML in multiple browsers and platforms to confirm proper text display.

Tip

The amount of text in a No Image slice can affect your exported HTML table layout. Test your page after adding substantial text content.

Set background colors

Select a slice and double-click it with the Slice Select tool.

From the Background Color menu, select None, Matte, White, Black, or Other.

If you select Other, choose a custom color using the Adobe Color Picker.

Select OK.

Background colors don't display in Photoshop—you must preview your image in a web browser to see the effect.

Use slice web pages and modify slice layout procedures to create and manage slices.