HTML5 site demonstrates designer's mission for clean markup

Lebanese freelance frontend developer Sara Soueidan recently relaunched her personal portfolio website. Naturally, Soueidan turned to HTML5 during the process of rebuilding her site, using many of the new semantic elements such as <header>, <footer>, <section>, and <nav>.

"Semantic markup equals clean understandable markup," says Soueidan, "which is one of my goals all the time." The demo page makes heavy use of the <figure> and <figcaption> elements, with each item having its own image and associated caption.

Throughout the redesign, Soueidan additionally makes use of some of the more common WAI-ARIA roles, thus increasing the accessibility of the website's content.

Soueidan also takes advantage of the new HTML5 input types and attributes in her website's contact form. She thinks that "the custom keyboard mobile phones provide for these special HTML5 input types (url; email) improves user experience a lot", and that "attributes like required also add a nice extra touch for form validation".

This article originally appeared in net magazine issue 245.

Liked this? Read these!

• The designer's guide to working from home
• The ultimate guide to logo design
• Our favourite web fonts - and they don't cost a penny