{"id":4283,"date":"2022-02-22T13:53:33","date_gmt":"2022-02-22T13:53:33","guid":{"rendered":"https:\/\/elementor.com\/resources\/?p=4283"},"modified":"2022-02-22T13:53:34","modified_gmt":"2022-02-22T13:53:34","slug":"what-is-semantic-html-why-should-you-use-it","status":"publish","type":"post","link":"https:\/\/elementor.com\/resources\/glossary\/what-is-semantic-html-why-should-you-use-it\/","title":{"rendered":"What Is Semantic HTML &amp; Why Should You Use It?"},"content":{"rendered":"\n<p><strong>Semantic HTML<\/strong>&nbsp;is the proper use of HTML to emphasize the semantics, or the meaning, of content in web pages and&nbsp;web applications&nbsp;rather than simply defining its&nbsp;appearance. Traditional&nbsp;web browsers&nbsp;and numerous other&nbsp;user agents process Semantic HTML.&nbsp;CSS&nbsp;is also used to suggest its appearance to users.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Why Should You Use <\/strong><strong>Semantic HTML?<\/strong><\/h2>\n\n\n\n<p>Semantically valid HTML helps screen readers, search engines, and other user devices decide the context and significance of web content. To effectively represent content meaning, developers choose appropriate HTML elements regarding the intrinsic meaning of a <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/webpage-website\/\"   title=\"web page\" data-wpil-keyword-link=\"linked\">web page<\/a> rather than how they appear visually.<\/p>\n\n\n\n<p>Five main benefits of using semantic HTML are:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Lighter code<\/li><li>Maintainable code<\/li><li>Accessibility<\/li><li>Search visibility<\/li><li>Future-proofing<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">T<em>ext-level<\/em>&nbsp;HTML Semantics<\/h3>\n\n\n\n<p>In HTML,&nbsp;<em>text-level<\/em> elements such as &lt;em&gt;, &lt;cite&gt;, and &lt;strong&gt; add semantic data within&nbsp;<em>phrasing content<\/em>, to clearly indicate&nbsp;<em>stress emphasis<\/em>,&nbsp;<em>citations, <\/em>and<em> strong importance<\/em>, to name a few examples.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><em>Sectioning<\/em>&nbsp;HTML Semantics<\/h3>\n\n\n\n<p>With the progress of&nbsp;HTML5, new elements are now available that add semantic meaning to entire&nbsp;<em>sections<\/em>&nbsp;of web page sections, including&nbsp;&lt;nav&gt;,&nbsp;&lt;header&gt;,&nbsp;&lt;aside&gt;,and &lt;footer&gt;.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Structured Metadata &#8211; beyond Semantic HTML&nbsp;<\/h3>\n\n\n\n<p>Several technologies build on HTML syntax to signify&nbsp;<em>objects<\/em>, such as events, organizations, products, and people, to achieve more precise semantics than those achievable only with HTML.&nbsp;<br>For example, search engines are already using formats such as&nbsp;<em>Microformats, RDFa<\/em>, and <em>Microdata<\/em> to obtain meaningful data from a web page as part of the next era of the Semantic Web.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Semantic HTML is the proper use of HTML to emphasize the semantics, or the meaning, of content in web pages and web applications rather than simply defining its appearance<\/p>\n","protected":false},"author":1292159,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_angie_page":false,"page_builder":"","footnotes":""},"categories":[15,31],"tags":[16],"class_list":["post-4283","post","type-post","status-publish","format-standard","hentry","category-glossary","category-wordpress","tag-build"],"acf":[],"_links":{"self":[{"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/posts\/4283","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/users\/1292159"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/comments?post=4283"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/posts\/4283\/revisions"}],"predecessor-version":[{"id":4284,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/posts\/4283\/revisions\/4284"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/media?parent=4283"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/categories?post=4283"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/tags?post=4283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}