## 2 Methodology
### Collecting SWT and Aesthetics Data from the HTML Source Code
#### 2.3.2. Aesthetics and Interface Variables  
Visual complexity is a factor that plays an important role in the aesthetics of a website as discussed by [PERSON] et al. [27], [PERSON] et al. [8], and [PERSON] et al. [28]. [PERSON] et al., in their work, supported that complexity as perceived by the users is influenced by structural complexity and presented a paradigm that related the complexity of an HTML document's DOM with how users subjectively judged complexity [27]. In a similar manner, the present study collected information regarding specific DOM elements, including both structural elements and graphical elements, in order to draw conclusions regarding the aesthetics of a website instance and how they evolved through time with regard to visual and structural complexity. In Figure 6, a screenshot of the homepage of popular European media outlet euronews.com (accessed on 1 January 2018), which displays a high amount of visual and structural complexity, is presented as an example. In the _div_tags_ variable the number of _<div>_ elements was recorded while all hyperlinks were identified through the use of anchor elements _<a>_ and recorded in the _a_tags_ variable. Similarly, the various graphical components were measured using the _img_tags_ variable to collect _<img>_ elements, the _ssq_tags_ variable to collect scalable vector graphics elements (_<ssq>_), the _map_tags_ variable to collect image map elements (_<map>_), the _figure_tags_ variable to collect figure semantic element (_<figure>_), the _picture_tags_ variable to collect the art and responsive design oriented picture element (_<picture>_), and finally the _video_tags_ variable to collect _<video>_ elements. The _<img>_ tag is used to embed an image file in an HTML page. The image file can be of any Web-supported filetype such as compressed JPG files, animated GIF files, transparent PNG files, and even SVG files. An SVG element (_<ssq>_) is a graphic saved in a two-dimensional vector graphic format that stores information that describes an image in text format based on XML. An image map consists of an image with clickable areas, where the user can click on the image and open the provided destination. The <map> tag can consist of more than one _<area>_ element, which defines the coordinates and type of the area and any part of the image can be linked to other documents, without dividing the image. The _<figure>_ tag is used to mark up a photo in the document on a Web page. Although the _<img>_ tag is already available in HTML to display the pictures on Web pages, the _<figure>_ tag is used to handle the group of diagrams, photos, code listing, etc. with some embedded content. The most common use of the _<picture>_ element will be in responsive designs where instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to more nicely fill the browser viewport. \begin{table}
\begin{tabular}{c c} \hline \hline
**Variable Name** & **Description** \\ \hline _html\_var_ & Records semantic HTML5 elements \\ _og_ & Records the existence of an Open Graph RDFfa graph \\ _twitter_ & Records the existence of a Twitter Cards RDFfa graph \\ _rss_ & Records the existence of an RSS Feed \\ _sch_ & Records the existence of a schema.org data structure \\ \hline \hline \end{tabular}
\end{table} 
Table 1: Variables related to Semantic Web technologies. Besides visual complexity, modern website aesthetics and their interfaces are heavily influenced by the need to be presentable and easily usable on many different devices, operating at various different screen resolutions and aspect ratios. This has been achieved through the fluidity offered by using table elements to contain a website's structure and through the use of responsive design practices and frameworks. In order to study the trends in this area over time for each website instance, the number of table elements (_<table>_) was recorded in the _table_tags_ variable.