{"id":89581,"date":"2017-07-18T10:02:17","date_gmt":"2017-07-18T10:02:17","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=89581"},"modified":"2017-07-18T10:29:37","modified_gmt":"2017-07-18T10:29:37","slug":"how-to-use-html-attributes-in-visualforce","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-use-html-attributes-in-visualforce\/","title":{"rendered":"How to use HTML attributes in Visualforce"},"content":{"rendered":"<p>For every <strong>Web developer<\/strong> the basic requirement is <strong>HTML<\/strong>. This markup language works as the basis of developing any <strong>Webpage<\/strong>. <strong>Visualforce<\/strong>, also being a web development platform, gives the support of using HTML tags directly. However for that we have to sacrifice some of the standard functionality it provides like the\u00a0<strong>rendered<\/strong> attribute, or the <strong>action<\/strong> attribute used in command button. We would always want the ability to use both html attributes and Visualforce tags together. This is what I am going to demonstrate, how to use HTML attributes in Visualforce.<\/p>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<h3 class=\"panel-title\">HTML- Pass through<\/h3>\n<\/div>\n<div class=\"panel-body\">\n<p>Visualforce gives us the ability to use &#8216;<strong>html-<\/strong>&#8216; passed through to use attributes which are supported by HTML but are not available in the former. Using this attribute is pretty easy, all we have to do is add &#8216;html-&#8216; in the beginning of the attribute that we want to use and the attribute will be passed as it is in the final output of the HTML page.<\/p>\n<p>For example, we have a <strong>placeholder<\/strong> attribute in HTML, but <strong>&lt;apex:inputtext&gt;<\/strong> does not give the functionality to use the it. In order to get that attribute we will write the tag something like this.<\/p>\n<pre class=\"brush:xml\">&lt;apex:inputtext html-placeholder=\"Write Text\"\/&gt;<\/pre>\n<p>Now the placeholder will be visible in the output of the page. You can use this code in your Visualforce page and see the changes.<\/p>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<h3 class=\"panel-title\">More Examples<\/h3>\n<\/div>\n<div class=\"panel-body\">\n<p>We can also use this pass through with many other attributes, like for example, I have created a page called JS1Clone. The code for this page is as follows:<\/p>\n<pre class=\"brush:xml\">&lt;apex:page showHeader=\"false\" sidebar=\"false\" docType=\"html-5.0\" controller=\"testcontroller\"&gt;\r\n    &lt;apex:form&gt;\r\n        &lt;apex:inputText value=\"{!emptyvar}\" html-placeholder=\"Name\"\/&gt;&lt;br\/&gt;&lt;br\/&gt;\r\n        &lt;apex:input type=\"number\" html-min=\"3\" html-max=\"9\" html-step=\"2\" value=\"{!emptynumber}\"\/&gt;&lt;br\/&gt;&lt;br\/&gt;\r\n        &lt;input type=\"submit\" value=\"Submit\"\/&gt;\r\n    &lt;\/apex:form&gt;\r\n&lt;\/apex:page&gt;<\/pre>\n<p>As you can see in this example that the html- passthrough is used to show the placeholder and also the min and max attribute of an input type number.<\/p>\n<p>Also I have created a class for this example, which literally does nothing. It is there to just show the functionality of the attributes.<\/p>\n<pre class=\"brush:java\">public class testcontroller {\r\n    public string emptyvar { get; set;}\r\n    public integer emptynumber { get; set;}\r\n    \r\n    public void nothing(){\r\n        \r\n    }\r\n}<\/pre>\n<p>Another example is used with iFrame, where the passthrough is used to get it&#8217;s attributes.<\/p>\n<pre class=\"brush:xml\">&lt;apex:page controller=\"testcontroller\" docType=\"html-5.0\" sidebar=\"false\" showHeader=\"false\"&gt;\r\n\r\n    &lt;link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\"\/&gt;\r\n  \t&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js\"&gt;&lt;\/script&gt;\r\n  \t&lt;script&gt; src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/js\/bootstrap.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;apex:form&gt;\r\n\r\n        &lt;apex:iframe html-srcdoc=\"&lt;p&gt;The iFrame below me contains a form&lt;\/p&gt;\" src=\"JS1Clone\" frameborder=\"true\" height=\"50px\"\/&gt;\r\n        &lt;apex:iframe src=\"JS1Clone\" html-sandbox=\"\" height=\"300px\" scrolling=\"true\" frameborder=\"true\"\/&gt;\r\n\r\n        &lt;apex:outputLink value=\"{!$CurrentPage.URL}\" html-download=\"testpage.html\" html-media=\"screen\"&gt;Download this page&lt;\/apex:outputLink&gt;\r\n        &lt;apex:outputPanel layout=\"block\" styleclass=\"progress\"&gt;\r\n    \t\t&lt;apex:outputPanel layout=\"block\" styleclass=\"progress-bar\" html-role=\"progressbar\" html-aria-valuenow=\"70\" html-aria-valuemin=\"0\" html-aria-valuemax=\"100\" style=\"width:70%\"&gt;\r\n      \t\t\t&lt;apex:outputPanel styleclass=\"sr-only\"&gt;70% Complete&lt;\/apex:outputPanel&gt;\r\n    \t\t&lt;\/apex:outputPanel&gt;\r\n  \t\t&lt;\/apex:outputPanel&gt;\r\n\r\n        &lt;apex:commandButton reRender=\"none\" styleclass=\"btn btn-success\" html-data-toggle=\"collapse\" html-data-target=\"div[id*=demo]\" value=\"Simple collapsible\"&gt;&lt;\/apex:commandButton&gt;\r\n  \t\t\t&lt;apex:outputPanel layout=\"block\" id=\"demo\" styleclass=\"collapse\"&gt;\r\n    \t\t\tLorem ipsum dolor sit amet, consectetur adipisicing elit,\r\n\t\t\t    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\r\n    \t\t\tquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\r\n  \t\t\t&lt;\/apex:outputPanel&gt;\r\n    &lt;\/apex:form&gt;\r\n&lt;\/apex:page&gt;<\/pre>\n<p>Now in this example we can see that I have used <strong>Bootstrap<\/strong>, however attributes like data-target which are required in bootstrap, are not available in Visualforce, so html- can be used to get them to work. The <strong>iFrame<\/strong> attributes which are not available in Visualforce are also used with pass through.<\/p>\n<p>Also the target id for collapse is given as a wildcard character, as the output of visualforce pages modifies the id of the components.<\/p>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<h3 class=\"panel-title\">Output<\/h3>\n<\/div>\n<div class=\"panel-body\">\n<p>The output of the final created page with all the iFrame will look something like this:<\/p>\n<p><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/3yg82bhjjac0izf.jpg\"><img decoding=\"async\" class=\"alignnone size-full wp-image-90069\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/3yg82bhjjac0izf.jpg\" alt=\"\" width=\"1315\" height=\"678\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/3yg82bhjjac0izf.jpg 1315w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/3yg82bhjjac0izf-250x129.jpg 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/3yg82bhjjac0izf-300x155.jpg 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/3yg82bhjjac0izf-768x396.jpg 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/3yg82bhjjac0izf-1200x619.jpg 1200w\" sizes=\"(max-width: 1315px) 100vw, 1315px\" loading=\"lazy\" \/><\/a><\/p>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<h3 class=\"panel-title\">Support<\/h3>\n<\/div>\n<div class=\"panel-body\">\n<p>That\u2019s all for how to use pass through attribute in Visualforce, for any further queries feel free to add a ticket at:<\/p>\n<p><a href=\"https:\/\/webkul.uvdesk.com\/en\/customer\/create-ticket\/\">https:\/\/webkul.uvdesk.com\/en\/customer\/create-ticket\/<\/a><\/p>\n<p>Or let us know your views on how to make this code better, in comments section below.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>For every Web developer the basic requirement is HTML. This markup language works as the basis of developing any Webpage. Visualforce, also being a web development platform, gives the support of using HTML tags directly. However for that we have to sacrifice some of the standard functionality it provides like the\u00a0rendered attribute, or the action <a href=\"https:\/\/webkul.com\/blog\/how-to-use-html-attributes-in-visualforce\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":144,"featured_media":90225,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1889,1887,1888],"tags":[1884,230,5085,1885,5086,1933],"class_list":["post-89581","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-apex","category-salesforce","category-visualforce","tag-apex","tag-html","tag-passthrough","tag-salesforce","tag-vf-html","tag-visualforce"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to use HTML attributes in Visualforce which are not available in it<\/title>\n<meta name=\"description\" content=\"How to use HTML attributes in Visualforce which are not available in it. For every web developer the basic requirement is HTML. This markup language...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/how-to-use-html-attributes-in-visualforce\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use HTML attributes in Visualforce which are not available in it\" \/>\n<meta property=\"og:description\" content=\"How to use HTML attributes in Visualforce which are not available in it. For every web developer the basic requirement is HTML. This markup language...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-use-html-attributes-in-visualforce\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-07-18T10:02:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-07-18T10:29:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/download-12.png\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Yathansh Sharma\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Yathansh Sharma\" \/>\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:\/\/webkul.com\/blog\/how-to-use-html-attributes-in-visualforce\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-html-attributes-in-visualforce\/\"},\"author\":{\"name\":\"Yathansh Sharma\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/2cf74c97cc99e81430138433b2e5a342\"},\"headline\":\"How to use HTML attributes in Visualforce\",\"datePublished\":\"2017-07-18T10:02:17+00:00\",\"dateModified\":\"2017-07-18T10:29:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-html-attributes-in-visualforce\/\"},\"wordCount\":470,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-html-attributes-in-visualforce\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/download-12.png\",\"keywords\":[\"Apex\",\"html\",\"passthrough\",\"Salesforce\",\"vf html\",\"Visualforce\"],\"articleSection\":[\"Apex\",\"Salesforce\",\"Visualforce\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-use-html-attributes-in-visualforce\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-html-attributes-in-visualforce\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-use-html-attributes-in-visualforce\/\",\"name\":\"How to use HTML attributes in Visualforce which are not available in it\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-html-attributes-in-visualforce\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-html-attributes-in-visualforce\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/download-12.png\",\"datePublished\":\"2017-07-18T10:02:17+00:00\",\"dateModified\":\"2017-07-18T10:29:37+00:00\",\"description\":\"How to use HTML attributes in Visualforce which are not available in it. For every web developer the basic requirement is HTML. This markup language...\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-html-attributes-in-visualforce\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-use-html-attributes-in-visualforce\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-html-attributes-in-visualforce\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/download-12.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/download-12.png\",\"width\":825,\"height\":260},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-html-attributes-in-visualforce\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to use HTML attributes in Visualforce\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/2cf74c97cc99e81430138433b2e5a342\",\"name\":\"Yathansh Sharma\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/631dfbfdb0f359990ee300274cf444e7dc7da6005653e2b711d3c9197caa4ab3?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/631dfbfdb0f359990ee300274cf444e7dc7da6005653e2b711d3c9197caa4ab3?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Yathansh Sharma\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/yathansh-sharma081\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to use HTML attributes in Visualforce which are not available in it","description":"How to use HTML attributes in Visualforce which are not available in it. For every web developer the basic requirement is HTML. This markup language...","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:\/\/webkul.com\/blog\/how-to-use-html-attributes-in-visualforce\/","og_locale":"en_US","og_type":"article","og_title":"How to use HTML attributes in Visualforce which are not available in it","og_description":"How to use HTML attributes in Visualforce which are not available in it. For every web developer the basic requirement is HTML. This markup language...","og_url":"https:\/\/webkul.com\/blog\/how-to-use-html-attributes-in-visualforce\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2017-07-18T10:02:17+00:00","article_modified_time":"2017-07-18T10:29:37+00:00","og_image":[{"width":825,"height":260,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/download-12.png","type":"image\/png"}],"author":"Yathansh Sharma","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Yathansh Sharma","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-use-html-attributes-in-visualforce\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-use-html-attributes-in-visualforce\/"},"author":{"name":"Yathansh Sharma","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/2cf74c97cc99e81430138433b2e5a342"},"headline":"How to use HTML attributes in Visualforce","datePublished":"2017-07-18T10:02:17+00:00","dateModified":"2017-07-18T10:29:37+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-use-html-attributes-in-visualforce\/"},"wordCount":470,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-use-html-attributes-in-visualforce\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/download-12.png","keywords":["Apex","html","passthrough","Salesforce","vf html","Visualforce"],"articleSection":["Apex","Salesforce","Visualforce"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-use-html-attributes-in-visualforce\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-use-html-attributes-in-visualforce\/","url":"https:\/\/webkul.com\/blog\/how-to-use-html-attributes-in-visualforce\/","name":"How to use HTML attributes in Visualforce which are not available in it","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-use-html-attributes-in-visualforce\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-use-html-attributes-in-visualforce\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/download-12.png","datePublished":"2017-07-18T10:02:17+00:00","dateModified":"2017-07-18T10:29:37+00:00","description":"How to use HTML attributes in Visualforce which are not available in it. For every web developer the basic requirement is HTML. This markup language...","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-use-html-attributes-in-visualforce\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-use-html-attributes-in-visualforce\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/how-to-use-html-attributes-in-visualforce\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/download-12.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/download-12.png","width":825,"height":260},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-use-html-attributes-in-visualforce\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to use HTML attributes in Visualforce"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/2cf74c97cc99e81430138433b2e5a342","name":"Yathansh Sharma","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/631dfbfdb0f359990ee300274cf444e7dc7da6005653e2b711d3c9197caa4ab3?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/631dfbfdb0f359990ee300274cf444e7dc7da6005653e2b711d3c9197caa4ab3?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Yathansh Sharma"},"url":"https:\/\/webkul.com\/blog\/author\/yathansh-sharma081\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/89581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/144"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=89581"}],"version-history":[{"count":10,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/89581\/revisions"}],"predecessor-version":[{"id":91960,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/89581\/revisions\/91960"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/90225"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=89581"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=89581"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=89581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}