The web site www.sundgren.se uses semantic markup. This page specifies the structure.
Older pages may have a structure differing from this specification.
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
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>
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>
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>
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>
The training diary pages describes the sports event Hans has participated in.
The javascript training-diary_checkbox-selection.js is used to hide and show data based on the status of activity checkboxes.
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>
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>
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>
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>
The link pages are give references to other public web sites.
<html>
├─ <head>
└─ <body>
├─ <header>
│
├─ <section class="links">
│ ├─ <section class="link-group">
│ │ ├─ <h1>
│ │ ├─ <div class="link">
│ │ │ ├─ <div class="link-description">
│ │ │ ├─ <a>
│ │ │ ├─ <img>
│
│ │ ├─ <div class="link">
│ │ │ ├─ <div class="link-description">
│ │ │ ├─ <a>
│ │ │ ├─ <img>
│ │
│ .
│ .
│
└─ <footer>
The championships pages list events
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>