Skip To Content

Supported HTML for configuring the website

You can use HTML in the ArcGIS Enterprise portal when a rich text editor is included, such as in item pages, group descriptions, map pop-ups, and configurable apps.

HTML tags and attributes

Below is a table of the supported HTML tags and attributes you can use.

TagAttribute

a

href, style

abbr

title

article

style

aside

style

audio

autoplay, controls, loop, muted, preload

b, strong, i, em, u, ul, ol, li, tbody, br, hr

blockquote

style

code

style

dd, dl, dt

style

del

style

details

style, open

div

style, align, aria-label, aria-hidden

figcaption

style

figure

style

font

size, color, style

footer

style

h1, h2, h3, h4, h5, h6

style

header

style

img

src, width, height, border, alt, style

main

style

mark

style

nav

style

p

style

pre

style

section

style

source

media, src, type

span

style, aria-label, aria-hidden

sub

style

summary

style

sup

style

table

width, height, cellpadding, cellspacing, border, style

td, th

height, width, valign, align, colspan, rowspan, nowrap, style

time

style

tr

height, valign, align, style

video

autoplay, controls, height, loop, muted, poster, preload, width

HTML considerations

Keep the following in mind:

  • HTML tags not listed in the table above are not supported and will be filtered out.
  • Allowed protocols for href and src are https, http, tel, and mailto.
  • Tags are automatically closed if not closed.
  • <>&"s are escaped outside of legal tags if not escaped using &lt;&gt;&amp;&quot.
  • UNC links are not supported.
  • When an a tag is used, the href target URL always opens in a new browser tab.

CSS properties

The tables below show the supported CSS properties.

Note:

ArcGIS Enterprise only supports inline CSS. The CSS must be defined within the style attribute.

Background properties

Below is a table of the supported background properties.

Properties

background

background-color

background-position

background-attachment

background-image

background-repeat

background-clip

background-origin

background-size

Border properties

Below is a table of the supported border properties.

Properties

border

border-image-repeat

border-right-style

border-bottom

border-image-slice

border-right-width

border-bottom-color

border-image-source

border-spacing

border-bottom-left-radius

border-image-width

border-style

border-bottom-right-radius

border-left

border-top

border-bottom-style

border-left-color

border-top-color

border-bottom-width

border-left-style

border-top-left-radius

border-collapse

border-left-width

border-top-right-radius

border-color

border-radius

border-top-style

border-image

border-right

border-top-width

border-image-outset

border-right-color

border-width

Box properties

Below is a table of the supported box properties.

Properties

box-decoration-break

box-sizing

box-suppress

box-shadow

box-snap

Break properties

Below is a table of the supported break properties.

Properties

break-after

break-before

break-inside

Display properties

Below is a table of the supported display properties.

Properties

display

display-inside

display-list

display-outside

Flex properties

Below is a table of the supported flex properties.

Properties

flex

flex-direction

flex-grow

flex-wrap

flex-basis

flex-flow

flex-shrink

Font properties

Below is a table of the supported font properties.

Properties

font

font-size-adjust

font-variant-caps

font-family

font-stretch

font-variant-east-asian

font-feature-settings

font-style

font-variant-ligatures

font-kerning

font-synthesis

font-variant-numeric

font-language-override

font-variant

font-variant-position

font-size

font-variant-alternates

font-weight

Grid properties

Below is a table of the supported grid properties.

Properties

grid

grid-column

grid-row-start

grid-area

grid-column-end

grid-template

grid-auto-columns

grid-column-start

grid-template-areas

grid-auto-flow

grid-row

grid-template-columns

grid-auto-rows

grid-row-end

grid-template-rows

Justify properties

Below is a table of the supported justify properties.

Properties

justify-content

justify-items

justify-self

List properties

Below is a table of the supported list properties.

Properties

list-style

list-style-image

list-style-position

list-style-type

Margin properties

Below is a table of the supported margin properties.

Properties

margin

margin-left

margin-top

margin-bottom

margin-right

Padding properties

Below is a table of the supported padding properties.

Properties

padding

padding-left

padding-top

padding-bottom

padding-right

Text properties

Below is a table of the supported text properties.

Properties

text-align

text-emphasis-style

text-align-last

text-height

text-combine-upright

text-indent

text-decoration

text-justify

text-decoration-color

text-orientation

text-decoration-line

text-overflow

text-decoration-skip

text-shadow

text-decoration-style

