Semantic markup specification

The web site www.sundgren.se uses semantic markup. This page specifies the structure.

Older pages may have a structure differing from this specification.

Page header and footer

All pages have a common header and footer.

The page header has a link to a common page top navigation area with links to the start page and site map. The page header also includes title, creation/modification dates and an introduction. Optional items area page-navigation and related-links.

The footer consists of a link to a common footer. with administrative items.

<html> 
 ├─ <head> 
 │   ├─ <meta>
 │   ├─ <title>
 │   └─ <link>  
 │
 └─ <body> 
     │
     ├─ <header>         
     │   ├─ <iframe class="page-top-area">      Link to common page header   
     │   │                
     │   ├─ <section class="page-title">       Page title and date of creation and modification 
     │   │   ├─ <h1>
     │   │   └─ <aside class="date">
     │   │       ├─ <p class="modify-date">
     │   │       └─ <p class="create-date">
     │   │
     │   ├─ <nav class="page-navigation">      OPTIONAL: Navigation short-cuts to page sections
│ │ ├─ <h1>
│ │ └─ <ul>
│ │ ├─ <li> │ │ ├─ <li> │ │ │ ├─ <div class="intro"> Short page introduction │ │ ├─ <p> │ │ ├─ <p> │ │ │ └─ <aside class="aside-links"> OPTIONAL: Links to related pages │ ├─ <p> │ ├─ <p> │ │ . . [ page contents ] . │ │ └─ <footer> └─ <iframe class="page-bottom-area"> Link to common page bottom

Tips and tricks pages

The Tips and tricks pages gives solutions to problems..

<html> 
 ├─ <head>
 └─ <body> 
     ├─ <header>  
     │
     ├─ <section class="problems-solutions">       
     │   │
     │   ├─ <section class="problem-solution-item">            
     │   │   ├─ <h1>             
     │   │   ├─ <p class="problem-description">  
     │   │   ├─ <p class="solution-description">  
     │   │   └─ <p class="solution-formula">  
     │   │
     │   ├─ <section class="problem-solution-item"> 
     │   .
     │   .
     │    
     └─ <footer>

Position tracks pages

The position tracks pages lists positions in the form of, for example, GPS tracks.

<html> 
 ├─ <head>
 └─ <body> 
     ├─ <header>  
     │
     ├─ <div class="position-tracks">       
     │   │
     │   ├─ <div class="track-items">  
     │   │   ├─ <h1>   
     │   │   ├─ <h2 class="year-heading">     OPTIONAL: Separator for year or other   
     │   │   ├─ <div class="track-item">                  
     │   │   │   ├─ <p class="date"><time>
     │   │   │   ├─ <p class="activity-location">
     │   │   │   ├─ <p class="activity-type">
     │   │   │   ├─ <p class="event-type">
     │   │   │   ├─ <p class="activity-name">
     │   │   │   ├─ <a class="gpx-file">
     │   │   │   ├─ <a class="tcx-file">
     │   │   │   └─ <a class="fit-file">
     │   │   │
     │   │   ├─ <div class="track-item"> 
     │   │   .
     │   │   .
     │   │
     │   ├─ <section class="track-items">  
     │   │   ├─ <h1>   
     │   │   ├─ <div class="track-item">     
     │   │   ├─ <div class="track-item"> 
     │   │   ├─ <h2 class="separator-heading"> 
     │   │   ├─ <div class="track-item">  
     │   │   .
     │   │   .
     │   .
     │   .
     │    
     └─ <footer>

DTD specification pages

The DTD specification pages gives a graphical description of the the semantic markup scheme that is used.

<html> 
 ├─ <head>
 └─ <body> 
     ├─ <header>  
     │
     ├─ <div class="dtd-specifications">
     │   │
     │   ├─ <section class="dtd-item">            
     │   │   ├─ <h2>             
     │   │   ├─ <p>
     │   │   └─ <pre>             The specification
     │   │   │    ─ <mark class="is-class">         
     │   │   │    ─ <mark class="is-description">    
     │   │
     │   ├─ <section class="dtd-item">
     │   .   
     │   .
     │    
     └─ <footer>

Tool pages

The tool pages describes the tools Hans have used including photo, technical data, verdicts and events.

<html> 
 ├─ <head>
 └─ <body> 
     ├─ <header>  
     │
     ├─ <section class="tools">
     │   │
     │   ├─ <section class="tool-item">            
     │   │   ├─ <div class="tool-year">             
     │   │   │   └─ <time>
     │   │   │
     │   │   ├─ <div class="tool-photo-data-area">           Photo and name of tool             
     │   │   │   ├─ <div class="tool-name">
     │   │   │   │
     │   │   │   ├─ <div class="tool-photo">
     │   │   │   │   ├─ <a>
     │   │   │   │   │   └─ <img>
     │   │   │   │   └─ <p class="image-courtesy">
     │   │   │   │
     │   │   │   └─ <div class="tool-info">
     │   │   │       │
     │   │   │       ├─ <div class="tool-specifications">
     │   │   │       │   ├─ <h1>                                Technical specificaion
     │   │   │       │   └─ <ul>
