# Web Page Content Block Identification with Extended Block Properties
## 3 Block Identification Method for Block Range and Variation Estimation  
### Definition of Block Range and Variation  
HTML code has a hierarchical structure, where one tag contains other tags that define smaller components of the parent tag. An example of a hierarchical relationship can be seen in Figure 1. Menu elements are blocks of information that can be visually identified on the website. They also have smaller components--menu items. Menu items are arranged according to the hierarchy of the menu element. Additionally, those menu items are siblings since they are presented in the same block and have the same structure.  
\begin{table}
\begin{tabular}{c c c c c} \hline \hline
**Method** & **Precision** & **Recall** & **Accuracy** & **F-Score** \\ \hline BoM [16] & 31\% & 26\% & 26\% & 28\% \\ VIPS [17] & 24\% & 26\% & 24\% & 25\% \\ SegBlock [18] & 38\% & 40\% & 38\% & 39\% \\ Semantic-Block [19] & 40\% & 43\% & 42\% & 42\% \\ Fusion-Block [20] & 45\% & 54\% & 48\% & 49\% \\ Integrated-Block [20] & 52\% & 62\% & 54\% & 53\% \\ \hline \hline \end{tabular}
\end{table}
Table 1: Summary of proposed method accuracy metrics and comparison to other methods.  
With different tags and their combinations, the example menu case with multiple menu items can be realized. Figure 2 shows one of the examples. It demonstrates how the boundaries of the menu can be indicated by different tags (<header>, <div> or <nav>). All three possible boundaries visually produce the same block. In all cases, the user would treat it as a menu regardless of the possible boundaries of the menu. However, in some cases (machine learning, block structure matching, etc.) the usage of specific or all available tags can affect the desired result. To extend machine-oriented block segmentation properties, we define the range (maximum and minimum boundaries) of HTML blocks.  
The maximum boundary is the tag (element in the DOM tree), which defines the widest possible area, covering only the content of the block. In the DOM tree, it would be the highest element, containing only the content of the block and its child blocks, excluding siblings. Meanwhile, the minimum boundary is the tag, which will produce a child block with just partial content of the block, not the full content. If it were in the DOM tree, it would be the last element, before the child elements are visible.  
In the example, presented in Figure 2, <section> tag contains both image and the navigation items, therefore it is a minimal bound of block B1. Consequently block B1.1 has matching maximum and minimum boundaries as going deeper than the div would produce the content itself (image) and going wider would include other sibling block content. The area between minimum and maximum boundaries of each block is the part, which has no content in it.  
Block variations are defined as similar blocks belonging to the same parent block. In the case of menu items, as shown in Figure 2, the three menu items are variants of each other. Not all child tags are variants of one another (blocks B1.1 and B1.2 are not variants, just siblings as has completely different structure). Whether those siblings are variants or not depends on their structural similarity. The variant blocks must share the same parent block and internal structure, but not the content. In case of Figure 2 example, the path of tags for all B1.2 child elements is the same (<header>,<div>,<section>,<nav>,<ul>,<div>,<a>), while the path between B1.1 and B1.2 is different. The level of similarity can be adjusted based on the web page type or segmentation requirements.