text-space-collapse

text-emphasis

text-transform

text-emphasis-color

text-underline-position

text-emphasis-position

text-wrap

Word properties

Below is a table of the supported word properties.

Properties

word-break

word-spacing

word-wrap

Other properties

Below is a table of other supported CSS properties.

Properties

align-items

gap

max-width

align-self

height

min-height

clear

letter-spacing

min-width

color

lighting-color

overflow

color-interpolation-filters

line-height

width

float

max-height

Legacy banner

By default, ArcGIS Enterprise organizations that were upgraded to 10.9 from an earlier version feature a legacy home page configuration.

Note:

Support for the legacy home page settings will be discontinued in future upgrades. It is therefore recommended that existing organizations transition to the new home page experience as soon as possible.

The legacy home page includes a banner at the top of the page that is 960 pixels wide by 180 pixels high. You can select an image for the banner area by choosing a predefined image or uploading a file from your desktop, or you can create a custom design using rich text or HTML. Configure the banner as part of the legacy home page settings.

If you choose the Custom design option, you'll see a rich text editor where you can position graphics and text in a what-you-see-is-what-you-get (WYSIWYG) format. Delete the existing banner content and replace it with your own. For further flexibility, click the View HTML Source button in the editor, which allows you to type or paste your own HTML code.

If you select only an image for your banner, your logo appears within the banner image. If you use the custom design for your home page banner, the logo does not appear (unless you include it in your design).

Tip:

If your organization is set to HTTPS only, you must access any image references in your design through HTTPS for the image or images to appear in your banner.

Examples

Below are examples of banners created with HTML. Each example includes the code that was used to create the banner. You can replace the image URLs with your own.

Banner created with HTML
This home page example includes a banner created with HTML.

The code below includes the HTML and the CSS used to create the Generic Environment Organization banner.

<div style="width: 960px; font-family: futura, helvetica, arial; 
background: url(https://imagesite/generic_env.png); height: 180px">
<div style="width:680px; margin-left: 220px; margin-top: 60px; float: left;">
<span style="font-size:24px; color:#fdf77d;
 font-weight:bold; text-transform:uppercase; text-shadow: 2px 2px 2px #085a00;">
Generic Environment Organization</span><br/>
<p style="color:#ffffff; font-size:14px;">Lorem ipsum dolor sit amet,
 consectetur adipiscing elit. Donec ullamcorper lorem pulvinar libero ultricies.</p></div> </div>

A home page that includes a banner created with HTML
This home page example includes a banner created with HTML.

The code below includes the HTML and the CSS used to create the Government Home banner.

<div style="width: 960px; font-family: futura;
 background: url(https://imagesite/generic_gov.png); height: 180px">
<div style="margin-top: 120px; float: right; margin-right: 80px">
<a href="https://www.esri.com/industries/federal/index.html/" style="background: #65a9d7;
 background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
 background: -webkit-linear-gradient(top, #3e779d, #65a9d7); 
background: -moz-linear-gradient(top, #3e779d, #65a9d7); 
background: -ms-linear-gradient(top, #3e779d, #65a9d7); 
background: -o-linear-gradient(top, #3e779d, #65a9d7);
border-bottom:#fff 1px solid; border-left: #fff 1px solid; padding-bottom: 7px;
 padding-left: 15px; padding-right: 15px; font-family: helvetica, arial, sans-serif;
 color: white; font-size: 14px; vertical-align: middle; 
border-top: #fff 1px solid; border-right: #fff 1px solid; text-decoration: none;
 padding-top: 7px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
 border-radius: 3px; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
 -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0;
 text-shadow: rgba(0,0,0,.4) 0 1px 0" target="_blank">Government Home</a></div></div>

A home page that includes a banner created with HTML
This home page example includes a banner created with HTML.

You can use a banner larger than the banner area of 960 pixels wide by 180 pixels high, but be aware that the image may overlap certain areas of the home page, such as the name of your featured content. To help make the text visible, set the bottom of the banner to a complementary color to match the default blue or add a fade effect at the bottom.

<div id="banner-html" style="left: 0px; top: 0px; position: absolute;"><div>
<img src="https://downloads.esri.com/Blogs/learn-arcgis/ago-banner/cartography-banner.png?" 
style="-webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -o-border-radius:0 0 10px 10px; 
border-radius:0 0 10px 10px; margin-top:0; width:960px; height:470px;"></div></div>