{"id":1312,"date":"2011-12-26T08:19:36","date_gmt":"2011-12-26T12:19:36","guid":{"rendered":"http:\/\/www.searchenginegenie.com\/web-design-blog\/?p=1312"},"modified":"2011-12-26T08:24:56","modified_gmt":"2011-12-26T12:24:56","slug":"how-to-use-the-article-element-html5","status":"publish","type":"post","link":"https:\/\/www.searchenginegenie.com\/web-design-blog\/how-to-use-the-article-element-html5\/","title":{"rendered":"How To Use The Article Element &#8211; HTML5"},"content":{"rendered":"<p>The &lt;article&gt; tag is new to HTML5 and it replaces &lt;div&gt; tag. It specifies self-contained content in a document, page or in a site. This can be use in Blog post, Magazine article, comments or in widgets.<\/p>\n<p><strong>How To Use The Article Tag:<\/strong><\/p>\n<div style=\"background: #F4F4F4; font-family: Arial, Helvetica, sans-serif; font-size: 12px; padding: 15px; color: #585858; border: 1px solid #DDD;\"><em>&lt;article&gt;<\/em><br \/>\n<em> &lt;h1&gt;heading&lt;\/h1&gt; <\/em><br \/>\n<em> &lt;p&gt;content&lt;\/p&gt;<\/em><br \/>\n<em> &lt;\/article&gt;<\/em><\/div>\n<p>&nbsp;<\/p>\n<p><strong><em>Coding:<\/em><\/strong><\/p>\n<div style=\"background: #F4F4F4; font-family: Arial, Helvetica, sans-serif; font-size: 12px; padding: 15px; color: #585858;\"><em>&lt;html&gt;<\/em><br \/>\n<em> &lt;head&gt;<\/em><br \/>\n<em> &lt;title&gt;How To Use The Article Element &#8211; HTML5&lt;\/title&gt;<\/em><br \/>\n<em> &lt;\/head&gt;<\/em><br \/>\n<em> &lt;style&gt;<\/em><br \/>\n<em> .wrapper{color:#000; width: 800px; }.wrapper article{ color:#FFF; font: Arial, Helvetica, sans-serif; font-size:14px; background-color:#3a3a3a; padding: 0px 20px 12px; border: #01a2e5 solid 0.01em;}.wrapper article p { color:#11a6dd;}<\/em><br \/>\n<em> .wrapper article h3 { font-family: &#8220;Times New Roman&#8221;, Times, serif; color: #FFF;}<\/em><br \/>\n<em> &lt;\/style&gt;<\/em><br \/>\n<em> &lt;body &gt;<\/em><br \/>\n<em> &lt;div class=&#8221;wrapper&#8221;&gt;<\/em><\/div>\n<div style=\"background: #F4F4F4; font-family: Arial, Helvetica, sans-serif; font-size: 12px; padding: 15px; color: #585858;\"><em>&lt;article&gt;<\/em><\/div>\n<div style=\"background: #F4F4F4; font-family: Arial, Helvetica, sans-serif; font-size: 12px; padding: 15px; color: #585858;\"><em>&lt;h3&gt;Heading&lt;\/h3&gt;<\/em><\/div>\n<div style=\"background: #F4F4F4; font-family: Arial, Helvetica, sans-serif; font-size: 12px; padding: 15px; color: #585858;\"><em>&lt;p&gt;Lectus aliquet penatibus ac mid nec elementum augue ridiculus nascetur? Cursus urna facilisis turpis aliquam porttitor, turpis egestas arcu, adipiscing nisi mus diam, cursus, urna scelerisque, nunc amet sociis elementum, placerat ac!&lt;\/p&gt;<\/em><\/div>\n<div style=\"background: #F4F4F4; font-family: Arial, Helvetica, sans-serif; font-size: 12px; padding: 15px; color: #585858;\"><em>&lt;p&gt;Sed, ac risus tincidunt scelerisque quis turpis a pulvinar amet? Aliquet cum porttitor integer enim odio non, tristique, duis nec dapibus integer&lt;\/p&gt;<\/em><\/div>\n<div style=\"background: #F4F4F4; font-family: Arial, Helvetica, sans-serif; font-size: 12px; padding: 15px; color: #585858;\"><em>&lt;\/article&gt;<\/em><\/div>\n<div style=\"background: #F4F4F4; font-family: Arial, Helvetica, sans-serif; font-size: 12px; padding: 15px; color: #585858;\">\n<p><em>&lt;\/div &gt;<\/em><\/p>\n<p><em>&lt;\/body&gt;<\/em><\/p>\n<p><em>&lt;\/html&gt;<\/em><\/p>\n<\/div>\n<style>\n.wrapper{\n\tcolor:#000;\n\tfont-family: Arial, Helvetica, sans-serif;\n\ttext-decoration: none;\n\tfont-size: 11px;\n}.wrapper article{\n\tcolor:#FFF;\n\tfloat:left;\n\tfont-size:11px;\n\tbackground-color:#F2F2F2;\n\tpadding: 10px 20px 12px;\n\tborder: 1px solid #DDD;\n\tfont-family: Arial, Helvetica, sans-serif;\n\tfont-weight: normal;\n\ttext-decoration: none;\n}.wrapper article p {\n\tcolor:#676767;\n\tpadding: 0px;\n\tmargin-top: 5px;\n\tmargin-right: 0px;\n\tmargin-bottom: 10px;\n\tmargin-left: 0px;\n}.wrapper article h3 {\n\tfont-family: Arial, Helvetica, sans-serif;\n\tcolor: #383838;\n\tfont-size: 20px;\n\tfont-weight: normal;\n\tfont-style: italic;\n\tborder-bottom-width: 1px;\n\tborder-bottom-style: solid;\n\tborder-bottom-color: #C8C8C8;\n\tmargin-top: 0px;\n\tmargin-right: 0px;\n\tmargin-bottom: 5px;\n\tmargin-left: 0px;\n\tpadding-top: 0px;\n\tpadding-right: 0px;\n\tpadding-bottom: 2px;\n\tpadding-left: 8px;\n\ttext-transform: uppercase;\n}\n<\/style>\n<p>&nbsp;<\/p>\n<p><em><strong>Final Preview:<\/strong><\/em><\/p>\n<div class=\"wrapper\">\n<article>\n<h3>Heading<\/h3>\n<p>Lectus aliquet penatibus ac mid nec elementum augue ridiculus nascetur? Cursus urna facilisis turpis aliquam porttitor, turpis egestas arcu, adipiscing nisi mus diam, cursus, urna scelerisque, nunc amet sociis elementum, placerat ac!<\/p>\n<p>Sed, ac risus tincidunt scelerisque quis turpis a pulvinar amet? Aliquet cum porttitor integer enim odio non, tristique, duis nec dapibus integer<\/p>\n<\/article>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The &lt;article&gt; tag is new to HTML5 and it replaces &lt;div&gt; tag. It specifies self-contained content in a document, page or in a site. This can be use in Blog post, Magazine article, comments or in widgets. How To Use The Article Tag: &lt;article&gt; &lt;h1&gt;heading&lt;\/h1&gt; &lt;p&gt;content&lt;\/p&gt; &lt;\/article&gt; &nbsp; Coding: &lt;html&gt; &lt;head&gt; &lt;title&gt;How To Use The [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[90,6,5],"tags":[92,91,93],"class_list":["post-1312","post","type-post","status-publish","format-standard","hentry","category-html","category-web-design","category-web-design-tips","tag-html5-article-element","tag-html5-article-tag","tag-html5-article-tag-with-css"],"_links":{"self":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/1312","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/comments?post=1312"}],"version-history":[{"count":9,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/1312\/revisions"}],"predecessor-version":[{"id":1318,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/1312\/revisions\/1318"}],"wp:attachment":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/media?parent=1312"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/categories?post=1312"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/tags?post=1312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}