{"id":7636,"date":"2010-06-07T23:11:18","date_gmt":"2010-06-07T15:11:18","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=7636"},"modified":"2022-08-30T18:53:28","modified_gmt":"2022-08-30T10:53:28","slug":"48-excellent-html5-demos","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/48-excellent-html5-demos\/","title":{"rendered":"Showcase of HTML5 Websites"},"content":{"rendered":"

Note:<\/strong> This post was first published on the 7th June, 2010.<\/p>\n

So you\u2019ve heard all rumors that HTML5 would take over Adobe Flash. While most web community argues that it\u2019s possible or not, you must be wondering what makes HTML5 so powerful that even giant company Apple wants to use it to replace Flash.<\/p>\n

That\u2019s why this post exists; we\u2019re not going to talk about what HTML5 can do, but show live demos of magical things that HTML5 can achieve with another language like JavaScript, so get ready to be inspired.<\/p>\n

Note:<\/strong> As HTML5 is not fully supported by certain web browser like Internet Explorer, you\u2019re strongly recommended to use Firefox browser<\/a> to view all HTML5 demos below.<\/p>\n

Animation<\/h2>\n

The HTML5\u2019s canvas element is the deciding factor for HTML5 to replace certain Flash animation. It allows you to build dynamic, scriptable rendering of 2D shapes and bitmap images with Javascript, which by other mean is controllable animation.<\/p>\n

Audioburst Animation<\/a><\/h3>\n

A comfortable and fantastic animation created with HTML5\u2019s canvas and audio tag.<\/p>\n

\"html5<\/figure>\n

Ball Pool<\/a><\/h3>\n

Being showcased in the last Google I\/O event, this demo shows you how dynamic can HTML5 be.<\/p>\n

\"html5<\/figure>\n

Blob Sallad<\/a><\/h3>\n

A HTML5-spawned creature that would please you.<\/p>\n

\"html5<\/figure>\n

Bomomo<\/a><\/h3>\n

With Bonomo, you can observe different atomic movements simulated with HTML5.<\/p>\n

\"html5<\/figure>\n

Browser Ball<\/h3>\n

Get amazed with this \u2018cross-browser\u2019 HTML5 ball.<\/p>\n

\"html5<\/figure>\n

Bubbles<\/a><\/h3>\n

Have fun by creating endless floating bubbles with different colors.<\/p>\n

\"html5<\/figure>\n

Canvas Cartoon Animation<\/h3>\n

A simple and funny HTML5 cartoon that helps you to understand what HTML5\u2019s canvas element can do.<\/p>\n

\"html5<\/figure>\n

Coolclock<\/a><\/h3>\n

A nice, customizable analog clock built by HTML5 and JavaScript.<\/p>\n

\"html5<\/figure>\n

Flickr PS3 Slideshow<\/h3>\n

View your Flickr photos with PS3 style slideshow in the web browser.<\/p>\n

\"html5<\/figure>\n

Interactive Polaroid<\/h3>\n

An interactive demo that works pretty similar to a multi-touch interface.<\/p>\n

\"html5<\/figure>\n

JS Fireworks<\/h3>\n

Enjoy the fireworks moment with your preferred gravity and speed, powered by HTML5 and Javascript.<\/p>\n

\"html5<\/figure>\n

Kaleidoscope<\/a><\/h3>\n

A very beautiful and futuristic HTML5 kaleidoscope.<\/p>\n

\"html5<\/figure>\n

Liquid Particles<\/a><\/h3>\n

Sensitive particle animation that reacts based upon your mouse movement.<\/p>\n

\"html5<\/figure>\n

Mesmerizer<\/h3>\n

Another sensitive and outstanding HTML5 demo that shows how nearby elements react with you mouse movement.<\/p>\n

\"html5<\/figure>\n

Nebula Cloud<\/a><\/h3>\n

Get lost with this wondrous HTML5 nebula.<\/p>\n

\"html5<\/figure>\n

Parallax<\/h3>\n

View all 2D shapes in parallel perspective.<\/p>\n

\"html5<\/figure>\n

Particle Animation<\/a><\/h3>\n

An elegant HTML5 particle animation that can form into your preferred message.<\/p>\n

\"html5<\/figure>\n

Spread<\/a><\/h3>\n

Get lost with this endless spread animation.<\/p>\n

\"html5<\/figure>\n

Starfield<\/a><\/h3>\n

A very cool HTML5 starfield animation that would change direction and speed based on your mouse movement.<\/p>\n

\"html5<\/figure>\n

Video Destruction<\/a><\/h3>\n

One click to boom a playing video.<\/p>\n

\"html5<\/figure>\n

Waveform<\/a><\/h3>\n

Observe how HTML5\u2019s canvas wave moves by altering its amplitude, wavelength, width, etc.<\/p>\n

\"html5<\/figure>\n

3D Effect<\/h2>\n

Impressed by canvas animation? That\u2019s more HTML5\u2019s canvas element can do, and it\u2019s called 3D effect. Developer can rely on canvas element, DOM and JavaScript to create 3D effect, which can later be developed into 3D animation or game.<\/p>\n

Canvas3D and Flickr<\/a><\/h3>\n

Have a whole new 3D experience with Flickr\u2019s photostream.<\/p>\n

\"html5<\/figure>\n

Cloth Simulation<\/a><\/h3>\n

A realistic, HTML5-based cloth simulation.<\/p>\n

\"html5<\/figure>\n

Evolving Monster<\/a><\/h3>\n

Observe a monster evolving into a complicated creature, one of its creator is HTML5.<\/p>\n

\"html5<\/figure>\n

Google Giftbox<\/h3>\n

Giant search engine Google is presented in 3D, playable view.<\/p>\n

\"html5<\/figure>\n

JS Touch<\/h3>\n

A high quality and realistic \u20183D on 2D Canvas\u2019 showcase.<\/p>\n

\"html5<\/figure>\n

Data Presentation<\/h2>\n

While HTML5\u2019s canvas element can be used to create animation and 3D effect, it can also be implemented to present mathematical data.<\/p>\n

Gnuplot<\/a><\/h3>\n

Gnuplot, a data plotting application in HTML5 version.<\/p>\n

\"html5<\/figure>\n

RGraph<\/a><\/h3>\n

RGraph provides a wide range of data presentation like bar chart, progress bar and traditional radar chart.<\/p>\n

\"html5<\/figure>\n

Web Application<\/h2>\n

Ultimately, using all possibilities combined by HTML5 and other langauge, one can create interactive application or game that\u2019s close to Flash application.<\/p>\n

CanvasPaint<\/a><\/h3>\n

Witness the brother of Microsoft Paint comes into your web browser, and his father is HTML5.<\/p>\n

\"html5<\/figure>\n

CanvasMol<\/a><\/h3>\n

A scientific application which is built to help you to understand certain earth element\u2019s structure.<\/p>\n

\"html5<\/figure>\n

Cartoon Builder<\/a><\/h3>\n

Draw interesting cartoon image with this minimal and interactive cartoon builder.<\/p>\n

\"html5<\/figure>\n

Drag Anything Here<\/a><\/h3>\n

Drag anything you can drag in the demo to show details.<\/p>\n

\"html5<\/figure>\n

Gartic Sketch<\/h3>\n

An original HTML5 application that allows you to make some basic drawings that can be saved into different image format like jpeg or png.<\/p>\n

\"html5<\/figure>\n

PhysicSketch<\/h3>\n

Draw whatever you like and see how they react with simulated gravity.<\/p>\n

\"html5<\/figure>\n

Sketchpad<\/h3>\n

A powerful HTML5 drawing application that enables you to draw and edit your image in the precise manner.<\/p>\n

\"html5<\/figure>\n

Smalltalk<\/a><\/h3>\n

A web application that confirms geographical position of weather-related message acquired from Twitter, thus forming them into a canvas-based \u2018social weather\u2019 map, quite trivial (as stated by author) but interesting.<\/p>\n

\"html5<\/figure>\n

Game<\/h2>\n

3Bored<\/a><\/h3>\n

You would never get bored if you can keep evading hundreds of HTML5 bullets in next second.<\/p>\n

\"html5<\/figure>\n

Breakout<\/a><\/h3>\n

Rebound the ball to break all bricks.<\/p>\n

\"html5<\/figure>\n

Canvascape<\/a><\/h3>\n

Not quite a game, but it demonstrates how HTML5 can be used to develop First Person Shooting browser game.<\/p>\n

\"html5<\/figure>\n

Catch It<\/a><\/h3>\n

How many balls can you dodge to get your winning HTML5 square?<\/p>\n

\"html5<\/figure>\n

Chain Reaction<\/a><\/h3>\n

Chain the explosion to achieve the goal, don\u2019t get addicted.<\/p>\n

\"html5<\/figure>\n

Cubeout<\/a><\/h3>\n

Play Tetris in 3D, top-down view.<\/p>\n

\"html5<\/figure>\n

etchaPhysics<\/h3>\n

Draw an item to move the ball to the star, don\u2019t forget about the gravity.<\/p>\n

\"html5<\/figure>\n

Jigsaw Puzzle<\/h3>\n

Click, rotate and drop puzzle pieces to solve this HTML5-based jigsaw puzzle.<\/p>\n

\"html5<\/figure>\n

Slide Puzzle<\/a><\/h3>\n

Slide to the victory, another HTML5 game that\u2019s built to squeeze your mind juice.<\/p>\n

\"html5<\/figure>\n

Tetris<\/h3>\n

One of the most classic game brought back to life by HTML5.<\/p>\n

\"html5<\/figure>\n

Torus<\/a><\/h3>\n

Yet another Tetris game in the pseudo-3D version.<\/p>\n

\"html5<\/figure>","protected":false},"excerpt":{"rendered":"

Note: This post was first published on the 7th June, 2010. So you\u2019ve heard all rumors that HTML5 would take over Adobe Flash. While most web community argues that it\u2019s possible or not, you must be wondering what makes HTML5 so powerful that even giant company Apple wants to use it to replace Flash. That\u2019s…<\/p>\n","protected":false},"author":17,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[506,2512],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nShowcase of HTML5 Websites - Hongkiat<\/title>\n<meta name=\"description\" content=\"Note: This post was first published on the 7th June, 2010. So you've heard all rumors that HTML5 would take over Adobe Flash. While most web community\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/48-excellent-html5-demos\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Showcase of HTML5 Websites\" \/>\n<meta property=\"og:description\" content=\"Note: This post was first published on the 7th June, 2010. So you've heard all rumors that HTML5 would take over Adobe Flash. While most web community\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/48-excellent-html5-demos\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2010-06-07T15:11:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-30T10:53:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/html5_demo\/audioburst-animation.jpg\" \/>\n<meta name=\"author\" content=\"Alvaris Falcon\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alvaris Falcon\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/48-excellent-html5-demos\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/48-excellent-html5-demos\\\/\"},\"author\":{\"name\":\"Alvaris Falcon\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/110548906de9455e25024dbfbc9156d1\"},\"headline\":\"Showcase of HTML5 Websites\",\"datePublished\":\"2010-06-07T15:11:18+00:00\",\"dateModified\":\"2022-08-30T10:53:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/48-excellent-html5-demos\\\/\"},\"wordCount\":912,\"commentCount\":140,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/48-excellent-html5-demos\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5_demo\\\/audioburst-animation.jpg\",\"keywords\":[\"HTML\",\"Website Design\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/48-excellent-html5-demos\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/48-excellent-html5-demos\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/48-excellent-html5-demos\\\/\",\"name\":\"Showcase of HTML5 Websites - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/48-excellent-html5-demos\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/48-excellent-html5-demos\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5_demo\\\/audioburst-animation.jpg\",\"datePublished\":\"2010-06-07T15:11:18+00:00\",\"dateModified\":\"2022-08-30T10:53:28+00:00\",\"description\":\"Note: This post was first published on the 7th June, 2010. So you've heard all rumors that HTML5 would take over Adobe Flash. While most web community\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/48-excellent-html5-demos\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/48-excellent-html5-demos\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/48-excellent-html5-demos\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5_demo\\\/audioburst-animation.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5_demo\\\/audioburst-animation.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/48-excellent-html5-demos\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Showcase of HTML5 Websites\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/110548906de9455e25024dbfbc9156d1\",\"name\":\"Alvaris Falcon\",\"description\":\"Alvaris is a web designer, developer and staff writer for Hongkiat.com.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/alvaris\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Showcase of HTML5 Websites - Hongkiat","description":"Note: This post was first published on the 7th June, 2010. So you've heard all rumors that HTML5 would take over Adobe Flash. While most web community","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/48-excellent-html5-demos\/","og_locale":"en_US","og_type":"article","og_title":"Showcase of HTML5 Websites","og_description":"Note: This post was first published on the 7th June, 2010. So you've heard all rumors that HTML5 would take over Adobe Flash. While most web community","og_url":"https:\/\/www.hongkiat.com\/blog\/48-excellent-html5-demos\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2010-06-07T15:11:18+00:00","article_modified_time":"2022-08-30T10:53:28+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/html5_demo\/audioburst-animation.jpg","type":"","width":"","height":""}],"author":"Alvaris Falcon","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Alvaris Falcon","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/48-excellent-html5-demos\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/48-excellent-html5-demos\/"},"author":{"name":"Alvaris Falcon","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/110548906de9455e25024dbfbc9156d1"},"headline":"Showcase of HTML5 Websites","datePublished":"2010-06-07T15:11:18+00:00","dateModified":"2022-08-30T10:53:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/48-excellent-html5-demos\/"},"wordCount":912,"commentCount":140,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/48-excellent-html5-demos\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5_demo\/audioburst-animation.jpg","keywords":["HTML","Website Design"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/48-excellent-html5-demos\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/48-excellent-html5-demos\/","url":"https:\/\/www.hongkiat.com\/blog\/48-excellent-html5-demos\/","name":"Showcase of HTML5 Websites - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/48-excellent-html5-demos\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/48-excellent-html5-demos\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5_demo\/audioburst-animation.jpg","datePublished":"2010-06-07T15:11:18+00:00","dateModified":"2022-08-30T10:53:28+00:00","description":"Note: This post was first published on the 7th June, 2010. So you've heard all rumors that HTML5 would take over Adobe Flash. While most web community","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/48-excellent-html5-demos\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/48-excellent-html5-demos\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/48-excellent-html5-demos\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/html5_demo\/audioburst-animation.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5_demo\/audioburst-animation.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/48-excellent-html5-demos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Showcase of HTML5 Websites"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/110548906de9455e25024dbfbc9156d1","name":"Alvaris Falcon","description":"Alvaris is a web designer, developer and staff writer for Hongkiat.com.","url":"https:\/\/www.hongkiat.com\/blog\/author\/alvaris\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-1Za","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/7636","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=7636"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/7636\/revisions"}],"predecessor-version":[{"id":62084,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/7636\/revisions\/62084"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=7636"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=7636"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=7636"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=7636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}