{"id":526,"date":"2025-05-19T11:11:14","date_gmt":"2025-05-19T11:11:14","guid":{"rendered":"https:\/\/buhave.com\/courses\/?p=526"},"modified":"2025-05-20T12:57:18","modified_gmt":"2025-05-20T12:57:18","slug":"semantic-html-and-structure","status":"publish","type":"post","link":"https:\/\/buhave.com\/courses\/html\/semantic-html-and-structure\/","title":{"rendered":"Semantic HTML and Structure"},"content":{"rendered":"<h2>Semantic tags: &lt;header&gt;, &lt;nav&gt;, &lt;section&gt;, &lt;article&gt;, &lt;footer&gt;<\/h2>\n<p>Semantic tags in HTML give meaning to the structure of a web page, helping both developers and browsers (including assistive technologies like screen readers) understand the content and layout better. Here\u2019s a breakdown of commonly used semantic tags:<\/p>\n<h3>1. &lt;header&gt; \u2013 Page or Section Introduction<\/h3>\n<p>Represents the introductory content for a document or a section. Typically includes:<\/p>\n<ul>\n<li>Logo<\/li>\n<li>Site title<\/li>\n<li>Navigation<\/li>\n<li>Intro text<\/li>\n<\/ul>\n<p><strong>Example:<\/strong><\/p>\n<p style=\"text-align: center\"><em>&lt;header&gt;<\/em><br \/>\n<em>&lt;h1&gt;My Blog&lt;\/h1&gt;<\/em><br \/>\n<em>&lt;p&gt;Insights on Web Development&lt;\/p&gt;<\/em><br \/>\n<em>&lt;\/header&gt;<\/em><\/p>\n<h3>2. &lt;nav&gt; \u2013 Navigation Links<\/h3>\n<p>Defines a block of navigation links, such as a menu or table of contents.<\/p>\n<p><strong>Example:<\/strong><\/p>\n<p style=\"text-align: center\"><em>&lt;nav&gt;<\/em><br \/>\n<em>&lt;ul&gt;<\/em><br \/>\n<em>&lt;li&gt;&lt;a href=&#8221;\/home&#8221;&gt;Home&lt;\/a&gt;&lt;\/li&gt;<\/em><br \/>\n<em>&lt;li&gt;&lt;a href=&#8221;\/articles&#8221;&gt;Articles&lt;\/a&gt;&lt;\/li&gt;<\/em><br \/>\n<em>&lt;li&gt;&lt;a href=&#8221;\/contact&#8221;&gt;Contact&lt;\/a&gt;&lt;\/li&gt;<\/em><br \/>\n<em>&lt;\/ul&gt;<\/em><br \/>\n<em>&lt;\/nav&gt;<\/em><\/p>\n<p>You can have multiple &lt;nav&gt; tags on a page (e.g., main menu and footer links).<\/p>\n<h3>3. &lt;section&gt; \u2013 Thematic Grouping<\/h3>\n<p>Represents a thematic grouping of content, usually with a heading. Use when content is related and forms a meaningful part of the document.<\/p>\n<p><strong>Example:<\/strong><\/p>\n<p style=\"text-align: center\"><em>&lt;section&gt;<\/em><br \/>\n<em>&lt;h2&gt;Latest News&lt;\/h2&gt;<\/em><br \/>\n<em>&lt;p&gt;Here\u2019s what\u2019s new this week&#8230;&lt;\/p&gt;<\/em><br \/>\n<em>&lt;\/section&gt;<\/em><\/p>\n<h3>4. &lt;article&gt; \u2013 Self-contained Content<\/h3>\n<p>Used for independent, self-contained content that could stand alone, like blog posts, news articles, or forum posts.<\/p>\n<p><strong>Example:<\/strong><\/p>\n<p style=\"text-align: center\"><em>&lt;article&gt;<\/em><br \/>\n<em>&lt;h2&gt;10 Tips for Learning HTML&lt;\/h2&gt;<\/em><br \/>\n<em>&lt;p&gt;Start by understanding the structure&#8230;&lt;\/p&gt;<\/em><br \/>\n<em>&lt;\/article&gt;<\/em><\/p>\n<p>Articles can be syndicated or reused outside of their original context.<\/p>\n<h3>5. &lt;footer&gt; \u2013 Closing or Summary<\/h3>\n<p>Represents the footer for a section or the entire page. Common contents include:<\/p>\n<ul>\n<li>Author info<\/li>\n<li>Copyright<\/li>\n<li>Related links<\/li>\n<li>Contact details<\/li>\n<\/ul>\n<p><strong>Example:<\/strong><\/p>\n<p style=\"text-align: center\"><em>&lt;footer&gt;<\/em><br \/>\n<em>&lt;p&gt;\u00a9 2025 My Website. All rights reserved.&lt;\/p&gt;<\/em><br \/>\n<em>&lt;\/footer&gt;<\/em><\/p>\n<p><strong>Why Use Semantic Tags?<\/strong><\/p>\n<ul>\n<li>Improves SEO and accessibility<\/li>\n<li>Easier to read and maintain code<\/li>\n<li>Helps screen readers and browsers understand content context<\/li>\n<\/ul>\n<h2>Importance for SEO and accessibility<\/h2>\n<p>Semantic HTML isn\u2019t just about clean code\u2014it plays a critical role in how your website performs in search engines and how accessible it is to all users, including those using assistive technologies.<\/p>\n<h3>1. Search Engine Optimization (SEO)<\/h3>\n<p>Search engines like Google use semantic tags to understand the structure and meaning of your content, which directly influences how your pages are ranked and displayed in search results.<\/p>\n<p><strong>Benefits:<\/strong><\/p>\n<ul>\n<li>Improved Crawling: Semantic tags help search engines distinguish between headers, articles, navigation menus, and sidebars.<\/li>\n<li>Better Indexing: Proper use of tags like &lt;article&gt;, &lt;section&gt;, and &lt;header&gt; allows search engines to identify relevant content sections.<\/li>\n<li>Rich Snippets: Correctly structured content may trigger enhanced search results, such as featured snippets or breadcrumbs.<\/li>\n<li>Keyword Relevance: Tags give context to keywords, improving the relevance of content for search queries.<\/li>\n<\/ul>\n<p><strong>Example:<\/strong><\/p>\n<p>A blog post wrapped in an &lt;article&gt; tag with headings and structured content is more likely to rank better than a plain &lt;div&gt; layout.<\/p>\n<h3>2. Accessibility<\/h3>\n<p>Semantic HTML makes websites more usable for people with disabilities, particularly those using screen readers or keyboard navigation.<\/p>\n<p><strong>Benefits:<\/strong><\/p>\n<ul>\n<li>Screen Reader Navigation: Tools like VoiceOver or NVDA rely on semantic tags to provide a meaningful page outline (e.g., headers, landmarks).<\/li>\n<li>Logical Reading Order: Elements like &lt;nav&gt;, &lt;main&gt;, &lt;footer&gt;, and &lt;aside&gt; guide assistive technologies in how to announce and navigate content.<\/li>\n<li>Keyboard Accessibility: Semantic structure helps keyboard users skip to main content quickly using assistive shortcuts.<\/li>\n<li>Focus Management: Semantic landmarks allow better focus flow for users with limited mobility.<\/li>\n<\/ul>\n<p><strong>Example:<\/strong><\/p>\n<p>A screen reader can tell a user, \u201cYou are now in the main navigation,\u201d when &lt;nav&gt; is used\u2014something it can&#8217;t do with a &lt;div&gt;.<\/p>\n<p><strong>Summary Table:<\/strong><\/p>\n<table border=\"1\">\n<thead>\n<tr>\n<th>Feature<\/th>\n<th>With Semantic HTML<\/th>\n<th>Without Semantic HTML<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>SEO Optimization<\/td>\n<td>Yes<\/td>\n<td>Limited<\/td>\n<\/tr>\n<tr>\n<td>Search Engine Understanding<\/td>\n<td>Clear<\/td>\n<td>Confused<\/td>\n<\/tr>\n<tr>\n<td>Screen Reader Support<\/td>\n<td>Strong<\/td>\n<td>Weak<\/td>\n<\/tr>\n<tr>\n<td>Keyboard Navigation<\/td>\n<td>Smooth<\/td>\n<td>Inconsistent<\/td>\n<\/tr>\n<tr>\n<td>Content Structure Clarity<\/td>\n<td>Logical<\/td>\n<td>Ambiguous<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Final Tip:<\/strong><\/p>\n<p><strong>Use semantic tags as intended:<\/strong><\/p>\n<ul>\n<li>&lt;header&gt; for page headers<\/li>\n<li>&lt;nav&gt; for navigation links<\/li>\n<li>&lt;main&gt; for primary content<\/li>\n<li>&lt;article&gt; and &lt;section&gt; for grouped content<\/li>\n<li>&lt;footer&gt; for closing info<\/li>\n<\/ul>\n<p>Following this practice enhances both user experience and visibility online.<\/p>\n<h2>HTML5 structural best practices<\/h2>\n<p>HTML5 introduced semantic and structural improvements that encourage developers to build more meaningful, accessible, and maintainable web pages. Following best practices ensures better SEO, accessibility, and developer collaboration.<\/p>\n<h3>1. Use Semantic Elements Over Generic Tags<\/h3>\n<ul>\n<li>Why: Improves clarity for both browsers and developers.<\/li>\n<li>What to Do: Replace &lt;div&gt; and &lt;span&gt; (generic) with semantic tags like:<\/li>\n<\/ul>\n<table border=\"1\">\n<thead>\n<tr>\n<th>Semantic Tag<\/th>\n<th>Purpose<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>&lt;header&gt;<\/code><\/td>\n<td>Page or section intro<\/td>\n<\/tr>\n<tr>\n<td><code>&lt;nav&gt;<\/code><\/td>\n<td>Navigation links<\/td>\n<\/tr>\n<tr>\n<td><code>&lt;main&gt;<\/code><\/td>\n<td>Main content area<\/td>\n<\/tr>\n<tr>\n<td><code>&lt;section&gt;<\/code><\/td>\n<td>Thematic group of content<\/td>\n<\/tr>\n<tr>\n<td><code>&lt;article&gt;<\/code><\/td>\n<td>Self-contained content<\/td>\n<\/tr>\n<tr>\n<td><code>&lt;aside&gt;<\/code><\/td>\n<td>Sidebar or complementary info<\/td>\n<\/tr>\n<tr>\n<td><code>&lt;footer&gt;<\/code><\/td>\n<td>Page or section footer<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Example:<\/strong><\/p>\n<p style=\"text-align: center\"><em>&lt;main&gt;<\/em><br \/>\n<em>&lt;article&gt;<\/em><br \/>\n<em>&lt;h2&gt;Understanding Flexbox&lt;\/h2&gt;<\/em><br \/>\n<em>&lt;p&gt;Flexbox is a layout model&#8230;&lt;\/p&gt;<\/em><br \/>\n<em>&lt;\/article&gt;<\/em><br \/>\n<em>&lt;\/main&gt;<\/em><\/p>\n<h3>2. One &lt;main&gt; Tag Per Page<\/h3>\n<p>Use only one &lt;main&gt; element to encapsulate the central content of the page, excluding headers, footers, and sidebars.<br \/>\nThis improves screen reader support and page structure clarity.<\/p>\n<h3>3. Nest Content Logically<\/h3>\n<p>Structure your page with logical nesting, placing &lt;section&gt;, &lt;article&gt;, or &lt;aside&gt; elements inside appropriate parent elements like &lt;main&gt;.<\/p>\n<p><strong>Example:<\/strong><\/p>\n<p style=\"text-align: center\"><em>&lt;main&gt;<\/em><br \/>\n<em>&lt;section&gt;<\/em><br \/>\n<em>&lt;h2&gt;Latest Articles&lt;\/h2&gt;<\/em><br \/>\n<em>&lt;article&gt;<\/em><br \/>\n<em>&lt;h3&gt;Intro to JavaScript&lt;\/h3&gt;<\/em><br \/>\n<em>&lt;p&gt;JavaScript is a versatile language&#8230;&lt;\/p&gt;<\/em><br \/>\n<em>&lt;\/article&gt;<\/em><br \/>\n<em>&lt;\/section&gt;<\/em><br \/>\n<em>&lt;\/main&gt;<\/em><\/p>\n<h3>4. Always Include &lt;title&gt; and Proper Metadata<\/h3>\n<p><strong>In your &lt;head&gt;:<\/strong><\/p>\n<ul>\n<li>Use &lt;title&gt; for page title<\/li>\n<li>Add &lt;meta charset=&#8221;UTF-8&#8243;&gt; for encoding<\/li>\n<li>Include &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width, initial-scale=1.0&#8243;&gt; for responsiveness<\/li>\n<\/ul>\n<p><strong>Example:<\/strong><\/p>\n<p style=\"text-align: center\"><em>&lt;head&gt;<\/em><br \/>\n<em>&lt;meta charset=&#8221;UTF-8&#8243;&gt;<\/em><br \/>\n<em>&lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width, initial-scale=1.0&#8243;&gt;<\/em><br \/>\n<em>&lt;title&gt;My Portfolio&lt;\/title&gt;<\/em><br \/>\n<em>&lt;\/head&gt;<\/em><\/p>\n<h3>5. Use Heading Tags in Order<\/h3>\n<p>Follow a logical heading hierarchy (&lt;h1&gt; to &lt;h6&gt;) without skipping levels. This helps both SEO and screen readers.<\/p>\n<p><strong>Don\u2019t do:<\/strong><\/p>\n<ul>\n<li>&lt;h1&gt;, &lt;h3&gt;, &lt;h2&gt;<\/li>\n<\/ul>\n<p><strong>Do:<\/strong><\/p>\n<p style=\"text-align: center\"><em>&lt;h1&gt;Main Title&lt;\/h1&gt;<\/em><br \/>\n<em>&lt;h2&gt;Subsection&lt;\/h2&gt;<\/em><br \/>\n<em>&lt;h3&gt;Sub-subsection&lt;\/h3&gt;<\/em><\/p>\n<h3>6. Include ARIA Roles Sparingly<\/h3>\n<ul>\n<li>Use ARIA (role=&#8221;navigation&#8221;, role=&#8221;main&#8221;) only when necessary\u2014HTML5 semantic tags already imply roles.<\/li>\n<li>&lt;nav&gt; is equivalent to role=&#8221;navigation&#8221;<\/li>\n<\/ul>\n<h3>7. Organize Scripts and Styles Cleanly<\/h3>\n<ul>\n<li>Use external CSS and JS files.<\/li>\n<li>Place &lt;script&gt; tags just before closing &lt;\/body&gt; to improve page load.<\/li>\n<\/ul>\n<h3>8. Don\u2019t Overuse &lt;div&gt;s \u2013 Avoid \u201cDiv Soup\u201d<\/h3>\n<p>Use &lt;div&gt; only when no semantic alternative is suitable. Too many &lt;div&gt;s clutter your HTML and hinder accessibility.<\/p>\n<h3>9. Label Regions for Clarity<\/h3>\n<p>Use aria-label, id, or class to describe key areas for screen readers or scripts.<\/p>\n<p style=\"text-align: center\"><em>&lt;nav aria-label=&#8221;Main navigation&#8221;&gt;<\/em><\/p>\n<h3>10. Validate and Test Your HTML<\/h3>\n<p>Use W3C Validator to catch structural errors and follow standard-compliant practices.<\/p>\n<p><strong>Pro Tip:<\/strong> Think of your HTML structure like an outline. If you printed your page as a document, would the headings, sections, and summaries make sense?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Semantic tags: &lt;header&gt;, &lt;nav&gt;, &lt;section&gt;, &lt;article&gt;, &lt;footer&gt; Semantic tags in HTML give meaning to the structure of a web page, helping both developers and browsers (including assistive technologies like screen readers) understand the content and layout better. Here\u2019s a breakdown of commonly used semantic tags:<\/p>\n","protected":false},"author":1,"featured_media":527,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-526","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Semantic HTML and Structure - HTML Course<\/title>\n<meta name=\"description\" content=\"Semantic HTML and structure use meaningful tags to create clear, accessible, and SEO-friendly web page layouts.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/buhave.com\/courses\/html\/semantic-html-and-structure\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Semantic HTML and Structure - HTML Course\" \/>\n<meta property=\"og:description\" content=\"Semantic HTML and structure use meaningful tags to create clear, accessible, and SEO-friendly web page layouts.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/buhave.com\/courses\/html\/semantic-html-and-structure\/\" \/>\n<meta property=\"og:site_name\" content=\"BUHAVE\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/BeYouHave\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/naveedsafdarawan\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-19T11:11:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-20T12:57:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/Semantic-HTML-and-Structure.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Naveed Safdar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Naveed Safdar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/semantic-html-and-structure\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/semantic-html-and-structure\\\/\"},\"author\":{\"name\":\"Naveed Safdar\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#\\\/schema\\\/person\\\/04fe0254e118521c9fbb3da39de5acca\"},\"headline\":\"Semantic HTML and Structure\",\"datePublished\":\"2025-05-19T11:11:14+00:00\",\"dateModified\":\"2025-05-20T12:57:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/semantic-html-and-structure\\\/\"},\"wordCount\":1289,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/semantic-html-and-structure\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/Semantic-HTML-and-Structure.webp\",\"articleSection\":[\"HTML Course\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/semantic-html-and-structure\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/semantic-html-and-structure\\\/\",\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/semantic-html-and-structure\\\/\",\"name\":\"Semantic HTML and Structure - HTML Course\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/semantic-html-and-structure\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/semantic-html-and-structure\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/Semantic-HTML-and-Structure.webp\",\"datePublished\":\"2025-05-19T11:11:14+00:00\",\"dateModified\":\"2025-05-20T12:57:18+00:00\",\"description\":\"Semantic HTML and structure use meaningful tags to create clear, accessible, and SEO-friendly web page layouts.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/semantic-html-and-structure\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/semantic-html-and-structure\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/semantic-html-and-structure\\\/#primaryimage\",\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/Semantic-HTML-and-Structure.webp\",\"contentUrl\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/Semantic-HTML-and-Structure.webp\",\"width\":1200,\"height\":628,\"caption\":\"Semantic HTML and Structure\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/semantic-html-and-structure\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Courses\",\"item\":\"https:\\\/\\\/buhave.com\\\/courses\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML Course\",\"item\":\"https:\\\/\\\/buhave.com\\\/courses\\\/learn\\\/html\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Semantic HTML and Structure\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#website\",\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/\",\"name\":\"BUHAVE\",\"description\":\"Courses - Learn Online for Free\",\"publisher\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/buhave.com\\\/courses\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#organization\",\"name\":\"BUHAVE\",\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/buhave-course.webp\",\"contentUrl\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/buhave-course.webp\",\"width\":375,\"height\":75,\"caption\":\"BUHAVE\"},\"image\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/BeYouHave\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/buhave\",\"https:\\\/\\\/www.youtube.com\\\/@buhave\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#\\\/schema\\\/person\\\/04fe0254e118521c9fbb3da39de5acca\",\"name\":\"Naveed Safdar\",\"description\":\"I\u2019m Naveed Safdar - SEO Manager with over 10 years of experience in SEO and Digital Marketing. I\u2019ve had the privilege of working with leading national and international companies including Grafdom, PakWheels, Systems Limited, Confiz, Educative, and Dubizzle Labs. My expertise spans technical SEO, content strategy, organic growth, and performance analytics - helping businesses improve visibility, traffic, and ROI.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/naveedsafdar\\\/\",\"https:\\\/\\\/www.facebook.com\\\/naveedsafdarawan\\\/\",\"https:\\\/\\\/www.youtube.com\\\/@naveedsafdar\"],\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/author\\\/naveed-safdar\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Semantic HTML and Structure - HTML Course","description":"Semantic HTML and structure use meaningful tags to create clear, accessible, and SEO-friendly web page layouts.","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:\/\/buhave.com\/courses\/html\/semantic-html-and-structure\/","og_locale":"en_US","og_type":"article","og_title":"Semantic HTML and Structure - HTML Course","og_description":"Semantic HTML and structure use meaningful tags to create clear, accessible, and SEO-friendly web page layouts.","og_url":"https:\/\/buhave.com\/courses\/html\/semantic-html-and-structure\/","og_site_name":"BUHAVE","article_publisher":"https:\/\/www.facebook.com\/BeYouHave\/","article_author":"https:\/\/www.facebook.com\/naveedsafdarawan\/","article_published_time":"2025-05-19T11:11:14+00:00","article_modified_time":"2025-05-20T12:57:18+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/Semantic-HTML-and-Structure.webp","type":"image\/webp"}],"author":"Naveed Safdar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Naveed Safdar","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/buhave.com\/courses\/html\/semantic-html-and-structure\/#article","isPartOf":{"@id":"https:\/\/buhave.com\/courses\/html\/semantic-html-and-structure\/"},"author":{"name":"Naveed Safdar","@id":"https:\/\/buhave.com\/courses\/#\/schema\/person\/04fe0254e118521c9fbb3da39de5acca"},"headline":"Semantic HTML and Structure","datePublished":"2025-05-19T11:11:14+00:00","dateModified":"2025-05-20T12:57:18+00:00","mainEntityOfPage":{"@id":"https:\/\/buhave.com\/courses\/html\/semantic-html-and-structure\/"},"wordCount":1289,"commentCount":0,"publisher":{"@id":"https:\/\/buhave.com\/courses\/#organization"},"image":{"@id":"https:\/\/buhave.com\/courses\/html\/semantic-html-and-structure\/#primaryimage"},"thumbnailUrl":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/Semantic-HTML-and-Structure.webp","articleSection":["HTML Course"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/buhave.com\/courses\/html\/semantic-html-and-structure\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/buhave.com\/courses\/html\/semantic-html-and-structure\/","url":"https:\/\/buhave.com\/courses\/html\/semantic-html-and-structure\/","name":"Semantic HTML and Structure - HTML Course","isPartOf":{"@id":"https:\/\/buhave.com\/courses\/#website"},"primaryImageOfPage":{"@id":"https:\/\/buhave.com\/courses\/html\/semantic-html-and-structure\/#primaryimage"},"image":{"@id":"https:\/\/buhave.com\/courses\/html\/semantic-html-and-structure\/#primaryimage"},"thumbnailUrl":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/Semantic-HTML-and-Structure.webp","datePublished":"2025-05-19T11:11:14+00:00","dateModified":"2025-05-20T12:57:18+00:00","description":"Semantic HTML and structure use meaningful tags to create clear, accessible, and SEO-friendly web page layouts.","breadcrumb":{"@id":"https:\/\/buhave.com\/courses\/html\/semantic-html-and-structure\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/buhave.com\/courses\/html\/semantic-html-and-structure\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/buhave.com\/courses\/html\/semantic-html-and-structure\/#primaryimage","url":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/Semantic-HTML-and-Structure.webp","contentUrl":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/Semantic-HTML-and-Structure.webp","width":1200,"height":628,"caption":"Semantic HTML and Structure"},{"@type":"BreadcrumbList","@id":"https:\/\/buhave.com\/courses\/html\/semantic-html-and-structure\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Courses","item":"https:\/\/buhave.com\/courses\/"},{"@type":"ListItem","position":2,"name":"HTML Course","item":"https:\/\/buhave.com\/courses\/learn\/html\/"},{"@type":"ListItem","position":3,"name":"Semantic HTML and Structure"}]},{"@type":"WebSite","@id":"https:\/\/buhave.com\/courses\/#website","url":"https:\/\/buhave.com\/courses\/","name":"BUHAVE","description":"Courses - Learn Online for Free","publisher":{"@id":"https:\/\/buhave.com\/courses\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/buhave.com\/courses\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/buhave.com\/courses\/#organization","name":"BUHAVE","url":"https:\/\/buhave.com\/courses\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/buhave.com\/courses\/#\/schema\/logo\/image\/","url":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/03\/buhave-course.webp","contentUrl":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/03\/buhave-course.webp","width":375,"height":75,"caption":"BUHAVE"},"image":{"@id":"https:\/\/buhave.com\/courses\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/BeYouHave\/","https:\/\/www.linkedin.com\/company\/buhave","https:\/\/www.youtube.com\/@buhave"]},{"@type":"Person","@id":"https:\/\/buhave.com\/courses\/#\/schema\/person\/04fe0254e118521c9fbb3da39de5acca","name":"Naveed Safdar","description":"I\u2019m Naveed Safdar - SEO Manager with over 10 years of experience in SEO and Digital Marketing. I\u2019ve had the privilege of working with leading national and international companies including Grafdom, PakWheels, Systems Limited, Confiz, Educative, and Dubizzle Labs. My expertise spans technical SEO, content strategy, organic growth, and performance analytics - helping businesses improve visibility, traffic, and ROI.","sameAs":["https:\/\/www.linkedin.com\/in\/naveedsafdar\/","https:\/\/www.facebook.com\/naveedsafdarawan\/","https:\/\/www.youtube.com\/@naveedsafdar"],"url":"https:\/\/buhave.com\/courses\/author\/naveed-safdar\/"}]}},"_links":{"self":[{"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/posts\/526","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/comments?post=526"}],"version-history":[{"count":1,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/posts\/526\/revisions"}],"predecessor-version":[{"id":528,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/posts\/526\/revisions\/528"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/media\/527"}],"wp:attachment":[{"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/media?parent=526"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/categories?post=526"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/tags?post=526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}