Reference · SemText · Disclosure & views

`<sem-detail>`

SemText element

This is the child of sem-details. Wrap the words to recall in a highlight, or use [[double brackets]]. Hiding them turns the passage into a memory exercise.

Shares its schema with <sem-details> — the option bullets below belong to that element's contract.

One passage of prose with parts that can be hidden for self-testing. This is the child of sem-details. Wrap the words to recall in a highlight, or use [[double brackets]]. Hiding them turns the passage into a memory exercise.

No options beyond the global attribute catalog are stated for this tag.

Children

<highlight>the recall targets of the passage, zero or more; emphasized and fully legible in the `plain` view, occluded and revealed per item in the `quiz` view.

Example

sem-detail.html

source

              
              <sem-details id="oidc-docs">
            
                <sem-detail>
            
                  The OIDC token travels in the
            
                  <highlight>Authorization</highlight> header.
            
                </sem-detail>
            
              </sem-details>

render

Live render boots with JavaScript — the authored source is alongside.

Quiz view — same passage, targets occluded

The same passage under the container's `view-as="quiz"`: each <highlight> becomes an occluded chip, keyboard-reachable (role=button), revealed per item on click or Enter/Space. Revealing changes nothing about the passage's content.

Quiz view — same passage, targets occluded

sem-detail-quiz.html

source

              
              <sem-details id="oidc-details" view-as="quiz">
            
                <sem-detail>
            
                  The OIDC token travels in the
            
                  <highlight>Authorization</highlight> header.
            
                </sem-detail>
            
              </sem-details>

render

Live render boots with JavaScript — the authored source is alongside.

variant: two passages in one container

The item role of <sem-detail>: a <sem-details> container holds one or more passages, each an independent prose unit with its own <highlight> targets (plain view shown). The passage itself is never a control — reveals happen on its chips.

variant: two passages in one container

sem-detail-multi-passage.html

source

              
              <sem-details id="rotate-docs">
            
                <sem-detail>
            
                  Access tokens expire after
            
                  <highlight>15 minutes</highlight>; the client mints a new one from the refresh grant.
            
                </sem-detail>
            
                <sem-detail>
            
                  Refresh tokens <highlight>never reach the browser</highlight> — they live in the server-side session.
            
                </sem-detail>
            
              </sem-details>

render

Live render boots with JavaScript — the authored source is alongside.

Source: spec/schema/sem-details.md