│ │ │ │ ├─ <li> │ │ │ │ ├─ <li> │ │ │ │ │ │ │ └─ <div class="tool-documents"> Document links │ │ │ ├─ <h1> │ │ │ └─ <ul>
│ │ │ ├─ <li><a> │ │ │ ├─ <li><a> │ │ │ │ │ └─ <div class="tool-description"> │ │ ├─ <p> │ │ │ │ │ ├─ <div class="verdict"> │ │ │ ├─ <div class="verdict-good-section"> Good verdicts │ │ │ │ ├─ <h3> │ │ │ │ └─ <ul class="verdict-good"> │ │ │ │ ├─ <li> │ │ │ │ └─ <li> │ │ │ └─ <div class="verdict-bad-section"> Bad verdicts │ │ │ ├─ <h3> │ │ │ └─ <ul class="verdict-bad"> │ │ │ ├─ <li> │ │ │ └─ <li> │ │ │ │ │ ├─ <div class="tool-event"> Any number of events │ │ │ ├─ <h3> │ │ │ ├─ <a> │ │ │ │ └─ <img> │ │ │ ├─ <p> │ │ │ └─ <div class="tool-documents"> Document links │ │ │ ├─ <h1> │ │ │ └─ <ul>
│ │ │ ├─ <li><a> │ │ │ ├─ <li><a> │ │ │ │ │ ├─ <div class="tool-event"> │ │ │ ├─ <section class="tool-item"> │ . │ . │ └─ <footer>

Training diary pages

The training diary pages describes the sports event Hans has participated in.

Javascript

The javascript training-diary_checkbox-selection.js is used to hide and show data based on the status of activity checkboxes.

Categories

To mark up different activities the following categories are used.

Activity types:

Event types:

<html> 
 ├─ <head>
 └─ <body> 
     ├─ <header>  
     │
     ├─ <div class="sport-events">
     │   │
     │   ├─ <div class="month-break">        
     │   │
     │   ├─ <section class="sport-event">       
     │   │   │     
     │   │   ├─ <div class="event-date">             
     │   │   │   └─ <div class="weekday">
     │   │   │   └─ <time>
     │   │   │
     │   │   ├─ <div class="event-data-collection">             Container for info, data and reults
     │   │   │   │ 
     │   │   │   ├─ <div class="event-info">   
     │   │   │   │   ├─ <h2>        
     │   │   │   │   │         
     │   │   │   │   ├─ <div class="event-description">                            
     │   │   │   │   │   ├─ <p>
     │   │   │   │   │
     │   │   │   │   ├─ <ul class="event-verdict">             One good thing and one less good thing
     │   │   │   │   │   ├─ <li class="verdict-good">                                
     │   │   │   │   │   └─ <li class="verdict-bad"> 
     │   │   │   │   │
     │   │   │   │   ├─ <a>
     │   │   │   │       └─ <img>  
     │   │   │   │   
     │   │   │   ├─ <ul class="event-data">
     │   │   │   │   │
     │   │   │   │   ├─ <li data-info="date">                  Date
     │   │   │   │   │   ├─ <div class="type"> 
     │   │   │   │   │   └─ <div class="value"> 
     │   │   │   │   │
     │   │   │   │   ├─ <li data-info="location">              Location
     │   │   │   │   │   ├─ <div class="type"> 
     │   │   │   │   │   └─ <div class="value"> 
     │   │   │   │   │
     │   │   │   │   ├─ <li data-info="activity-type">         Activity, for example Running
     │   │   │   │   │   ├─ <div class="type"> 
     │   │   │   │   │   └─ <div class="value">
     │   │   │   │   │
     │   │   │   │   ├─ <li data-info="event-type">            Event type, for example ARDF
     │   │   │   │   │   ├─ <div class="type"> 
     │   │   │   │   │   └─ <div class="value">
     │   │   │   │   │
     │   │   │   │   ├─ <li data-info="time">                  Time in min
     │   │   │   │   │   ├─ <div class="type"> 
     │   │   │   │   │   └─ <div class="value"> 
     │   │   │   │   │
     │   │   │   │   ├─ <li data-info="distance">             Distance in km
     │   │   │   │   │   ├─ <div class="type"> 
     │   │   │   │   │   └─ <div class="value"> 
     │   │   │   │   │
     │   │   │   │   ├─ <li data-info="speed">                Speed, average in min/km
     │   │   │   │   │   ├─ <div class="type"> 
     │   │   │   │   │   └─ <div class="value"> 
     │   │   │   │   │
     │   │   │   │   ├─ <li data-info="pulse">                Pulse, average/max in b/min
     │   │   │   │   │   ├─ <div class="type"> 
     │   │   │   │   │   └─ <div class="value"> 
     │   │   │   │   │
     │   │   │   │   ├─ <li data-info="cadence">               Cadence, average in c/min
     │   │   │   │   │   ├─ <div class="type"> 
     │   │   │   │   │   └─ <div class="value"> 
     │   │   │   │   │
     │   │   │   │   ├─ <li data-info="step-length">            Step length, average in cm
     │   │   │   │   │   ├─ <div class="type"> 
     │   │   │   │   │   └─ <div class="value"> 
     │   │   │   │   │
     │   │   │   │   ├─ <li data-info="efficiency">            Efficiency in b/km
     │   │   │   │   │   ├─ <div class="type"> 
     │   │   │   │   │   └─ <div class="value"> 
     │   │   │   │   │
     │   │   │   │   ├─ <li data-info="data">                  Link to additional items
     │   │   │   │   │   ├─ <div class="type"> 
     │   │   │   │   │   └─ <div class="value"> 
     │   │   │   │   │       └─ <a>
     │   │   │   │   │
     │   │   │   │   ├─ <li data-info="film">                  Link to film
     │   │   │   │   │   ├─ <div class="type"> 
     │   │   │   │   │   └─ <div class="value"> 
     │   │   │   │   │       └─ <a>
     │   │   │   │   │
     │   │   │   │   └─ <li data-info="track-files">           Link to track files
     │   │   │   │        ├─ <div class="type"> 
     │   │   │   │        └─ <div class="value"> 
     │   │   │   │            ├─ <a> gpx
     │   │   │   │            └─ <a> tcx
     │   │   │   │       
     │   │   │   └─ <pre class="event-results">                The results, complete or part
     │   │   │        ─ <mark class="hans">         
     │   │   │        ─ <mark class="friend">    
     │   │   │    
     │   │   └─ <div class="event-track-map">                  The event track on map
     │   │       └─ <a>
     │   │            └─ <img>
     │   │        
     │   │
     │   ├─ <section class="sport-event"> 
     │   ├─ <section class="sport-event"> 
     │   .   
     │   .
     │   ├─ <div class="month-break">       
     │   │
     │   ├─ <section class="sport-event"> 
     │   ├─ <section class="sport-event"> 
     │   .   
     │   .
     │    
     └─ <footer>

