{"id":136892,"date":"2024-10-10T15:34:09","date_gmt":"2024-10-10T10:04:09","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?page_id=136892"},"modified":"2024-10-15T16:54:00","modified_gmt":"2024-10-15T11:24:00","slug":"new-semantic-elements-in-html5-writing-html-markup","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/new-semantic-elements-in-html5-writing-html-markup\/","title":{"rendered":"New semantic elements in HTML5 | Writing HTML Markup"},"content":{"rendered":"\n<p>HTML5 introduced several new semantic elements that can enhance the structure and readability of your web pages, especially when designing for responsive layouts. These elements provide more meaningful information about the content, which can improve accessibility and SEO.<\/p>\n\n\n\n<p><strong>Key New Semantic Elements<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>&lt;header&gt;:<\/strong> Defines the header section of a page, often containing the logo, navigation menu, and search bar.<\/li>\n\n\n\n<li><strong>&lt;nav&gt;:<\/strong> Represents a section of the page that contains navigation links.<\/li>\n\n\n\n<li><strong>&lt;main&gt;:<\/strong> Defines the main content of a page.<\/li>\n\n\n\n<li><strong>&lt;article&gt;:<\/strong> Represents an independent item of content, such as a blog post or news article.<\/li>\n\n\n\n<li><strong>&lt;section&gt;:<\/strong> Defines a thematic grouping of content.<\/li>\n\n\n\n<li><strong>&lt;aside&gt;:<\/strong> Defines content that is tangentially related to the main content.<\/li>\n\n\n\n<li><strong>&lt;footer&gt;:<\/strong> Defines the footer section of a page, often containing copyright information, contact details, and links to social media.<\/li>\n<\/ul>\n\n\n\n<p><strong>Benefits of Using Semantic Elements<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Improved Accessibility:<\/strong> Screen readers and other assistive technologies can better understand the structure and meaning of your content, making it more accessible to users with disabilities.<\/li>\n\n\n\n<li><strong>Enhanced SEO:<\/strong> Search engines can better understand the content of your page, potentially improving your search engine rankings.&nbsp;<\/li>\n\n\n\n<li><strong>Better Readability:<\/strong> Semantic elements help to visually organize your content, making it easier for users to understand and navigate.<\/li>\n<\/ul>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p>&lt;!DOCTYPE html&gt;<\/p>\n\n\n\n<p>&lt;html&gt;<\/p>\n\n\n\n<p>&lt;head&gt;<\/p>\n\n\n\n<p>&nbsp; &lt;title&gt;My Responsive Website&lt;\/title&gt;<\/p>\n\n\n\n<p>&nbsp; &lt;link rel=&#8221;stylesheet&#8221; href=&#8221;styles.css&#8221;&gt;<\/p>\n\n\n\n<p>&lt;\/head&gt;<\/p>\n\n\n\n<p>&lt;body&gt;<\/p>\n\n\n\n<p>&nbsp; &lt;header&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; &lt;h1&gt;My Website&lt;\/h1&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; &lt;nav&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;ul&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Home&lt;\/a&gt;&lt;\/li&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;About&lt;\/a&gt;&lt;\/li&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Contact&lt;\/a&gt;&lt;\/li&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;\/ul&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; &lt;\/nav&gt;<\/p>\n\n\n\n<p>&nbsp; &lt;\/header&gt;<\/p>\n\n\n\n<p>&nbsp; &lt;main&gt;&nbsp;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; &lt;article&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;h2&gt;My First Blog Post&lt;\/h2&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p&gt;This&nbsp;<\/p>\n\n\n\n<p>is the content of my blog post.&lt;\/p&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; &lt;\/article&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; &lt;aside&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;h3&gt;Sidebar Content&lt;\/h3&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p&gt;This is some additional content.&lt;\/p&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; &lt;\/aside&gt;<\/p>\n\n\n\n<p>&nbsp; &lt;\/main&gt;<\/p>\n\n\n\n<p>&nbsp; &lt;footer&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; &lt;p&gt;&amp;copy; 2023 My Website&lt;\/p&gt;<\/p>\n\n\n\n<p>&nbsp; &lt;\/footer&gt;<\/p>\n\n\n\n<p>&lt;\/body&gt;<\/p>\n\n\n\n<p>&lt;\/html&gt;<\/p>\n\n\n\n<p>By using these new semantic elements, you can create more structured and meaningful HTML documents, which can improve the overall user experience and accessibility of your responsive website.<\/p>\n\n\n\n<div class=\"wp-block-buttons alignwide is-content-justification-space-between is-layout-flex wp-container-core-buttons-is-layout-3d213aab wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/starting-html-pages-correctly-writing-html-markup\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>&lt;&lt;Prev<\/strong><\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/certificate-in-responsive-web-design\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Back To The Tutorial<\/strong><\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/html-grouping-elements-writing-html-markup\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Next&gt;&gt;<\/strong><\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>HTML5 introduced several new semantic elements that can enhance the structure and readability of your web pages, especially when designing for responsive layouts. These elements provide more meaningful information about the content, which can improve accessibility and SEO. Key New Semantic Elements Benefits of Using Semantic Elements Example: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &nbsp; &lt;title&gt;My Responsive&#8230;<\/p>\n","protected":false},"author":15,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-136892","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>New semantic elements in HTML5 | Writing HTML Markup - Tutorial<\/title>\n<meta name=\"description\" content=\"Step closer to your certification by preparing for the Certified Responsive Web Design Exam with the right resources. Get Certified Now!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/new-semantic-elements-in-html5-writing-html-markup\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"New semantic elements in HTML5 | Writing HTML Markup - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Step closer to your certification by preparing for the Certified Responsive Web Design Exam with the right resources. Get Certified Now!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/new-semantic-elements-in-html5-writing-html-markup\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-15T11:24:00+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/new-semantic-elements-in-html5-writing-html-markup\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/new-semantic-elements-in-html5-writing-html-markup\/\",\"name\":\"New semantic elements in HTML5 | Writing HTML Markup - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"datePublished\":\"2024-10-10T10:04:09+00:00\",\"dateModified\":\"2024-10-15T11:24:00+00:00\",\"description\":\"Step closer to your certification by preparing for the Certified Responsive Web Design Exam with the right resources. Get Certified Now!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/new-semantic-elements-in-html5-writing-html-markup\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/new-semantic-elements-in-html5-writing-html-markup\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/new-semantic-elements-in-html5-writing-html-markup\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"New semantic elements in HTML5 | Writing HTML Markup\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"New semantic elements in HTML5 | Writing HTML Markup - Tutorial","description":"Step closer to your certification by preparing for the Certified Responsive Web Design Exam with the right resources. Get Certified Now!","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:\/\/www.vskills.in\/certification\/tutorial\/new-semantic-elements-in-html5-writing-html-markup\/","og_locale":"en_US","og_type":"article","og_title":"New semantic elements in HTML5 | Writing HTML Markup - Tutorial","og_description":"Step closer to your certification by preparing for the Certified Responsive Web Design Exam with the right resources. Get Certified Now!","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/new-semantic-elements-in-html5-writing-html-markup\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-10-15T11:24:00+00:00","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/new-semantic-elements-in-html5-writing-html-markup\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/new-semantic-elements-in-html5-writing-html-markup\/","name":"New semantic elements in HTML5 | Writing HTML Markup - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"datePublished":"2024-10-10T10:04:09+00:00","dateModified":"2024-10-15T11:24:00+00:00","description":"Step closer to your certification by preparing for the Certified Responsive Web Design Exam with the right resources. Get Certified Now!","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/new-semantic-elements-in-html5-writing-html-markup\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/new-semantic-elements-in-html5-writing-html-markup\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/new-semantic-elements-in-html5-writing-html-markup\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"New semantic elements in HTML5 | Writing HTML Markup"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/136892","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=136892"}],"version-history":[{"count":3,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/136892\/revisions"}],"predecessor-version":[{"id":137312,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/136892\/revisions\/137312"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=136892"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=136892"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=136892"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}