{"id":21502,"date":"2014-06-24T15:01:53","date_gmt":"2014-06-24T07:01:53","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=21502"},"modified":"2025-04-04T01:59:06","modified_gmt":"2025-04-03T17:59:06","slug":"revealjs-html-presentation-framework","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/revealjs-html-presentation-framework\/","title":{"rendered":"Reveal.js &#8211; A Framework For Amazing HTML Presentation"},"content":{"rendered":"<p><strong>Presentations<\/strong> are a great  way to <strong>convey valuable and important information<\/strong>. Whether it\u2019s for business, education, or marketing purposes, you have to <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/presentation-tools\/\" rel=\"noopener\">create interesting, informative and engaging presentation slides<\/a>. It\u2019s most often done on a desktop or smartphone, but you can also create it using web technology. In this post, I will introduce you to <strong>Reveal.js<\/strong>, a framework for beautiful HTML presentations made easy.<\/p>\n<p>Reveal.js is a very powerful framework for creating HTML presentations, as it has so many advanced features. With Reveal.js, you can create a presentation which supports mobile gestures, such as <strong>pinch and slide<\/strong>. You can also <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/web-content-with-markdown\/\" rel=\"noopener\">create the presentation content with markdown<\/a>, or with visual editors like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/slides.com\/\">Slides<\/a>, if you don\u2019t want to dirty your hands with code. It even  equips you with some beautiful transitions and themes and comes with a multitude of other features to help you out.<\/p>\n<p class=\"note\"><strong>Recommended Reading:<\/strong> <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/sync-presentation-slides-impressr-js\/\" rel=\"noopener\">Synchronize Web-Based Presentation Slides With Impress.Js And Impressr [Quicktip]<\/a><\/p>\n<h2>Getting Started With Reveal<\/h2>\n<p>In this post, I will guide you through the basic implementation of Reveal.js. Let\u2019s start by downloading the copy of this <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codeload.github.com\/hakimel\/reveal.js\/zip\/refs\/heads\/master\">repository<\/a>. The downloaded file contains the following folders:<\/p>\n<ul>\n<li><strong>css<\/strong>: the core style<\/li>\n<li><strong>js<\/strong>: javascript dependencies<\/li>\n<li><strong>plugin<\/strong>: some components developed as Reveal.js extension<\/li>\n<li><strong>lib<\/strong>: all other third party assets (JavaScript, CSS, fonts)<\/li>\n<\/ul>\n<p>Now we will call all the dependencies that need to be included. In the <code>head<\/code> section, call the main style and also the theme you want to use (give an id of \u201ctheme\u201d). Available themes are: <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/revealjs.com\/?\">default<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/revealjs.com\/?theme=sky\">sky<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/revealjs.com\/?theme=beige\">beige<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/revealjs.com\/?theme=simple\">simple<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/revealjs.com\/?theme=serif\">serif<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/revealjs.com\/?theme=night\">night<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/revealjs.com\/?theme=moon\">moon<\/a> and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/revealjs.com\/?theme=solarized\">solarized<\/a>. For this demo, I simply use the default one like so:<\/p>\n<pre>\r\n&lt;link rel=\"stylesheet\" href=\"css\/reveal.min.css\"&gt;\r\n&lt;link rel=\"stylesheet\" href=\"css\/theme\/default.css\" id=\"theme\"&gt;\r\n<\/pre>\n<p>And before the end of <code>body<\/code> tag, include the following javascript:<\/p>\n<pre>\r\n&lt;script src=\"lib\/js\/head.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"js\/reveal.min.js\"&gt;&lt;\/script&gt;\r\n<\/pre>\n<h2>HTML Markup<\/h2>\n<p>In this  guide, let\u2019s assume that we\u2019ll create three basic slides using some HTML codes. There are three main elements for creating the presentation slides. They are: <code>&lt;div class=\"reveal\"&gt;<\/code>, <code>&lt;div class=\"slides\"&gt;<\/code> and <code>&lt;section&gt;<\/code>.<\/p>\n<p>In the <code>&lt;section&gt;<\/code> tag is where you have to specify the slide content. The default slide is moved horizontally, if you want to create a vertical slide, easily add another <code>&lt;section&gt;<\/code> inside. Here is the example:<\/p>\n<pre>\r\n&lt;div class=\"reveal\"&gt;\r\n    &lt;div class=\"slides\"&gt;\r\n        &lt;section&gt;This is horizontal slide&lt;\/section&gt;\r\n        &lt;section&gt;\r\n            &lt;section&gt;And this is vertical slide&lt;\/section&gt;\r\n        &lt;\/section&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>In the first slide, we\u2019ll put the intro. Fragmented views will go in the second and this will finally be followed by a punchline slide with a quote and internal link inside.<\/p>\n<p>For the intro, I\u2019m going to format the title with <code>h1<\/code> and the sub title with <code>h3<\/code> like so:<\/p>\n<pre>\r\n&lt;section&gt;\r\n\t&lt;h1&gt;Hongkiat Presentation&lt;\/h1&gt;\r\n\t&lt;h3&gt;Hi, this is a demo for Reveal.js&lt;\/h3&gt;\r\n&lt;\/section&gt;\r\n<\/pre>\n<p>Now for the second slide, I\u2019ll use some words for the fragment. To create a fragmented view, you\u2019ll need to double the <code>section<\/code> like in the creation of vertical slide. Then, include the sub <code>section<\/code> with a <code>fragments<\/code> id and a class of <code>fragment<\/code> in the content element like so:<\/p>\n<pre>\r\n&lt;section&gt;\r\n\t&lt;section id=\"fragments\"&gt;\r\n\t\t&lt;h2&gt;I'm Fragmented&lt;\/h2&gt;\r\n\t\t&lt;p&gt;Hit the next arrow to reveal me!&lt;\/p&gt;\r\n\t\t&lt;p class=\"fragment\"&gt;I'm number one&lt;\/p&gt;\r\n\t\t&lt;p class=\"fragment\"&gt;And I'm number two&lt;\/p&gt;\r\n\t\t&lt;p class=\"fragment\"&gt;Hey don't forget me! I'm third.&lt;\/p&gt;\r\n\t&lt;\/section&gt;\r\n&lt;\/section&gt;\r\n<\/pre>\n<p>Finally, for the punchline, I want to use a  popular <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Eric_Cantona\">Eric Cantona<\/a> quote. Just wrap the word with a <code>&lt;blockquote&gt;<\/code> element to get a pretty quote style. And to internally link to other slide, just add an <code>a<\/code> tag with the slide link map. The following is the result:<\/p>\n<pre>\r\n&lt;section&gt;\r\n\t&lt;h2&gt;The Punchline&lt;\/h2&gt;\r\n\t&lt;p&gt;This is one of very popular &lt;a href=\"https:\/\/en.wikipedia.org\/wiki\/Eric_Cantona\" rel=\"external\"&gt;Eric Cantona&lt;\/a&gt; quotes:&lt;\/p&gt;\r\n\t&lt;blockquote&gt;\r\n\t\t\u201cWhen the seagulls follow the trawler, it's because they think sardines will be thrown into the sea. Thank you very much.\u201d\r\n\t&lt;\/blockquote&gt;\r\n\t&lt;p&gt;Click &lt;a href=\"#\"&gt;here&lt;\/a&gt; to get back to the first page.&lt;\/p&gt;\r\n&lt;\/section&gt;\r\n<\/pre>\n<p>After everything has come together,  the last step to make the presentation work is by adding the following configuration:<\/p>\n<pre>\r\n&lt;script&gt;\r\n\tReveal.initialize({\r\n\t\tcontrols: true,\r\n\t\tprogress: true,\r\n\t\thistory: true,\r\n\t\tcenter: true,\r\n\t});\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>Those are the basic configurations that we need for basic implementation. A full list of configurations and other advance settings like markdown, notes, auto-sliding and more can be found <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/hakimel\/reveal.js\/\">here<\/a>.<\/p>\n<p>Now we have  a pretty slide for the presentation. This is the intro:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/revealjs-html-presentation-framework\/intro-demo.png\" alt=\"intro demo\" width=\"500\" height=\"320\"><\/figure>\n<p>This is our fragmented view:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/revealjs-html-presentation-framework\/fragmented-view.png\" alt=\"fragmented view\" width=\"500\" height=\"320\"><\/figure>\n<p>And this is the final slide:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/revealjs-html-presentation-framework\/quote-slide.png\" alt=\"quote slide\" width=\"500\" height=\"320\"><\/figure>\n<h2>Conclusion<\/h2>\n<p>With this tool, you can create a great HTML presentation within your site. You can find some examples for inspiration <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/hakimel\/reveal.js\/wiki\/Example-Presentations\">here<\/a>. Compared to other impressive presentation libraries, like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/impress\/impress.js\/\">Impress.js<\/a> which focuses on its wonderful transition animation, Reveal in my opinion is still way <strong>more powerful in terms of features.<\/strong><\/p>","protected":false},"excerpt":{"rendered":"<p>Presentations are a great way to convey valuable and important information. Whether it\u2019s for business, education, or marketing purposes, you have to create interesting, informative and engaging presentation slides. It\u2019s most often done on a desktop or smartphone, but you can also create it using web technology. In this post, I will introduce you to&hellip;<\/p>\n","protected":false},"author":136,"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,4117,1484,3026],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Reveal.js - A Framework For Amazing HTML Presentation - Hongkiat<\/title>\n<meta name=\"description\" content=\"Presentations are a great way to convey valuable and important information. Whether it&#039;s for business, education, or marketing purposes, you have to\" \/>\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\/revealjs-html-presentation-framework\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Reveal.js - A Framework For Amazing HTML Presentation\" \/>\n<meta property=\"og:description\" content=\"Presentations are a great way to convey valuable and important information. Whether it&#039;s for business, education, or marketing purposes, you have to\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/revealjs-html-presentation-framework\/\" \/>\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=\"2014-06-24T07:01:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:59:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/revealjs-html-presentation-framework\/intro-demo.png\" \/>\n<meta name=\"author\" content=\"Irfan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@IrfanFza\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Irfan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/revealjs-html-presentation-framework\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/revealjs-html-presentation-framework\\\/\"},\"author\":{\"name\":\"Irfan\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\"},\"headline\":\"Reveal.js &#8211; A Framework For Amazing HTML Presentation\",\"datePublished\":\"2014-06-24T07:01:53+00:00\",\"dateModified\":\"2025-04-03T17:59:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/revealjs-html-presentation-framework\\\/\"},\"wordCount\":621,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/revealjs-html-presentation-framework\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/revealjs-html-presentation-framework\\\/intro-demo.png\",\"keywords\":[\"HTML\",\"Javascripts\",\"presentation\",\"presentation tools\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/revealjs-html-presentation-framework\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/revealjs-html-presentation-framework\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/revealjs-html-presentation-framework\\\/\",\"name\":\"Reveal.js - A Framework For Amazing HTML Presentation - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/revealjs-html-presentation-framework\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/revealjs-html-presentation-framework\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/revealjs-html-presentation-framework\\\/intro-demo.png\",\"datePublished\":\"2014-06-24T07:01:53+00:00\",\"dateModified\":\"2025-04-03T17:59:06+00:00\",\"description\":\"Presentations are a great way to convey valuable and important information. Whether it's for business, education, or marketing purposes, you have to\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/revealjs-html-presentation-framework\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/revealjs-html-presentation-framework\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/revealjs-html-presentation-framework\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/revealjs-html-presentation-framework\\\/intro-demo.png\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/revealjs-html-presentation-framework\\\/intro-demo.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/revealjs-html-presentation-framework\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Reveal.js &#8211; A Framework For Amazing HTML Presentation\"}]},{\"@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\\\/483b1092b8017f37d977331e91935d8c\",\"name\":\"Irfan\",\"description\":\"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/IrfanFza\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/irfan_fauzii\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Reveal.js - A Framework For Amazing HTML Presentation - Hongkiat","description":"Presentations are a great way to convey valuable and important information. Whether it's for business, education, or marketing purposes, you have to","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\/revealjs-html-presentation-framework\/","og_locale":"en_US","og_type":"article","og_title":"Reveal.js - A Framework For Amazing HTML Presentation","og_description":"Presentations are a great way to convey valuable and important information. Whether it's for business, education, or marketing purposes, you have to","og_url":"https:\/\/www.hongkiat.com\/blog\/revealjs-html-presentation-framework\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-06-24T07:01:53+00:00","article_modified_time":"2025-04-03T17:59:06+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/revealjs-html-presentation-framework\/intro-demo.png","type":"","width":"","height":""}],"author":"Irfan","twitter_card":"summary_large_image","twitter_creator":"@IrfanFza","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Irfan","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/revealjs-html-presentation-framework\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/revealjs-html-presentation-framework\/"},"author":{"name":"Irfan","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c"},"headline":"Reveal.js &#8211; A Framework For Amazing HTML Presentation","datePublished":"2014-06-24T07:01:53+00:00","dateModified":"2025-04-03T17:59:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/revealjs-html-presentation-framework\/"},"wordCount":621,"commentCount":1,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/revealjs-html-presentation-framework\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/revealjs-html-presentation-framework\/intro-demo.png","keywords":["HTML","Javascripts","presentation","presentation tools"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/revealjs-html-presentation-framework\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/revealjs-html-presentation-framework\/","url":"https:\/\/www.hongkiat.com\/blog\/revealjs-html-presentation-framework\/","name":"Reveal.js - A Framework For Amazing HTML Presentation - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/revealjs-html-presentation-framework\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/revealjs-html-presentation-framework\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/revealjs-html-presentation-framework\/intro-demo.png","datePublished":"2014-06-24T07:01:53+00:00","dateModified":"2025-04-03T17:59:06+00:00","description":"Presentations are a great way to convey valuable and important information. Whether it's for business, education, or marketing purposes, you have to","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/revealjs-html-presentation-framework\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/revealjs-html-presentation-framework\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/revealjs-html-presentation-framework\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/revealjs-html-presentation-framework\/intro-demo.png","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/revealjs-html-presentation-framework\/intro-demo.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/revealjs-html-presentation-framework\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Reveal.js &#8211; A Framework For Amazing HTML Presentation"}]},{"@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\/483b1092b8017f37d977331e91935d8c","name":"Irfan","description":"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.","sameAs":["https:\/\/x.com\/IrfanFza"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/irfan_fauzii\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-5AO","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/21502","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\/136"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=21502"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/21502\/revisions"}],"predecessor-version":[{"id":73703,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/21502\/revisions\/73703"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=21502"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=21502"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=21502"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=21502"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}