Paul's Page

HTML 5 testbed



Welcome to my page that I've been using to try out some new things in HTML5 and CSS3

Other Sites

The other sites I maintain (also using HTML5 & CSS3):

Octave Choir.

Document structure

This page uses the nav, header, footer, article and section tags to define its structure. There is better separation between content and style.


Roll over the elements at the top of the page to see some CSS3 transform effects. The owl logo rotates through 360°, the main title fades a text shadow in and out, the text at the top right changes colour and the menu highlighting fades in and out

New CSS3 styles

The text at the top right is skewed and the content elements have rounded corners.

Canvas Tag Example

The canvas object presents an empty image object. This can be drawn on using scripting such as JavaScript. The canvas below just has two lines, a circle and a gradient drawn on it. You can implement live drawing in JavaScript, see William Malone's example

Your browser does not support the canvas element



If your browser supports the video tag you should see a video to the right here. It is of a trip from the New Inn to the Heleport on Tresco in the Isles of Scilly. The video tag allows you to display controls on the video itself or to control the video via scripting (as here).

Webcam Access

If you are using Chrome you can view your webcam embedded in a webpage (nothing is sent to the server). There is a demo of this on my webcam page.


This uses the geolocation object within the navigator DOM object to get a longitude and latitude for your browser, it then uses the Google maps API to show that location on a map.

Location should appear here

Multiple columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non erat nisi. Suspendisse eu ligula orci, ac tempor neque. Nullam at turpis blandit eros condimentum egestas. Vestibulum iaculis interdum venenatis. Suspendisse at hendrerit nisi. Nam leo tortor, posuere sed euismod eget, bibendum quis magna. Pellentesque faucibus pharetra nisl, at blandit lacus mollis vitae. Proin diam tellus, tempor vitae pretium sed, blandit in odio. Nullam eget pretium nisi. Pellentesque lacinia arcu diam. Integer tempor rhoncus ligula in dignissim. Aliquam convallis ultrices volutpat.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent iaculis, ante eu dictum venenatis, diam diam pretium dolor, vel tristique sem metus tempor erat. Ut auctor mauris sed diam interdum iaculis sit amet rhoncus sapien. Nulla tristique gravida auctor. Ut a turpis massa. Nam sodales, lacus nec molestie lobortis, nisi enim rhoncus sem, ac viverra lectus lacus eget arcu. Morbi elementum, felis in cursus venenatis, ipsum ante aliquam mauris, id tincidunt lectus lorem non nisi. Integer malesuada sem suscipit nisi accumsan et adipiscing dolor feugiat. Nunc vulputate, libero sit amet consequat eleifend, mi augue dapibus lectus, vel porttitor est urna eget leo. Morbi cursus volutpat enim sed pulvinar. Morbi sollicitudin porta nisi, non pulvinar ante tincidunt aliquet.

Ribbon effect

The ribbon effect above uses pseudo elements created in CSS to create a border effect and shadow triangle which combined look like a ribbon.

Responsive Website Design (RWD)

Responsive websites are ones that adapt their width to the available space in the browser. This means that they work well on any device from a smartphone, through tablets to desktop browsers. They use the @media rule in CSS3 to provide different style directives according to the viewport width. There are several templates available that have the @media rules already defined including Skeleton and Columnal.

The AinsdalePages site uses the Foundation template, it also uses jQuery to create the slideshow of image. This main page does not use RWD, it has a fixed width.

New Input Types

HTML5 has some new input types that allow the browser to validate forms without the need for Javascript. CSS3 has new pseudo selectors that allow the results of the validation to be fed back to the user. The Contact Me form on my personal site uses a text box and text area (both of these were in HTML4) but includes the 'Required' attribute to signal to the browser that these fields must not be blank. The email address field uses the new email input type and the 'required' attribute so that not only must the field be non-blank but must contain something that looks like an email address.

Media Queries

You can use @Media CSS queries to detect the screen size and lay the page out appropriately. This home page uses a @Media print query to lay the page out differently when it is printed to save ink and waste less paper. It will also add a QR code here for easy linking back to the site.

QR code to

QR Code for this page

New Structural Elements

Where we used to have parts of the page separated by <div> elements identified, it at all, by name or id, we now have different element names to show the structure of the page. Header and Footer are obvious, article refers to a part that could be removed and make sense on its own. Section refers to a subdivision of another part of the structure and Aside to something between the header and footer that isn't part of the main point of the page. There is talk of a main section but that hasn't appeared at the time of writing.

This section tests some more esoteric elements that may not have browser support yet...

Summary sectionDetail of above summary
This is a figure
Mark for highlighted text

HTML5, CSS3 websites I've used

Killersites tutorials
Web Designer Magazine
Skeleton RWD Template
Columnal RWD Template