You can use HTML in the ArcGIS Online website 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.
| Tag | Attribute |
|---|---|
a | href, style |
img | src, width, height, border, alt, style |
video | autoplay, controls, height, loop, muted, poster, preload, width |
audio | autoplay, controls, loop, muted, preload |
source | media, src, type |
span | style |
table | width, height, cellpadding, cellspacing, border, style |
div | style, align |
font | size, color, style |
tr | height, valign, align, style |
| td, th | height, width, valign, align, colspan, rowspan, nowrap, style |
p | style |
b, strong, i, em, u, ul, ol, li, tbody, br, hr | |
abbr | title |
HTML considerations
- HTML tags not listed in the table above are not supported and will be filtered out.
- Allowed protocols for href and src are https, tel, and mailto.
- Tags are automatically closed if not closed.
- <>&s are escaped outside of legal tags if not escaped using <>&".
- UNC links are not supported.
- When an a tag is used, the href target URL always opens in a new browser tab.
Legacy banner
By default, ArcGIS Online organizations that were established before the June 2020 update of ArcGIS Online feature a legacy home page configuration. If you have not already done so, transition to the new home page experience as soon as possible to give your home page a modern look. The modern home page experience offers the following benefits:
- Highlight your content using item galleries, text summaries, and custom links.
- Show off your organization's branding with custom colors and fonts.
- Create a mobile-friendly home page with accessible defaults to reach a wider audience.
Note:
Support for the legacy home page settings will be discontinued and organizations will be automatically upgraded to the new home page in early 2022. If you need more time to transition to the new home page, you can request an extension until the late 2022 update of ArcGIS Online. You can also fill out a short survey to provide feedback.
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:
Organizations allow access through HTTPS only, so 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.
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>
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>
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>