Project pages

The project pages describes different projects Hans has been involved in.

<html> 
 ├─ <head>
 └─ <body> 
     ├─ <header>  
     │
     ├─ <section class="project-events">
     │   │
     │   ├─ <div class="month-break">        
     │   │
     │   ├─ <section class="project-event">       
     │   │   │     
     │   │   ├─ <img class="main-image">         Image 300px wide           
     │   │   │
     │   │   └─ <div class="description">
     │   │       ├─ <h1>        
     │   │       ├─ <p>
     │   │       ├─ <p>
     │   │       ├─ <img class="sub-image">      Image 150px wide
     │   │       ├─ <img class="sub-image">      Image 150px wide  
     │   │       ├─ <a>
     │   │
     │   ├─ <section class="project-event"> 
     │   │   │
     │   .   
     │   .
     │   ├─ <div class="month-break">       
     │   │
     │   ├─ <section class="project-event"> 
     │   │   │
     │   .   
     │   .
     │    
     └─ <footer>

Photo album pages

The project pages describes different projects Hans has been involved in.

<html> 
 ├─ <head>
 └─ <body> 
     ├─ <header>  
     │
     ├─ <section class="photo-album">
     │   │
     │   ├─ <div class="month-break">        
     │   │
     │   ├─ <section class="photo-event">       
     │   │   │     
     │   │   ├─ <img class="main-image">         Image 300px wide              
     │   │   │
     │   │   └─ <div class="description">
     │   │       ├─ <h1>        
     │   │       ├─ <p>
     │   │       ├─ <p>
     │   │       ├─ <img class="sub-image">      Image 150px wide  
     │   │       ├─ <img class="sub-image">      Image 150px wide  
     │   │       ├─ <a>
     │   │
     │   ├─ <section class="photo-event"> 
     │   │   │
     │   .   
     │   .
     │   ├─ <div class="month-break">       
     │   │
     │   ├─ <section class="photo-event"> 
     │   │   │
     │   .   
     │   .
     │    
     └─ <footer>

Topic pages (TBS)

The topic pages are standard pages describing something

topic:

task

concept

reference

<html> 
 ├─ <head>
 └─ <body> 
     ├─ <header>  
     │
     ├─ <section class="topics">
     │   │
     │   ├─ <section class="topic">       
     │   │   ├─ <h1>        
     │   │   ├─ <img class="main-image">         Image 300px wide   
     │   │   ├─ <p>
     │   │   ├─ <img class="sub-image">      Image 150px wide
     │   │   ├─ <img class="sub-image">      Image 150px wide  
     │   │   ├─ <a>
     │   │
     │   ├─ <section class="topic"> 
     │   │   │
     │   .   
     │   .     
     │   │
     │   ├─ <section class="topic"> 
     │   │   │
     │   .   
     │   .
     │    
     └─ <footer>