{"id":25136,"date":"2024-02-01T05:11:53","date_gmt":"2024-02-01T04:11:53","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/domina-la-etiqueta-span-en-html-guia-practica-con-ejemplos\/"},"modified":"2024-06-03T17:39:34","modified_gmt":"2024-06-03T16:39:34","slug":"domina-la-etiqueta-span-en-html-guia-practica-con-ejemplos","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/master-the-span-tag-in-html-practical-guide-with-examples\/","title":{"rendered":"Master the Span Tag in HTML: Practical Guide with Examples"},"content":{"rendered":"<p>HTML is the standard markup language for creating web pages and represents the structure of content on the web. One of the most basic, but at the same time most powerful tags for web developers, is the tag <code>&lt;span&gt;<\/code>. Its apparent simplicity hides a great ability to manipulate specific parts of the content on a web page.<\/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\/master-the-span-tag-in-html-practical-guide-with-examples\/#%C2%BFQue_es_la_Etiqueta\" >What is Label &lt;span&gt;?<\/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\/master-the-span-tag-in-html-practical-guide-with-examples\/#Sintaxis_de_la_Etiqueta\" >Tag Syntax &lt;span&gt;<\/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\/master-the-span-tag-in-html-practical-guide-with-examples\/#Ejemplos_Practicos_de_Uso\" >Practical Examples of Use<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-the-span-tag-in-html-practical-guide-with-examples\/#Estilizacion_de_Partes_del_Texto\" >Stylization of Parts of the Text<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-the-span-tag-in-html-practical-guide-with-examples\/#Manipulacion_con_JavaScript\" >Manipulation with JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-the-span-tag-in-html-practical-guide-with-examples\/#Microformatos\" >Microformats<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-the-span-tag-in-html-practical-guide-with-examples\/#Tratamiento_de_Icons_y_Tooltips\" >Treatment of Icons and Tooltips<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-the-span-tag-in-html-practical-guide-with-examples\/#Aplicacion_de_Clases_y_IDs_para_CSS\" >Application of Classes and IDs for CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-the-span-tag-in-html-practical-guide-with-examples\/#Soporte_para_los_Lectores_de_Pantalla\" >Support for Screen Readers<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-the-span-tag-in-html-practical-guide-with-examples\/#Mejores_Practicas\" >Better practices<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-the-span-tag-in-html-practical-guide-with-examples\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_la_Etiqueta\"><\/span>What is Label <code>&lt;span&gt;<\/code>?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The label <code>&lt;span&gt;<\/code> is an HTML inline element used to group or wrap a portion of text or a document to apply CSS styling, or manipulation via JavaScript. Unlike block labels like <code>&lt;div&gt;<\/code>, <code>&lt;span&gt;<\/code> It has no impact on the flow of the document nor does it introduce line breaks before or after its content. <\/p>\n<p>Its main function is to be a generic container without semantic representation, allowing the developer to decide how and why to use it. This can be both a blessing and a challenge, as it allows a lot of freedom, but also requires clear thinking regarding the structure and semantics of the content being marked.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Sintaxis_de_la_Etiqueta\"><\/span>Tag Syntax <code>&lt;span&gt;<\/code><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The tag syntax <code>&lt;span&gt;<\/code> is simple:<\/p>\n<pre><code class=\"&quot;language-html&quot;\">&lt;span&gt;Content&lt;\/span&gt;<\/code><\/pre>\n<p>Here, &quot;Content&quot; can be text, images, links, or even other online elements.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Ejemplos_Practicos_de_Uso\"><\/span>Practical Examples of Use<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Estilizacion_de_Partes_del_Texto\"><\/span>Stylization of Parts of the Text<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Often, we may want to change the style of a specific portion of text without affecting the rest. With the help of <code>&lt;span&gt;<\/code>, we can do this easily.<\/p>\n<pre><code class=\"&quot;language-html&quot;\">&lt;p&gt;The &lt;span style=&quot;color: red;&quot;&gt;programming&lt;\/span&gt; It is a fundamental skill in today&amp;#039;s world.&lt;\/p&gt;<\/code><\/pre>\n<p>In this example, the word &quot;programming&quot; is colored red, separating it from the style of the rest of the paragraph.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Manipulacion_con_JavaScript\"><\/span>Manipulation with JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The label <code>&lt;span&gt;<\/code> It is extremely useful when we need to manipulate specific parts of text with JavaScript.<\/p>\n<pre><code class=\"&quot;language-html&quot;\">&lt;p&gt;Current time: &lt;span id=&quot;hora&quot;&gt;12:00&lt;\/span&gt;&lt;\/p&gt;<\/code><\/pre>\n<pre><code class=\"&quot;language-javascript&quot;\">document.getElementById(&quot;time&quot;).innerHTML = new Date().toLocaleTimeString();<\/code><\/pre>\n<p>Here, the time will be updated dynamically with JavaScript using the identifier <code>&lt;span&gt;<\/code>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Microformatos\"><\/span>Microformats<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Microformats are a way to make information on web pages easier for machines to understand. The label <code>&lt;span&gt;<\/code> It is useful to add this extra semantic information.<\/p>\n<pre><code class=\"&quot;language-html&quot;\">&lt;p&gt;published by &lt;span class=&quot;author&quot;&gt;NelkoDev&lt;\/span&gt; in &lt;span class=&quot;date&quot;&gt;January 1, 2023&lt;\/span&gt;&lt;\/p&gt;<\/code><\/pre>\n<p>In this case, the classes <code>author<\/code> y <code>date<\/code> They can be used by tools to semantically identify the author and the publication date.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Tratamiento_de_Icons_y_Tooltips\"><\/span>Treatment of Icons and Tooltips<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Icons are commonly embedded in HTML using the tag <code>&lt;span&gt;<\/code>, allowing you to add styles so that they display correctly.<\/p>\n<pre><code class=\"&quot;language-html&quot;\">&lt;button&gt;Send &lt;span class=&quot;icon-send&quot;&gt;&lt;\/span&gt;&lt;\/button&gt;<\/code><\/pre>\n<p>Here, <code>.icon-send<\/code> could have associated styles that represent a submit icon.<\/p>\n<p>Tooltips can also benefit from <code>&lt;span&gt;<\/code>, being the container where the tooltip text is kept hidden until an event occurs, such as hovering over it.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Aplicacion_de_Clases_y_IDs_para_CSS\"><\/span>Application of Classes and IDs for CSS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Classes and IDs are widely used with <code>&lt;span&gt;<\/code> to apply specific CSS styles.<\/p>\n<pre><code class=\"&quot;language-html&quot;\">&lt;span class=&quot;destacado&quot;&gt;Attention&lt;\/span&gt;<\/code><\/pre>\n<p>The corresponding CSS could be:<\/p>\n<pre><code class=\"&quot;language-css&quot;\">.highlighted { font-weight: bold; background-color: yellow; }<\/code><\/pre>\n<p>This code will make the &quot;Attention&quot; text stand out with a bold, yellow background.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Soporte_para_los_Lectores_de_Pantalla\"><\/span>Support for Screen Readers<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The intelligent use of <code>&lt;span&gt;<\/code> It can also improve the experience for visually impaired users who use screen readers.<\/p>\n<pre><code class=\"&quot;language-html&quot;\">&lt;a href=&quot;https:\/\/nelkodev.com\/en\/contact\/&quot;&gt;Contact &lt;span class=&quot;sr-only&quot;&gt;(Opens in a new window)&lt;\/span&gt;&lt;\/a&gt;<\/code><\/pre>\n<p>Class <code>sr-only<\/code> would be used to visually hide the text, but still make it readable to screen readers.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Mejores_Practicas\"><\/span>Better practices<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Despite being a flexible tool, it is important to use <code>&lt;span&gt;<\/code> with caution and follow some best practices:<\/p>\n<ul>\n<li>Don&#039;t overuse <code>&lt;span&gt;<\/code> just to apply styles; consider whether other HTML elements may be more semantically correct.<\/li>\n<li>Use <code>&lt;span&gt;<\/code> along with meaningful classes and IDs for easier code maintenance.<\/li>\n<li>Maintain a balance between structure and presentation; avoid using <code>&lt;span&gt;<\/code> as a spacing or layout solution.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The label <code>&lt;span&gt;<\/code> It is an essential part of any web developer&#039;s tool arsenal. Although small and simple in concept, its correct use can have a great impact on the accessibility, maintainability and aesthetics of web content. If you want to delve deeper into these concepts or need help with your web project, visit <a href=\"https:\/\/nelkodev.com\/en\/\">NelkoDev<\/a> or contact me via <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">my contact page<\/a>. With proper practice and knowledge, etiquette <code>&lt;span&gt;<\/code> It becomes a small piece of code with infinite possibilities.<\/p>","protected":false},"excerpt":{"rendered":"<p>HTML is the standard markup language for creating web pages and represents the structure of content on the web. One of the most basic, but at the same time most powerful tags for web developers, is the tag &lt;span&gt;. Its apparent simplicity hides a great capacity to manipulate specific parts of the [&hellip;]<\/p>","protected":false},"author":1,"featured_media":25137,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420],"tags":[205,90,1473,977,606,358,475,1214,1051],"class_list":["post-25136","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-blog","tag-con","tag-domina","tag-ejemplos","tag-etiqueta","tag-guia","tag-html","tag-practica","tag-span"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/25136","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=25136"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/25136\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/25137"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=25136"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=25136"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=25136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}