{"id":74,"date":"2010-08-27T11:23:00","date_gmt":"2010-08-27T11:23:00","guid":{"rendered":"https:\/\/codeblam.com\/blog\/?p=74"},"modified":"2024-12-28T19:39:20","modified_gmt":"2024-12-28T19:39:20","slug":"semantic-markup-explained","status":"publish","type":"post","link":"https:\/\/codeblam.com\/blog\/html\/semantic-markup-explained\/","title":{"rendered":"Semantic Markup Explained"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Semantic Mark-up is the web development practice of coding a web page with elements that are relevant to the code contained in them. The correct use of HTML is vital in creating a semantically marked up document.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">HTML was designed to determine the structure of a document by using the appropriate elements. Ultimately, a properly marked up document would be readable by itself, without the use of CSS or Javascript. This can be easily achieved by efficiently using the appropriate HTML elements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>For example<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&lt;h1&gt; level 1 headers<br>&lt;h2&gt; level 2 sub-headers;<br>&lt;p&gt; a regular paragraphs<br>&lt;blockquotes&gt; quotes<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This may all seem very simple and straight forward, but far too often the mistake is made of using common elements, such as the &lt;p&gt;&nbsp;tag, adding a css class, and styling it to represent a quote. This practice would not be considered good semantic HTML.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Also, there are other elements, which are currently part of the HTML specification, that will visually achieve what you want but are meaningless and will not be considered semantically marked-up code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>For example<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Both the &lt;i&gt; &nbsp;and the &lt;em&gt; &nbsp;tag will italicize text, but where the &lt;i&gt; tag is meaningless, the tag &lt;em&gt; will represent the enclosed content as emphasized text and therefore identify its relevence to the subject.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, Semantic markup doesn\u2019t only refer to the HTML document itself, it also includes the practice of keeping any styling\/presentation aspects and JavaScript separate from the HTML page. In other words, avoid using any on page CSS or JavaScript.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Advantages of Semantic Markup<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The advantages of using good semantic markup in a document are:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>It will be understandable and coherent to people having it read to them with the help of a screen reader.<\/li><li>It will help to get a better search engine ranking, since search engines can easier distinguish the importance level of the document\u2019s different parts and what message is being conveyed.<\/li><li>Much easier for web developers to maintain the code, and to separate content (HTML) from presentation (CSS).<\/li><li>In most cases, there will be less code, which isn\u2019t cluttered by formatting, meaning that the web page will be faster to load.<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n","protected":false},"excerpt":{"rendered":"<p>Semantic Mark-up is the web development practice of coding a web page with elements that are relevant to the code contained in them. The correct use of HTML is vital&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":342,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,11,15],"tags":[26,33,37],"class_list":["post-74","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","category-seo","category-w3c","tag-html","tag-seo","tag-w3c"],"_links":{"self":[{"href":"https:\/\/codeblam.com\/blog\/wp-json\/wp\/v2\/posts\/74","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codeblam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeblam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeblam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeblam.com\/blog\/wp-json\/wp\/v2\/comments?post=74"}],"version-history":[{"count":1,"href":"https:\/\/codeblam.com\/blog\/wp-json\/wp\/v2\/posts\/74\/revisions"}],"predecessor-version":[{"id":347,"href":"https:\/\/codeblam.com\/blog\/wp-json\/wp\/v2\/posts\/74\/revisions\/347"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codeblam.com\/blog\/wp-json\/wp\/v2\/media\/342"}],"wp:attachment":[{"href":"https:\/\/codeblam.com\/blog\/wp-json\/wp\/v2\/media?parent=74"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeblam.com\/blog\/wp-json\/wp\/v2\/categories?post=74"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeblam.com\/blog\/wp-json\/wp\/v2\/tags?post=74"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}