One card, three ways

Same content, same look. Only the names change.

1. div soup

Classes carry the meaning. No heading, no list.

Ridge Line
Length
8.9 km
Climb
310 m
Rolling ridge with views of the bay on one side and the valley on the other.

2. Semantic HTML

Native elements carry the meaning: a heading, a description list.

Ridge Line

Length
8.9 km
Climb
310 m

Rolling ridge with views of the bay on one side and the valley on the other.

3. Custom element names

The same native elements, wrapped in named custom elements. No script defines them.

Ridge Line

Length
8.9 km
Climb
310 m

Rolling ridge with views of the bay on one side and the valley on the other.

(the script fills this in)