Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
110 lines (81 sloc) 4.25 KB
<!doctype html>
The Semantic Design
You should find the source code fairly easy to read.
Even if you don't know HTML, it should be understandable.
Every <element> adds semantic meaning to the page.
If you think the source code could be simpler,
please fork or contribute to the project.
<html lang="en">
<meta charset="UTF-8" />
<title>A simple, elegant design for the web</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="favicon.ico" />
<link rel="stylesheet" href="basic.css" />
<body role="document">
<header role="banner" class="inline-header">
<h1>A simple, elegant design for the web</h1>
<nav role="navigation">
<li><a href="index.html">Summary</a></li>
<li><a href="details.html">Details</a></li>
<li><a href="more.html">More</a></li>
<main role="main">
<p class="title">
An elegant, responsive and modular design, with purely semantic markup
<small>(try reading <a href="view-source:" onclick="window.location='view-source:'+window.location; return false">the source code</a>)</small>
<section class="promotions" role="region">
<p>Above all this design strives to be simple, rather than complete. This makes the project quick to understand and use, and also less prone to complex problems.</p>
<p>Read about <a>keeping it simple</a>.</p>
<p>The design uses a large font-size and standard colours for high accessibility, and the document sections are semantically marked-up with WAI-ARIA roles for screen-readers.</p>
<p>Read about <a href="" title="the Web Accessibility Initiative">WAI</a> and <a href="" title="the Accessible Rich Internet Applications Suite">ARIA</a>.</p>
<p>This page is written using HTML5 semantic elements and WAI-ARIA roles. There is no markup that doesn't have semantic meaning.</p>
<p>Read about <a>creating simple, semantic markup</a>.</p>
<p>The size of the text, the padding and the length of the lines have been carefully considered for easy readability. The colours and the layout deliberately follow internet conventions.</p>
<p>Read about <a>usability by convention</a>.</p>
<p>The design's simplicity means it easily responds to different screen sizes.</p>
<p><a>Simple designs are more responsive</a>.</p>
<p>The style elements are modular, meaning that the markup or styling can be added into different pages and still work.</p>
<p>Read about <a>creating modular styling</a>.</p>
<footer role="contentinfo" class="quiet-footer">
<li>by <a href="">robin</a></li>
<li>this project is in the <a href="">public domain</a></li>
<li>please <a href="">fork my code</a></li>
You can’t perform that action at this time.