cup rings

showing a non-visible structure of websites

A cup ring shows the characteristic structure of a web page based on the underlying HTML tags. The basic idea of a cup ring is to make invisible HTML structures visible by means of a data visualization and to give the respective web page a new identity.

A web page consists of HTML elements or HTML tags. A web browser interprets these HTML tags and displays the web page in the form we know. When generating a cup ring, the focus is not on the structure of the web page’s appearance, but on underlying HTML structure that is only indirectly visible. To make this structure visible, an arc element is first assigned to each HTML tag of a web page.

The placement of individual HTML tags within a web page, is reflected in the arrangement of individual arc elements within a cup ring. The figure below shows the simplified process of generating a cup ring. On the left side, an arrangement of HTML elements is shown, as it can be found on web pages. On the right side, a structure of arc elements is created based on the arrangement and nesting of the elements. The displayed structure of arc elements shows a part of a cup ring. If the process shown is applied to the entire HTML elements of a web page, a cup ring in the form of a circle is created.

The placement of individual HTML tags within a web page, is reflected in the arrangement of individual arc elements within a cup ring. The figure below shows the simplified process of generating a cup ring. On the left side, an arrangement of HTML elements is shown, as it can be found on web pages. On the right side, a structure of arc elements is created based on the arrangement and nesting of the elements. The displayed structure of arc elements shows a part of a cup ring. If the process shown is applied to the entire HTML elements of a web page, a cup ring in the form of a circle is created. The arrangement, nesting and type of HTML tags create a characteristic structure of arc elements, for each web page.

theguardian.com

microsoft.com

linkedin.com

mozilla.org

reuters.com

washington-post.com

weibo.com

yelp.com