{"id":14049,"date":"2012-06-22T21:01:43","date_gmt":"2012-06-22T13:01:43","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=14049"},"modified":"2025-04-04T01:09:40","modified_gmt":"2025-04-03T17:09:40","slug":"html5-single-product-page","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/html5-single-product-page\/","title":{"rendered":"Create a Single Product Page with HTML5"},"content":{"rendered":"<p>In this tutorial, we\u2019ll develop a single product page, using modern HTML5 techniques. We\u2019ll incorporate methods previously discussed, including the <a href=\"https:\/\/www.hongkiat.com\/blog\/html5-details-summary-tags\/\"><code>&lt;details&gt;<\/code> element<\/a> and the <a href=\"https:\/\/www.hongkiat.com\/blog\/a-look-into-css3-negation-not-selector\/\">CSS negation selector<\/a>.<\/p>\n<p>Let\u2019s begin our project.<\/p>\n<h2>HTML5 Markup Overview<\/h2>\n<p>Let\u2019s start by creating a basic HTML document with the following structure:<\/p>\n<pre>\r\n&lt;div class=\"product\"&gt;\r\n\r\n  &lt;header&gt;\r\n    &lt;hgroup&gt;\r\n      &lt;h1&gt;Product Name - Specifications&lt;\/h1&gt;\r\n      &lt;h4&gt;Catchy Tagline Here.&lt;\/h4&gt;\r\n    &lt;\/hgroup&gt;\r\n  &lt;\/header&gt;\r\n\r\n  &lt;figure&gt;\r\n    &lt;img src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-single-product-page\/product-image.png\" alt=\"Product Image\"&gt;\r\n  &lt;\/figure&gt;\r\n\r\n  &lt;section&gt;\r\n    &lt;p&gt;Description of the product with key features and benefits highlighted here.&lt;\/p&gt;\r\n    &lt;details&gt;\r\n      &lt;summary&gt;Product Features&lt;\/summary&gt;\r\n      &lt;ul&gt;\r\n        &lt;li&gt;Feature 1&lt;\/li&gt;\r\n        &lt;li&gt;Feature 2&lt;\/li&gt;\r\n        &lt;li&gt;Feature 3&lt;\/li&gt;\r\n        &lt;li&gt;Feature 4&lt;\/li&gt;\r\n        &lt;li&gt;Feature 5&lt;\/li&gt;\r\n        &lt;li&gt;Feature 6&lt;\/li&gt;\r\n      &lt;\/ul&gt;\r\n    &lt;\/details&gt;\r\n    &lt;button&gt;Buy Now&lt;\/button&gt;\r\n  &lt;\/section&gt;\r\n\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>We utilize several HTML5 tags, such as <code>header<\/code>, <code>hgroup<\/code>, <code>figure<\/code>, <code>section<\/code>, and the previously discussed <code>details<\/code> and <code>summary<\/code> tags.<\/p>\n<p>While we won\u2019t delve deeply into these tags here, they are fundamental concepts readily available through various resources. If you\u2019re new to HTML5, I recommend the following resources for a comprehensive understanding:<\/p>\n<ul>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/html5doctor.com\/lets-talk-about-semantics\/\">Let\u2019s Talk about Semantics<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3schools.com\/html\/html5_new_elements.asp\">The HTML5 Header Element<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/html5doctor.com\/the-hgroup-element\/\">The hgroup Element<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3schools.com\/html\/html5_new_elements.asp\">HTML5 Tag Reference<\/a><\/li>\n<\/ul>\n<p>Let\u2019s examine the initial layout of our page.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-single-product-page\/product-page-preview-plain.jpg\" alt=\"Basic Product Page Layout\" width=\"500\" height=\"580\"><\/figure>\n<p>The layout starts with a header, followed by a section containing the image, description, and the \u2018Buy Now\u2019 button. Now, let\u2019s enhance this basic page.<\/p>\n<h2>Styling the Page<\/h2>\n<p>We\u2019ll begin by normalizing all default browser styles using a custom stylesheet. We will also add a gradient background to the <code>html<\/code> tag:<\/p>\n<pre>\r\nhtml {\r\n  height: 100%;\r\n  background: #f3f3f3;\r\n  background: -moz-linear-gradient(top, #f3f3f3 0%, #ffffff 50%);\r\n  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3f3f3), color-stop(50%,#ffffff));\r\n  background: -webkit-linear-gradient(top, #f3f3f3 0%, #ffffff 50%);\r\n  background: -o-linear-gradient(top, #f3f3f3 0%, #ffffff 50%);\r\n  background: -ms-linear-gradient(top, #f3f3f3 0%, #ffffff 50%);\r\n  background: linear-gradient(to bottom, #f3f3f3 0%, #ffffff 50%);\r\n  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f3f3', endColorstr='#ffffff', GradientType=0);\r\n}\r\n<\/pre>\n<p>Our product elements are contained within a <code>div<\/code> with the class \u2018product\u2019. Here, we will center this wrapper and set its width to approximately <code>650px<\/code>:<\/p>\n<pre>\r\n.wrapper {\r\n  width: 650px;\r\n  margin: auto;\r\n  padding: 25px 0;\r\n}\r\n<\/pre>\n<h2>Styling the Header Section<\/h2>\n<p>In the header section, we style two headings, <code>h1<\/code> and <code>h4<\/code>. Let\u2019s apply some CSS to these elements:<\/p>\n<pre>\r\nh1, h4 {\r\n  font-family: 'Helvetica Neue', Arial, sans-serif;\r\n  font-weight: normal;\r\n  margin: 0; \r\n}\r\nh1 { \r\n  font-size: 24pt;\r\n}\r\nh4 {\r\n  font-size: 16pt;\r\n  color: #aaa; \r\n}\r\n<\/pre>\n<p>Next, we\u2019ll add a bit of spacing at the bottom of the <code>header<\/code> to separate it from the content below:<\/p>\n<pre>\r\nheader {\r\n  margin-bottom: 20px;\r\n}\r\n<\/pre>\n<p>Noticing a lot of whitespace on the right side of the header, we can balance this by incorporating a logo:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-single-product-page\/product-page-1.jpg\" alt=\"Header Layout with White Space\" width=\"500\" height=\"292\"><\/figure>\n<p>Let\u2019s place the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.apple.com\/\">Apple logo<\/a> on the right side of the header:<\/p>\n<pre>\r\nheader {\r\n  margin-bottom: 20px;\r\n  background: url('https:\/\/assets.hongkiat.com\/uploads\/html5-single-product-page\/apple-logo.png') no-repeat right center;\r\n}\r\n<\/pre>\n<h2>Styling the Product Image<\/h2>\n<p>First, we\u2019ll position the image to the left and limit its maximum width:<\/p>\n<pre>\r\nfigure {\r\n  float: left;\r\n}\r\nfigure img {\r\n  max-width: 350px;\r\n}\r\n<\/pre>\n<p>With the image aligned to the left, we\u2019ll float the description section to the right and set its width:<\/p>\n<pre>\r\nsection {\r\n  font-family: 'Tahoma', Arial, sans-serif;\r\n  line-height: 150%;\r\n  float: right;\r\n  width: 300px;\r\n  color: #333;\r\n}\r\n<\/pre>\n<p>Here\u2019s how our layout looks with these changes:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-single-product-page\/product-page-3.jpg\" alt=\"Product Image and Description Layout\" width=\"500\" height=\"363\"><\/figure>\n<p>The layout is shaping up nicely, although the <code>details<\/code> tag may not function perfectly in all browsers yet. Next, we\u2019ll focus on styling the \u2018Buy Now\u2019 button to enhance its appearance.<\/p>\n<h2>Styling the \u2018Buy Now\u2019 Button<\/h2>\n<p>For the button styles, we aim to replicate the aesthetic seen on the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.apple.com\/store\">Apple.com Store<\/a>. Below is the CSS needed to style the button accordingly:<\/p>\n<pre>\r\nbutton {\r\n  background: #36a9ea;\r\n  background: -moz-linear-gradient(top, #36a9ea 0%, #127fd2 100%);\r\n  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #36a9ea), color-stop(100%, #127fd2));\r\n  background: -webkit-linear-gradient(top, #36a9ea 0%, #127fd2 100%);\r\n  background: -o-linear-gradient(top, #36a9ea 0%, #127fd2 100%);\r\n  background: -ms-linear-gradient(top, #36a9ea 0%, #127fd2 100%);\r\n  background: linear-gradient(to bottom, #36a9ea 0%, #127fd2 100%);\r\n  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#36a9ea', endColorstr='#127fd2', GradientType=0);\r\n  border: 1px solid #00599d;\r\n  color: #fff;\r\n  padding: 8px 20px;\r\n  border-radius: 3px;\r\n  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1), inset 0px 1px 0px 0px rgba(250, 250, 250, 0.3);\r\n  text-shadow: 0px 1px 1px #156cc4;\r\n  font-size: 10pt;\r\n}\r\n\r\nbutton:hover {\r\n  background: #2f90d5;\r\n  background: -moz-linear-gradient(top, #2f90d5 0%, #0351b7 100%);\r\n  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2f90d5), color-stop(100%, #0351b7));\r\n  background: -webkit-linear-gradient(top, #2f90d5 0%, #0351b7 100%);\r\n  background: -o-linear-gradient(top, #2f90d5 0%, #0351b7 100%);\r\n  background: -ms-linear-gradient(top, #2f90d5 0%, #0351b7 100%);\r\n  background: linear-gradient(to bottom, #2f90d5 0%, #0351b7 100%);\r\n}\r\n\r\nbutton:active {\r\n  background: #127fd2;\r\n  box-shadow: inset 0px 2px 1px 0px rgba(0, 47, 117, 0.5), 0px 1px 1px 0px rgba(0, 0, 0, 0);\r\n}\r\n<\/pre>\n<p>The button now sports a polished look, enhancing the page\u2019s overall design.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-single-product-page\/product-page-4.jpg\" alt=\"Styled Buy Now Button\" width=\"500\" height=\"204\"><\/figure>\n<h2>Implementing Fallback for the \u2018Details\u2019 Element<\/h2>\n<p>In this section, we aim to provide similar functionality for the <code>details<\/code> element in browsers other than Chrome. Previously, we automated this process with a script, but now we\u2019ll handle it manually.<\/p>\n<p><strong>Note:<\/strong> As a quick recap, the <code>details<\/code> element is primarily supported in the Chrome browser.<\/p>\n<p>Let\u2019s start with the CSS adjustments. We\u2019ll make the <code>summary<\/code> tag appear clickable by changing the cursor style:<\/p>\n<pre>\r\nsummary {\r\n  cursor: pointer;\r\n  font-size: 12pt;\r\n  outline: none;\r\n}\r\n<\/pre>\n<p>Next, we\u2019ll add vertical margins to the <code>details<\/code> element to create more space around it:<\/p>\n<pre>\r\ndetails {\r\n  margin: 20px 0;\r\n}\r\n<\/pre>\n<p>By default, the <code>summary<\/code> tag displays an arrow. We\u2019ll replace this with a plus-minus icon. Before we proceed, remember that I have previously downloaded icons from <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/p.yusukekamiyamane.com\/\">this Fugue collection<\/a> and combined them into one sprite file.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-single-product-page\/product-page-6-icon.jpg\" alt=\"Plus-Minus Icon\" width=\"500\" height=\"90\"><\/figure>\n<p>We\u2019ll add a pseudo-element before the summary to attach the plus icon as its background:<\/p>\n<pre>\r\ndetails > summary:before {\r\n  width: 16px;\r\n  height: 16px;\r\n  display: inline-block;\r\n  content: '' !important;\r\n  background: url('..\/https:\/\/assets.hongkiat.com\/uploads\/html5-single-product-page\/plus-min.png') no-repeat center top;\r\n  margin-right: 5px;\r\n  position: relative;\r\n  top: 2px;\r\n}\r\n<\/pre>\n<p>When the <code>details<\/code> element is open, the background position shifts to display the minus icon:<\/p>\n<pre>\r\ndetails[open] > summary:before,\r\ndetails.open > summary:before {\r\n  background: url('..\/https:\/\/assets.hongkiat.com\/uploads\/html5-single-product-page\/plus-min.png') no-repeat center bottom;\r\n}\r\n<\/pre>\n<p>The <code>[open]<\/code> selector targets the open attribute of the <code>details<\/code> element in supported browsers.<\/p>\n<p>We will also hide the default arrow in Chrome:<\/p>\n<pre>\r\ndetails > summary::-webkit-details-marker {\r\n  display: none;\r\n}\r\n<\/pre>\n<p>Here\u2019s how it looks with our new icon:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-single-product-page\/product-page-6.jpg\" alt=\"Custom Plus-Minus Icon Effect\" width=\"500\" height=\"250\"><\/figure>\n<p>The default arrow has been replaced, and in Chrome, clicking the summary toggles the icon. However, this effect isn\u2019t replicated in other browsers yet. In the next step, we\u2019ll explore how to achieve this with jQuery.<\/p>\n<h2>Implementing a Toggle Effect with jQuery<\/h2>\n<p>Before diving into the jQuery script, I\u2019d like to acknowledge <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.iandevlin.com\/blog\/2011\/12\/html5\/html5-the-details-and-summary-elements\/\">Ian Devlin for his inspirational work<\/a>. The script below is a slight modification of his original concept.<\/p>\n<p>First, we create a variable to store the <code>summary<\/code> element:<\/p>\n<pre>\r\nvar summary = $('details summary');\r\n<\/pre>\n<p>Next, we\u2019ll wrap all sibling elements of <code>summary<\/code> within a <code>div<\/code>:<\/p>\n<pre>\r\nsummary.siblings().wrapAll('&lt;div&gt;&lt;\/div&gt;');\r\n<\/pre>\n<p>We\u2019ll then hide this div when the <code>details<\/code> element does not have the \u2018open\u2019 class:<\/p>\n<pre>\r\n$('details:not(.open) summary').siblings('div').hide();\r\n<\/pre>\n<p>Upon clicking <code>summary<\/code>, the hidden div will toggle visibility:<\/p>\n<pre>\r\nsummary.click(function() {\r\n    $(this).siblings('div').toggle();\r\n    $('details').toggleClass('open');\r\n});\r\n<\/pre>\n<p>This script will only run in browsers that do not support the <code>details<\/code> element:<\/p>\n<pre>\r\nif ($('html').hasClass('no-details')) {\r\n    var summary = $('details summary');\r\n    summary.siblings().wrapAll('&lt;div class=\"slide\"&gt;&lt;\/div&gt;');\r\n    $('details:not(.open) summary').siblings('div').hide();\r\n    summary.click(function() {\r\n        $(this).siblings('div').toggle();\r\n        $('details').toggleClass('open');\r\n    });\r\n}\r\n<\/pre>\n<p>Let\u2019s test the toggle effect in various browsers. I have verified it works as far back as Internet Explorer 7.<\/p>\n<p><a href=\"https:\/\/assets.hongkiat.com\/uploads\/html5-single-product-page\/demo\/index.html\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"__blank\" rel=\"noopener nofollow\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  See demo <\/span><\/a>\n<a href=\"https:\/\/assets.hongkiat.com\/uploads\/html5-single-product-page\/demo\/source.zip\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"__blank\" rel=\"noopener nofollow\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  Download source <\/span><\/a><\/p>\n<p><strong>Tips:<\/strong> For a smoother transition, replace <code>.toggle()<\/code> with <code>.slideToggle()<\/code> for a sliding effect. Additionally, if you want the <code>details<\/code> element to be open by default, simply add an \u2018open\u2019 class to it.<\/p>\n<h2>Conclusion<\/h2>\n<p>We\u2019ve covered every step needed to create a single product page using HTML5, including solutions for unsupported browsers and replicating the toggle effect for the <code>details<\/code> element. I hope this tutorial has been informative and useful for your projects.<\/p>\n<p>While I\u2019ve tried to make everything clear, I realize some aspects may require further explanation. If you have any questions, please don\u2019t hesitate to ask in the comments section below.<\/p>","protected":false},"excerpt":{"rendered":"<p>In this tutorial, we\u2019ll develop a single product page, using modern HTML5 techniques. We\u2019ll incorporate methods previously discussed, including the &lt;details&gt; element and the CSS negation selector. Let\u2019s begin our project. HTML5 Markup Overview Let\u2019s start by creating a basic HTML document with the following structure: &lt;div class=&#8221;product&#8221;&gt; &lt;header&gt; &lt;hgroup&gt; &lt;h1&gt;Product Name &#8211; Specifications&lt;\/h1&gt; &lt;h4&gt;Catchy&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[507,506,2016,2298],"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.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Create a Single Product Page with HTML5 - Hongkiat<\/title>\n<meta name=\"description\" content=\"In this tutorial, we&#039;ll develop a single product page, using modern HTML5 techniques. We&#039;ll incorporate methods previously discussed, including the\" \/>\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\/html5-single-product-page\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a Single Product Page with HTML5\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, we&#039;ll develop a single product page, using modern HTML5 techniques. We&#039;ll incorporate methods previously discussed, including the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/html5-single-product-page\/\" \/>\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=\"2012-06-22T13:01:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:09:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/html5-single-product-page\/product-page-preview-plain.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-single-product-page\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-single-product-page\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Create a Single Product Page with HTML5\",\"datePublished\":\"2012-06-22T13:01:43+00:00\",\"dateModified\":\"2025-04-03T17:09:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-single-product-page\\\/\"},\"wordCount\":892,\"commentCount\":22,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-single-product-page\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-single-product-page\\\/product-page-preview-plain.jpg\",\"keywords\":[\"CSS\",\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\",\"Modernizr\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-single-product-page\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-single-product-page\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-single-product-page\\\/\",\"name\":\"Create a Single Product Page with HTML5 - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-single-product-page\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-single-product-page\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-single-product-page\\\/product-page-preview-plain.jpg\",\"datePublished\":\"2012-06-22T13:01:43+00:00\",\"dateModified\":\"2025-04-03T17:09:40+00:00\",\"description\":\"In this tutorial, we'll develop a single product page, using modern HTML5 techniques. We'll incorporate methods previously discussed, including the\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-single-product-page\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-single-product-page\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-single-product-page\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-single-product-page\\\/product-page-preview-plain.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-single-product-page\\\/product-page-preview-plain.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-single-product-page\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create a Single Product Page with HTML5\"}]},{\"@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\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Create a Single Product Page with HTML5 - Hongkiat","description":"In this tutorial, we'll develop a single product page, using modern HTML5 techniques. We'll incorporate methods previously discussed, including the","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\/html5-single-product-page\/","og_locale":"en_US","og_type":"article","og_title":"Create a Single Product Page with HTML5","og_description":"In this tutorial, we'll develop a single product page, using modern HTML5 techniques. We'll incorporate methods previously discussed, including the","og_url":"https:\/\/www.hongkiat.com\/blog\/html5-single-product-page\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-06-22T13:01:43+00:00","article_modified_time":"2025-04-03T17:09:40+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/html5-single-product-page\/product-page-preview-plain.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/html5-single-product-page\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-single-product-page\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Create a Single Product Page with HTML5","datePublished":"2012-06-22T13:01:43+00:00","dateModified":"2025-04-03T17:09:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-single-product-page\/"},"wordCount":892,"commentCount":22,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-single-product-page\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-single-product-page\/product-page-preview-plain.jpg","keywords":["CSS","HTML","HTML5 \/ CSS3 Tutorials","Modernizr"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/html5-single-product-page\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/html5-single-product-page\/","url":"https:\/\/www.hongkiat.com\/blog\/html5-single-product-page\/","name":"Create a Single Product Page with HTML5 - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-single-product-page\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-single-product-page\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-single-product-page\/product-page-preview-plain.jpg","datePublished":"2012-06-22T13:01:43+00:00","dateModified":"2025-04-03T17:09:40+00:00","description":"In this tutorial, we'll develop a single product page, using modern HTML5 techniques. We'll incorporate methods previously discussed, including the","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-single-product-page\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/html5-single-product-page\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/html5-single-product-page\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/html5-single-product-page\/product-page-preview-plain.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-single-product-page\/product-page-preview-plain.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/html5-single-product-page\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create a Single Product Page with HTML5"}]},{"@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\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-3EB","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14049","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\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=14049"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14049\/revisions"}],"predecessor-version":[{"id":73525,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14049\/revisions\/73525"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=14049"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=14049"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=14049"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=14049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}