{"id":23195,"date":"2024-02-25T19:25:58","date_gmt":"2024-02-25T18:25:58","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/semantica-en-html-etiquetas-section-main-y-aside\/"},"modified":"2024-06-03T17:31:56","modified_gmt":"2024-06-03T16:31:56","slug":"semantica-en-html-etiquetas-section-main-y-aside","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/semantics-in-html-section-main-and-aside-tags\/","title":{"rendered":"Semantics in HTML: section, main and aside tags"},"content":{"rendered":"<p><title>Semantics in HTML: section, main and aside tags<\/title><\/p>\n<p>When developing web pages, it is essential to use appropriate semantics to structure the content in a clear and coherent way. In this article, we will explore the use of the HTML section, main and aside tags, and how they help improve the readability and accessibility of our websites.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/semantics-in-html-section-main-and-aside-tags\/#La_importancia_de_la_semantica_en_HTML\" >The importance of semantics in HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/semantics-in-html-section-main-and-aside-tags\/#La_etiqueta_section\" >The section tag<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/semantics-in-html-section-main-and-aside-tags\/#La_etiqueta_main\" >The main tag<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/semantics-in-html-section-main-and-aside-tags\/#La_etiqueta_aside\" >The aside label<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/semantics-in-html-section-main-and-aside-tags\/#Conclusiones\" >Conclusions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/semantics-in-html-section-main-and-aside-tags\/#Preguntas_frecuentes\" >Frequently asked questions<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"La_importancia_de_la_semantica_en_HTML\"><\/span>The importance of semantics in HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Before we get into the details of the section, main, and aside tags, it&#039;s important to understand why semantics are crucial in web development. Semantics in HTML is the way we structure the content of our pages so that it is understandable to both users and search engines.<\/p>\n<p>By using appropriate HTML tags, we not only make it easier for users to navigate and understand the content, but we also help search engines index and rank our site more efficiently.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"La_etiqueta_section\"><\/span>The section tag<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The HTML section tag is used to group related content on a web page. It is especially useful when we have different sections within our document. For example, we could use the section tag to group the header, navigation bar, and main content of our page.<\/p>\n<p>The section tag can also have an attribute called &quot;role&quot;, which can specify the type of content it contains. Some common values for this attribute are &quot;header&quot;, &quot;footer&quot;, &quot;article&quot;, and &quot;navigation&quot;. This provides additional information about the function of each section and helps visually impaired users better understand the content.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"La_etiqueta_main\"><\/span>The main tag<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The HTML main tag is used to define the main content of a web page. That is, it represents the central part of the document, where the most relevant information is found. It is important to note that there should only be one main tag per page.<\/p>\n<p>The main tag helps search engines quickly identify the main content of our website, which can improve visibility and ranking in search results.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"La_etiqueta_aside\"><\/span>The aside label<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The HTML aside tag is used to define secondary or complementary content that is related to the main content of the page. For example, we could use the aside tag to display a sidebar with additional information, such as related links, ads, or widgets.<\/p>\n<p>Unlike the section tag, the aside tag is not part of the main flow of the page and can be considered &quot;additional&quot; or &quot;optional&quot; content. However, it is important to use it correctly to ensure an adequate semantic structure.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusiones\"><\/span>Conclusions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Semantics in HTML are essential for creating well-structured and accessible websites. The section, main and aside tags help us organize our content in a coherent and readable way, both for users and search engines.<\/p>\n<p>By using these tags correctly, we can improve user experience, facilitate navigation, and optimize our site for better search engine results.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Preguntas_frecuentes\"><\/span>Frequently asked questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol>\n<li><strong>What is the difference between the section tag and the article tag?<\/strong>\n<p>The section tag is used to group related content on a web page, while the article tag is used to group independent and self-contained content.<\/p>\n<\/li>\n<li><strong>Can I have multiple main tags on a page?<\/strong>\n<p>No, according to HTML5 specifications, there should only be one main tag per page.<\/p>\n<\/li>\n<li><strong>Is it mandatory to use the aside tag on all pages?<\/strong>\n<p>No, the aside tag is optional and should only be used if there is complementary or secondary content relevant to the main content of the page.<\/p>\n<\/li>\n<\/ol>\n<p>If you want to learn more about HTML and other topics related to web development and marketing, visit our website at <a href=\"https:\/\/nelkodev.com\/en\/\">https:\/\/nelkodev.com<\/a>. You can also contact us through <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">https:\/\/nelkodev.com\/contacto<\/a> or explore our portfolio at <a href=\"https:\/\/nelkodev.com\/en\/portfolio\/\">https:\/\/nelkodev.com\/portfolio\/<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Sem\u00e1ntica en HTML: Etiquetas section, main y aside En el desarrollo de p\u00e1ginas web, es fundamental utilizar la sem\u00e1ntica adecuada para estructurar el contenido de manera clara y coherente. En este art\u00edculo, exploraremos el uso de las etiquetas HTML section, main y aside, y c\u00f3mo contribuyen a mejorar la legibilidad y accesibilidad de nuestros sitios [&hellip;]<\/p>","protected":false},"author":1,"featured_media":23196,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1124],"tags":[992,205,476,475,993,994,706],"class_list":["post-23195","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-html","tag-aside","tag-blog","tag-etiquetas","tag-html","tag-main","tag-section","tag-semantica"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/23195","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=23195"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/23195\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/23196"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=23195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=23195"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=23195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}