A guide for using the native HTML editor to label data.
When creating a project, select HTML.
The HTML editor is very versatile and can include several types of media.
You can use the native HTML editor to customize the way your data rows render in the labeling interface. You can use this guide to understand how the HTML editor works, how to set up an HTML labeling project, and common configurations for the HTML editor.
To learn how to prepare and format your HTML data for importing to Labelbox, see Import HTML data. You have two options for uploading to Labelbox:
Note: To label a webpage, you must save it as an HTML file. Direct linking to web pages via a URL is not supported.
Please take a look at the Common HTML editor configurations section below to explore ways to configure your import file to render your data in the editor.
Create (or reuse) an ontology for your labeling project. The table below shows the annotation types that are supported for labeling HTML data. Click through the links in the table to view the import and export formats for each classification type. Note: You can use Model-assisted labeling to import classifications as prelabels to your HTML data rows.
Feature | Import format | Export format |
---|---|---|
Radio classification | See payload | See payload |
Checklist classification | See payload | See payload |
Free-form text classification | See payload | See payload |
Note: HTML files are rendered in Labelbox as an iframe with the sandbox attribute. This means that scripts, pop-ups, and third-party API calls are blocked.
You can leverage the HTML format to customize the way your data appears in the labeling interface. Here are some common configurations our customers set up using the HTML editor.
Add CSS to your HTML file to display objects side-by-side in a grid container. This is helpful for ranking or comparing multiple products in the labeling interface. To do this, ensure your CSS display property is set to grid
.
A custom HTML that can pull in information to compare products