{"id":47236,"date":"2024-06-14T07:00:00","date_gmt":"2024-06-14T14:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=47236"},"modified":"2025-05-21T16:04:56","modified_gmt":"2025-05-21T23:04:56","slug":"html5-semantic","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/html5-semantic\/","title":{"rendered":"HTML5 Semantic Elements Explained"},"content":{"rendered":"\n<p>Webster&#8217;s dictionary defines the word &#8220;<a href=\"https:\/\/www.merriam-webster.com\/dictionary\/cool\" target=\"_blank\" rel=\"noreferrer noopener\">cool<\/a>&#8221; as &#8220;moderately cold: lacking in warmth,&#8221; or &#8220;lacking ardor or friendliness.&#8221;<\/p>\n\n\n\n<p>Although, when you&#8217;re talking about what a word means, you might come up with different answers for different times, places, and contexts. In the 1980s, &#8220;cool&#8221; meant hip or stylish \u2014- totally tubular. In a science lab, &#8220;cool&#8221; is more likely to refer to something that has a lower temperature. And for today\u2019s kids (or adult-sized kids), &#8220;cool&#8221; might just mean &#8220;sure&#8221; or &#8220;whatevs, dude.&#8221;<\/p>\n\n\n\n<p>In <em>other<\/em> words, the <em>same<\/em> word can have different meanings depending on the context in which it&#8217;s used. This is the essence of semantics: how words, symbols, and phrases convey different meanings in different situations.<\/p>\n\n\n\n<p>So, what does that have to do with web development and <a href=\"https:\/\/www.dreamhost.com\/blog\/learn-html\/\" target=\"_blank\" rel=\"noreferrer noopener\">HTML<\/a>? Well, machines can&#8217;t understand human language, especially with all of its emotional nuances, which is why we use HTML in the first place. Think of it as a way to translate human language into something computers can understand. And semantic HTML? That\u2019s a way of conveying <em>even<\/em> more meaning. In HTML, semantics is how you use tags that more clearly describe the purpose and the type of content they contain.<\/p>\n\n\n\n<p>Semantic HTML5 elements can help you create web pages that are easy to navigate, understand, and maintain. In this article, we&#8217;ll explore what HTML5 is, provide examples of semantic HTML5 tags you can use, and discuss the significance and benefits of incorporating semantic HTML5 into your site.<\/p>\n\n\n\n<p>Let&#8217;s dive in!<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h2 id=\"h-what-is-html5\" class=\"wp-block-heading\">What Is HTML5?<\/h2>\n\n\n\n<p>HTML5 is the latest version of the Hypertext Markup Language, which is the standard language for creating and <a href=\"https:\/\/www.dreamhost.com\/blog\/web-design-dos-and-donts\/\" target=\"_blank\" rel=\"noreferrer noopener\">designing web pages<\/a>.<\/p>\n\n\n\n<p>HTML5 was introduced to improve the language with support for the latest multimedia: think things like augmented and virtual reality and complex, interactive video elements. All the while keeping it easily readable by humans and consistently understood by computers and other devices.<\/p>\n\n\n\n<p>HTML5 introduces new elements, attributes, and behaviors, therefore providing more flexibility and functionality for creating the <a href=\"https:\/\/www.dreamhost.com\/blog\/hosting-an-app\/\" target=\"_blank\" rel=\"noreferrer noopener\">modern web applications<\/a> we use today.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2560\" height=\"1120\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_html_5_vs_semantic_html5-scaled.webp\" alt=\"A side-by-side comparison of HTML5 vs. Semantic HTML5 with only 2 elements under the former, and 3 under the latter.\" class=\"wp-image-47246 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_html_5_vs_semantic_html5-scaled.webp 2560w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_html_5_vs_semantic_html5-300x131.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_html_5_vs_semantic_html5-1024x448.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_html_5_vs_semantic_html5-768x336.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_html_5_vs_semantic_html5-1536x672.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_html_5_vs_semantic_html5-2048x896.webp 2048w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_html_5_vs_semantic_html5-600x263.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_html_5_vs_semantic_html5-1200x525.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_html_5_vs_semantic_html5-730x319.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_html_5_vs_semantic_html5-1460x639.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_html_5_vs_semantic_html5-784x343.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_html_5_vs_semantic_html5-1568x686.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_html_5_vs_semantic_html5-877x384.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_html_5_vs_semantic_html5-1754x767.webp 1754w\" data-sizes=\"(max-width: 2560px) 100vw, 2560px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 2560px; --smush-placeholder-aspect-ratio: 2560\/1120;\" \/><\/figure>\n\n\n\n<h2 id=\"h2_what-is-semantic-html5\" class=\"wp-block-heading\">What Is Semantic HTML5?<\/h2>\n\n\n\n<p>Semantic HTML5 refers to the use of HTML5 elements that convey the meaning of the content they enclose. Unlike generic tags like <strong><code>&lt;div&gt;<\/code><\/strong> and <strong><code>&lt;span&gt;<\/code><\/strong>, which don\u2019t indicate anything about their content, semantic tags such as <strong><code>&lt;article&gt;<\/code><\/strong>, <strong><code>&lt;section&gt;<\/code><\/strong>, and <strong><code>&lt;header&gt;<\/code><\/strong> provide more meaningful context, indicating to both human developers and devices (like search engine crawlers, browsers, and assistive technologies) exactly what kind of content is contained within them.<\/p>\n\n\n\n<p>This makes the <a href=\"https:\/\/help.dreamhost.com\/hc\/en-us\/articles\/4408351921428-Using-HTML-in-Webmail\" target=\"_blank\" rel=\"noreferrer noopener\">HTML code<\/a> more understandable and readable across the board.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Semantic Markup<\/h3>\n    <p>Semantic markup is a process of structuring HTML to emphasize the content\u2019s meaning, rather than its appearance. This makes it easier for search engines and real users to understand the content.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/semantic-markup\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Read More                    <\/a>\n\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Why Do Websites Need Semantic HTML5 Tags?<\/h3>\n\n\n\n<p>To some, whether semantic HTML5 tags are even necessary is up for debate, but we think they&#8217;re pretty helpful.<\/p>\n\n\n\n<p>Let&#8217;s take a look at how.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Web Accessibility<\/h4>\n\n\n\n<p>Semantic HTML tags play a crucial role in <a href=\"https:\/\/www.dreamhost.com\/blog\/improve-wordpress-blog-accessibility\/\" target=\"_blank\" rel=\"noreferrer noopener\">making websites accessible<\/a> to <em>all<\/em> users, especially those with disabilities. Assistive technologies, like screen readers, rely on semantic tags to interpret and navigate web pages. By using tags that describe your content, you help users easily understand and interact with your site, regardless of their abilities.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">SEO<\/h4>\n\n\n\n<p><a href=\"https:\/\/www.dreamhost.com\/blog\/alternative-search-engines\/\" target=\"_blank\" rel=\"noreferrer noopener\">Search engines<\/a> use crawlers to index web pages. Semantic HTML5 helps them better understand the content and context of a page, which often means they can crawl and index your pages faster and more accurately. This can <a href=\"https:\/\/www.dreamhost.com\/blog\/improve-seo\/\" target=\"_blank\" rel=\"noreferrer noopener\">improve your site&#8217;s search engine rankings<\/a>, making it easier for users to find your content and resulting in more organic traffic.<\/p>\n\n\n\n<p>Semantic tags also provide a clear structure and meaning to your pages, which can also be ranking factors that help boost your site&#8217;s SEO performance.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Future-Proofing Your Site<\/h4>\n\n\n\n<p>Using semantic HTML5 helps future-proof your website. As web standards evolve, semantic elements are more likely to be supported and updated than non-semantic ones. This makes it more likely that your site stays functional and relevant over time, reducing the odds that it will need extensive rewrites or <a href=\"https:\/\/www.dreamhost.com\/blog\/website-redesign-checklist\/\" target=\"_blank\" rel=\"noreferrer noopener\">redesigns<\/a> in the future.<\/p>\n\n\n\n<h2 id=\"h2_examples-of-semantic-html5\" class=\"wp-block-heading\">Examples Of Semantic HTML5<\/h2>\n\n\n\n<p>In the chart below, find some common examples of tags used in semantic HTML5:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Tag<\/strong><\/td><td><strong>Definition<\/strong><\/td><td><strong>Used For<\/strong><\/td><\/tr><tr><td><strong><code>&lt;article&gt;<\/code><\/strong><\/td><td>Defines a piece of independent, self-contained content.<\/td><td>Content items like digital newspaper articles, blog posts, news items, and other pieces of content.<\/td><\/tr><tr><td><strong><code>&lt;header&gt;<\/code><\/strong><\/td><td>Defines a header for a document or section.<\/td><td>Header elements, logos, slogans, navigational links, etc.<\/td><\/tr><tr><td><strong><code>&lt;footer&gt;<\/code><\/strong><\/td><td>Defines a footer for a document or section.<\/td><td>Copyright information, contact details, navigation links, user comments, etc.<\/td><\/tr><tr><td><strong><code>&lt;nav&gt;<\/code><\/strong><\/td><td>Defines blocks of navigation links.<\/td><td>Major blocks of links like navigation menus, navigation bars, tables of contents, and similar nav elements.<\/td><\/tr><tr><td><strong><code>&lt;aside&gt;<\/code><\/strong><\/td><td>Defines content aside from the main body of the content on the page.<\/td><td>Sidebars.<\/td><\/tr><tr><td><strong><code>&lt;details&gt;<\/code><\/strong><\/td><td>Defines additional content that site visitors can open and hide as needed.<\/td><td>Expandable sections for additional details.<\/td><\/tr><tr><td><strong><code>&lt;figure&gt;<\/code><\/strong><\/td><td>Defines a piece of self-contained visual content.<\/td><td>Photos, illustrations, diagrams, and other visual components.<\/td><\/tr><tr><td><strong><code>&lt;table&gt;<\/code><\/strong><\/td><td>Defines data organized in a table format.<\/td><td>Any content elements that list items in a table.<\/td><\/tr><tr><td><strong><code>&lt;main&gt;<\/code><\/strong><\/td><td>Defines the main content on the page.<\/td><td>Blog entries, article content, landing pages, etc. Whatever may be the central content for a given web page.<\/td><\/tr><tr><td><strong><code>&lt;hgroup&gt;<\/code><\/strong><\/td><td>Defines HTML headings. Generally displayed as <strong><code>&lt;h1&gt;<\/code><\/strong>, <strong><code>&lt;h2&gt;<\/code><\/strong>, <strong><code>&lt;h3&gt;<\/code><\/strong>, <strong><code>&lt;h4&gt;<\/code><\/strong>, <strong><code>&lt;h5&gt;<\/code><\/strong>, and <strong><code>&lt;h6&gt;<\/code><\/strong><\/td><td>Section headings: <strong><code>&lt;h1&gt;<\/code><\/strong> is the highest heading level (for content titles) while <strong><code>&lt;h6&gt;<\/code><\/strong> is the lowest (for subheadings).<\/td><\/tr><tr><td><strong><code>&lt;section&gt;<\/code><\/strong><\/td><td>Defines a section in a document.<\/td><td>Sectioning elements are typically used when the content block doesn&#8217;t fit specifically under another type of tag.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 id=\"h2_how-semantic-html5-tags-structure-content\" class=\"wp-block-heading\">How Semantic HTML5 Tags Structure Content<\/h2>\n\n\n\n<p>Semantic HTML5 tags provide a clear and logical structure to web content. For example, a typical article page might include a <strong><code>&lt;header&gt;<\/code><\/strong> with a title, a <strong><code>&lt;nav&gt;<\/code><\/strong> with links to other parts of the site, a <strong><code>&lt;section&gt;<\/code><\/strong> or <strong><code>&lt;article&gt;<\/code> <\/strong>containing the main content, and a <strong><code>&lt;footer&gt;<\/code><\/strong> with contact information and links to related articles. This structure makes it easier for users and search engines to navigate and understand the content.<\/p>\n\n\n\n\n\n<h2 id=\"h2_semantic-html5-tips-and-best-practices\" class=\"wp-block-heading\">Semantic HTML5 Tips And Best Practices<\/h2>\n\n\n\n<p>Creating well-structured, accessible, and efficient web pages with semantic HTML5 is a part of <a href=\"https:\/\/www.dreamhost.com\/pro-services\/development\/\" target=\"_blank\" rel=\"noreferrer noopener\">modern web development<\/a> that isn&#8217;t going away any time soon.<\/p>\n\n\n\n<p>These tips and best practices will help you use semantic HTML5 effectively:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Use The Right Tags<\/h3>\n\n\n\n<p>A proper structure for your content begins with selecting the correct semantic tags.<\/p>\n\n\n\n<p>Consider the purpose of each section of your content and use the tags that accurately represent that purpose. For example, use <strong><code>&lt;header&gt;<\/code><\/strong> for introductory content, <strong><code>&lt;article&gt;<\/code><\/strong> for standalone pieces of content, and <strong><code>&lt;footer&gt;<\/code><\/strong> for the footer of a document or section.<\/p>\n\n\n\n<p><strong>Why this is important: <\/strong>Using the right semantic tags improves readability for both humans and technologies, making your website <a href=\"https:\/\/www.dreamhost.com\/blog\/great-web-accessibility-examples\/\" target=\"_blank\" rel=\"noreferrer noopener\">more accessible<\/a> and easier to navigate.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Avoid Over-Nesting<\/h3>\n\n\n\n<p>Keep your HTML structure simple by avoiding unnecessary nesting of elements. For example, avoid wrapping multiple <strong><code>&lt;div&gt;<\/code><\/strong> elements around a single piece of content.<\/p>\n\n\n\n<p><strong>Why this is important: <\/strong>Over-nesting can make your HTML code difficult to read and maintain. It can also negatively impact your site&#8217;s performance and accessibility.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2560\" height=\"2270\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_over_nested_element-scaled.webp\" alt=\"Side-by-side comparison of over-nested HTML elements in a crowded structure vs. the proper one with a manageable structure.\" class=\"wp-image-47251 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_over_nested_element-scaled.webp 2560w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_over_nested_element-300x266.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_over_nested_element-1024x908.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_over_nested_element-768x681.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_over_nested_element-1536x1362.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_over_nested_element-2048x1816.webp 2048w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_over_nested_element-600x532.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_over_nested_element-1200x1064.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_over_nested_element-730x647.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_over_nested_element-1460x1295.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_over_nested_element-784x695.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_over_nested_element-1568x1391.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_over_nested_element-877x778.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_over_nested_element-1754x1556.webp 1754w\" data-sizes=\"(max-width: 2560px) 100vw, 2560px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 2560px; --smush-placeholder-aspect-ratio: 2560\/2270;\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">3. Be Consistent Across Your Entire Site<\/h3>\n\n\n\n<p>Use semantic tags consistently across your website. For example, if you choose to use <strong><code>&lt;article&gt;<\/code><\/strong> for blog posts, make sure all blog posts use this tag.<\/p>\n\n\n\n<p><strong>Why this is important: <\/strong>This gives your site a coherent structure, making it easier for other people and technological readers to understand the code. This also reduces the burden of maintaining your site over time.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Adopt Accessibility Best Practices<\/h3>\n\n\n\n<p>Semantic HTML5 does help <a href=\"https:\/\/www.dreamhost.com\/legal\/accessibility\/\" target=\"_blank\" rel=\"noreferrer noopener\">make your site more accessible<\/a>, but there&#8217;s more you can do. For example, ARIA (Accessible Rich Internet Applications) roles can help improve accessibility, but they should be used sparingly and only when necessary. Instead, default to native HTML5 elements that inherently support accessibility.<\/p>\n\n\n\n<p>You should also use descriptive text for all of your content. For example, provide meaningful alt text for images and descriptive link text.<\/p>\n\n\n\n<p>Regularly use accessibility testing tools to check if your website is usable for people with disabilities. Tools like <a href=\"https:\/\/wave.webaim.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">WAVE<\/a>, <a href=\"https:\/\/www.deque.com\/axe\/\" target=\"_blank\" rel=\"noreferrer noopener\">AXE<\/a>, and <a href=\"https:\/\/chromewebstore.google.com\/detail\/lighthouse\/blipmdconlkpinefehnmjammfjpmpbjk?hl=en\" target=\"_blank\" rel=\"noreferrer noopener\">Lighthouse<\/a> can help identify accessibility issues.<\/p>\n\n\n\n<p><strong>Why this is important: <\/strong>We all have a shared responsibility to <a href=\"https:\/\/help.dreamhost.com\/hc\/en-us\/articles\/217068087-Making-stats-accessible-with-an-htaccess-file\" target=\"_blank\" rel=\"noreferrer noopener\">make sure the web is accessible<\/a> to <em>everyone<\/em>. Accessible websites provide a better user experience, especially for people with disabilities.<\/p>\n\n\n\n<h2 id=\"h2_build-your-semantically-structured-accessible-website-with-dreamhost\" class=\"wp-block-heading\">Build Your Semantically Structured, Accessible Website With DreamHost<\/h2>\n\n\n\n<p>Semantic HTML5 can only truly improve the user experience or enhance your site&#8217;s SEO performance and longevity if you host it with a reliable and professional hosting provider.<\/p>\n\n\n\n<p>DreamHost offers <a href=\"https:\/\/www.dreamhost.com\/hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\">managed hosting solutions<\/a> that can help you bring your website to life. With DreamHost, you get:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Reliability: <\/strong>Keep your site up and running with uptime guarantees.<\/li>\n\n\n\n<li><strong>Scalability: <\/strong>Easily scale your resources as your website grows.<\/li>\n\n\n\n<li><strong>Security: <\/strong>Benefit from advanced security features to keep your site safe.<\/li>\n\n\n\n<li><strong>Customer support: <\/strong>Get access to 24\/7 expert support for any issues you encounter.<\/li>\n<\/ul>\n\n\n\n<p>Don\u2019t need a managed site? DreamHost <a href=\"https:\/\/www.dreamhost.com\/hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\">shared hosting<\/a> offers the same guaranteed uptime, with plans starting at just $2.59 per month!<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>","protected":false},"excerpt":{"rendered":"<p>Navigate HTML5 semantic elements effortlessly with our guide. Learn what they are and how to use them to enhance your site&#8217;s structure and accessibility.<\/p>\n","protected":false},"author":1058,"featured_media":47237,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"Navigate HTML5 semantic elements effortlessly with our guide. Learn what they are and how to use them to enhance your site's structure and accessibility.","toc_headlines":"[[\"h-what-is-html5\",\"What Is HTML5?\"],[\"h2_what-is-semantic-html5\",\"What Is Semantic HTML5?\"],[\"h2_examples-of-semantic-html5\",\"Examples Of Semantic HTML5\"],[\"h2_how-semantic-html5-tags-structure-content\",\"How Semantic HTML5 Tags Structure Content\"],[\"h2_semantic-html5-tips-and-best-practices\",\"Semantic HTML5 Tips And Best Practices\"],[\"h2_build-your-semantically-structured-accessible-website-with-dreamhost\",\"Build Your Semantically Structured, Accessible Website With DreamHost\"]]","hide_toc":false,"footnotes":""},"categories":[12852],"tags":[],"class_list":["post-47236","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-design"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>HTML5 Semantic Elements Explained - DreamHost<\/title>\n<meta name=\"description\" content=\"Navigate HTML5 semantic elements effortlessly with our guide. Learn what they are and how to use them to enhance your site&#039;s structure and accessibility.\" \/>\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-dev.dreamhost.com\/blog\/html5-semantic\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Semantic Elements in HTML5\" \/>\n<meta property=\"og:description\" content=\"Navigate HTML5 semantic elements effortlessly with our guide. Learn what they are and how to use them to enhance your site&#039;s structure and accessibility.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/html5-semantic\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-06-14T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-21T23:04:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/1220_x_628_ogimage_semantic_elements_in_html5.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1800\" \/>\n\t<meta property=\"og:image:height\" content=\"942\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Ian Hernandez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Semantic Elements in HTML5\" \/>\n<meta name=\"twitter:description\" content=\"Navigate HTML5 semantic elements effortlessly with our guide. Learn what they are and how to use them to enhance your site&#039;s structure and accessibility.\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ian Hernandez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"HTML5 Semantic Elements Explained - DreamHost","description":"Navigate HTML5 semantic elements effortlessly with our guide. Learn what they are and how to use them to enhance your site's structure and accessibility.","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-dev.dreamhost.com\/blog\/html5-semantic\/","og_locale":"en_US","og_type":"article","og_title":"Semantic Elements in HTML5","og_description":"Navigate HTML5 semantic elements effortlessly with our guide. Learn what they are and how to use them to enhance your site's structure and accessibility.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/html5-semantic\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2024-06-14T14:00:00+00:00","article_modified_time":"2025-05-21T23:04:56+00:00","og_image":[{"width":1800,"height":942,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/1220_x_628_ogimage_semantic_elements_in_html5.webp","type":"image\/webp"}],"author":"Ian Hernandez","twitter_card":"summary_large_image","twitter_title":"Semantic Elements in HTML5","twitter_description":"Navigate HTML5 semantic elements effortlessly with our guide. Learn what they are and how to use them to enhance your site's structure and accessibility.","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Ian Hernandez","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/html5-semantic\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/html5-semantic\/"},"author":{"name":"Ian Hernandez","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96"},"headline":"HTML5 Semantic Elements Explained","datePublished":"2024-06-14T14:00:00+00:00","dateModified":"2025-05-21T23:04:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/html5-semantic\/"},"wordCount":1489,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/html5-semantic\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/1460_x_1095_blog_hero_semantic_elements_in_html5.webp","articleSection":["Website Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/html5-semantic\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/html5-semantic\/","name":"HTML5 Semantic Elements Explained - DreamHost","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/html5-semantic\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/html5-semantic\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/1460_x_1095_blog_hero_semantic_elements_in_html5.webp","datePublished":"2024-06-14T14:00:00+00:00","dateModified":"2025-05-21T23:04:56+00:00","description":"Navigate HTML5 semantic elements effortlessly with our guide. Learn what they are and how to use them to enhance your site's structure and accessibility.","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/html5-semantic\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/html5-semantic\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/html5-semantic\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/1460_x_1095_blog_hero_semantic_elements_in_html5.webp","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/1460_x_1095_blog_hero_semantic_elements_in_html5.webp","width":1460,"height":1095,"caption":"HTML5 Semantic Elements Explained"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/html5-semantic\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML5 Semantic Elements Explained"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96","name":"Ian Hernandez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","caption":"Ian Hernandez"},"description":"Ian is a Product Designer based in Los Angeles, California. He is responsible for driving brand and product design at DreamHost, developing and maintaining our internal design system, and writing frontend code when he can. In his free time, he enjoys walking his dog, learning history, and discovering new music online and irl. Connect with him on LinkedIn: https:\/\/www.linkedin.com\/in\/ianhernandez23\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/ianh\/"}]}},"lang":"en","translations":{"en":47236,"es":47255,"de":51219,"pt":53044,"pl":53047,"uk":53053,"ru":53081,"it":67793,"nl":69179,"fr":69183},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/47236","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1058"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=47236"}],"version-history":[{"count":7,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/47236\/revisions"}],"predecessor-version":[{"id":58073,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/47236\/revisions\/58073"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/47237"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=47236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=47236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=47236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}