Web designShowcase

HTML5 site demonstrates designer's mission for clean markup

Frontend developer Sara Soueidan harnesses the power of HTML5 to revamp her personal portfolio site.

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.

Soueidan turned to HTML5 during the process of rebuilding her site, using many of the new semantic elements

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!

Subscription offer

Log in to Creative Bloq with your preferred social network to comment

OR

Log in with your Creative Bloq account

site stat collection