{"id":7029,"date":"2019-10-15T11:30:30","date_gmt":"2019-10-15T11:30:30","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=7029"},"modified":"2019-10-15T11:30:32","modified_gmt":"2019-10-15T11:30:32","slug":"what-is-semantic-markup-and-its-benefits","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/what-is-semantic-markup-and-its-benefits\/","title":{"rendered":"What is Semantic markup and It\u2019s benefits?"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"625\" height=\"360\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2019\/10\/semantic.png\" alt=\"\" class=\"wp-image-7030\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2019\/10\/semantic.png 625w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2019\/10\/semantic-300x173.png 300w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/figure>\n\n\n\n<p><strong>What is a Semantic markup?<\/strong><\/p>\n\n\n\n<p>Semantic markup is a way of writing and structuring your HTML. Semantic HTML or semantic is a coding style where the tags embody what the text is meant to convey. It is introduces meaning to the web page rather than just a presentation.<\/p>\n\n\n\n<p>In Semantic HTML tags like &lt;b&gt;&lt;\/b&gt; for bold, and &lt;i&gt;&lt;\/i&gt; for italic should not be used, reason being they just represent formatting, and provide no indication of meaning or structure.<\/p>\n\n\n\n<p><strong>HTML is divided into two types of Mark-up :<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Structural Markup<\/li><li>Semantic Markup<\/li><\/ol>\n\n\n\n<p><strong>These are the key benefits from Semantic HTML:-<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Developers find ease to maintain the code and can create a wall between presentation (CSS) and content (HTML).<\/li><li>less coding without cluttered tags, which will further process the page faster to load.<\/li><li>Visually challenged users can access the site with a screen reader.<\/li><li>It will increase your search engine ranking\/traffic by putting weight to different parts of the document.<\/li><li>Developers find ease to maintain the code and can create a wall between presentation (CSS) and content (HTML).<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>What is a Semantic markup? Semantic markup is a way of writing and structuring your HTML. Semantic HTML or semantic is a coding style where the tags embody what the text is meant to convey. It is introduces meaning to the web page rather than just a presentation. In Semantic HTML tags like &lt;b&gt;&lt;\/b&gt; for&#8230;<\/p>\n","protected":false},"author":21,"featured_media":7031,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_joinchat":[],"footnotes":""},"categories":[5263],"tags":[5377,977,4696,4459,5378,5379,4722,5380,5381,894],"class_list":["post-7029","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo","tag-coding","tag-developers","tag-google","tag-html","tag-markup","tag-semantic","tag-seo","tag-structural","tag-tags","tag-website"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/7029","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=7029"}],"version-history":[{"count":1,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/7029\/revisions"}],"predecessor-version":[{"id":7032,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/7029\/revisions\/7032"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media\/7031"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=7029"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=7029"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=7029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}