View Semantics

While we can create a stunning application pages for our end users it doesn't mean that that content will be good enough for other parties like search engines or other assistive tools. To help them understand our content better library provides a "semantics" property:

Property Type Description
"semantics" int Semantic meaning of the view

Property can be set either from the source code or from the resource description file for different kind of views and containers. When setting the value in resource description file a text representation of the value is used. Allowed values are represented in the following table with their brief description:

Value Name Description
DefaultSemantics "default" Has no semantic meaning
ArticleSemantics "article" Represents a self-contained piece of content that could stand alone, such as a blog post or news article
SectionSemantics "section" Sections within an HTML document. Each section should logically group related content together
AsideSemantics "aside" Represents content that is tangentially related to the main content but can be considered separate from it. Often used for sidebars or pull quotes
HeaderSemantics "header" Contains introductory content or navigational links for its parent view. It typically includes headings (H1Semantics to H6Semantics)
MainSemantics "main" Represents the dominant content of a document, which is unique to the page. There should be only one main element per page
FooterSemantics "footer" Contains footer information for its nearest ancestor sectioning view. This can include copyright details, contact info, or links to other pages within the application
NavigationSemantics "navigation" Represents a set of navigational links. Typically used for menus and other navigation aids
FigureSemantics "figure" Used to group media content (like images or diagrams) with their captions or explanations
FigureCaptionSemantics "figure-caption" Provides a caption or description for an image or diagram contained in a view with FigureSemantics semantic set
ButtonSemantics "button" An interactive control view that can be activated by the user, typically used to perform actions such as submitting forms
ParagraphSemantics "p" A paragraph view. It represents a block of structured text, which is usually separated from other blocks by blank lines
H1Semantics to H6Semantics "h1" to "h6" Heading views that define titles within our content, with H1Semantics being the most important and H6Semantics the least
BlockquoteSemantics "blockquote" Represents a section that is quoted from another source. It often includes a citation
CodeSemantics "code" Code snippets. It typically formats the text as monospaced and slightly different from regular text

Let's assume that we have a news portal application, one of it's pages can be logically divided into the following areas:

Semantics scheme

These areas can be constructed using different types of views like ListView, GridLayout, TextView, TabsLayout and others. For them we can specify the specific semantic they belong to.

Here are a few examples on how to set the semantic for a different views:

RUI

ListView {
    id = main,
    width = 100%,
    semantics = main, // Semantics used for the main content
    orientation = up-down,
    gap = 1em,
    padding = 1em,
}

RUI

ListView {
    id = header,
    width = 100%,
    semantics = header, // Semantics used for the header
    gap = 1em,
    padding = 1em,
}

Few examples on how we can do this in the source code:

Go

main := rui.NewListView(session, rui.Params{
    rui.ID:        "main",
    rui.Width:     rui.Percent(100),
    rui.Semantics: rui.MainSemantics, // Semantics used for the main content
    rui.Gap:       rui.Em(1),
    rui.Padding:   rui.Em(1),
})

// Populate main list view content

Go

header := rui.NewListView(session, rui.Params{
    rui.ID:        "header",
    rui.Width:     rui.Percent(100),
    rui.Semantics: rui.HeaderSemantics, // Semantics used for the header
    rui.Gap:       rui.Em(1),
    rui.Padding:   rui.Em(1),
})

// Populate header list view content

To get back the value of the "semantics" property, we can use the global function GetSemantics(), which will return an integer constant of the current value. By default each view has DefaultSemantics value.

Go

semantic := rui.GetSemantics(rootView, "header")

// Do something with the value

© Alxanosoft inc.