Meta tags:
description=A tag HTML span é um contêiner inline genérico sem significado semântico, usado para estilizar ou manipular texto. Exemplos e boas práticas.;

Headings (most frequently used words):

span, tag, html, de, exemplo, da, prefira, elementos, semânticos, vs, div, sintaxe, casos, uso, acessibilidade, atributos, prática, com, atributo, class,

Text of the page (most frequently used words):
html (63), span (49), para (22), svg (19), tag (16), aprender (15), que (13), uma (13), texto (12), style (12), css (10), div (10), não (10), #atributos (9), canvas (9), this (8), conteúdo (8), inline (8), color (8), você (7), tela (7), com (7), hidden (7), the (7), title (7), tags (7), prática (6), elementos (6), mark (6), elemento (6), class (6), aria (6), copiar (6), significado (6), w3docs (5), code (5), javascript (5), leitores (5), atributo (5), apenas (5), body (5), head (5), exemplo (5), introdução (5), html5 (5), formatter (5), todos (4), generator (4), uso (4), acessibilidade (4), porque (4), navegador (4), como (4), qual (4), example (4), quando (4), label (4), letter (4), use (4), linha (4), semântico (4), idioma (3), json (3), encoder (3), editor (3), ferramentas (3), quizzes (3), exercícios (3), php (3), prefira (3), semânticos (3), strong (3), yellow (3), destacado (3), por (3), também (3), relevante (3), escolha (3), evento (3), trecho (3), button (3), position (3), visually (3), dois (3), doctype (3), estilos (3), 8ebf42 (3), bloco (3), seu (3), estilização (3), for (3), nenhum (3), templates (3), string (3), tools (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), sobre (2), beautifier (2), diff (2), password (2), python (2), java (2), git (2), livros (2), exemplos (2), snippets (2), casos (2), sintaxe (2), page (2), strike (2), spacer (2), verificar (2), precisa (2), background (2), marca (2), relevância (2), deseja (2), destacar (2), termo (2), pesquisa (2), entendam (2), ele (2), melhor (2), correto (2), usuário (2), vídeo (2), entre (2), lang (2), diretamente (2), útil (2), globais (2), visual (2), informa (2), botão (2), true (2), dialog (2), ícones (2), decorativo (2), link (2), border (2), cart (2), mas (2), layout (2), experimente (2), mesmo (2), flowers (2), her (2), and (2), first (2), text (2), relative (2), its (2), font (2), document (2), aplicamos (2), capitular (2), has (2), abaixo (2), estilo (2), dentro (2), largura (2), nível (2), são (2), sem (2), está (2), gancho (2), carrega (2), grid (2), search (2), results (2), primeiro (2), usa (2), única (2), time (2), data (2), abbr (2), contêiner (2), genérico (2), accept (2), dir (2), formulários (2), referência (2), tutorial (2), imagens (2), url (2), http (2), iso (2), hash (2), 2026, direitos, reservados, feito, desenvolvedores, política, privacidade, contato, empresa, try, tutoriais, gratuitos, web, desde, 2014, next, previous, yes, was, helpful, fundo, amarelo, agrupa, parece, igual, semanticamente, suporta, permitindo, reagir, ações, cliques, hovers, ocorre, reage, ação, clicar, mouse, reproduzir, enviar, formulário, outros, diferente, aplica, estilizações, pontuais, fornece, identificador, único, direcionamento, via, conecta, mais, regras, finalidade, possui, próprios, estes, fazem, quase, todo, trabalho, aqui, remove, árvore, enquanto, tecnologia, assistiva, significa, fechar, diálogo, close, fontes, glifos, decorativos, têm, leitor, anunciar, oculte, forneça, nome, acessível, rotulação, nowrap, white, space, rect, clip, overflow, padding, margin, height, width, absolute, items, view, href, classe, oculta, mantém, disponível, esta, forma, padrão, fornecer, contexto, usuários, visão, obtêm, pelo, padrões, tornam, genuinamente, michael, bulgakov, hands, these, stood, out, black, coat, brought, disgusting, disturbing, wrapped, can, alone, nudge, down, align, with, top, normal, spot, make, much, larger, 300, size, red, veja, outro, adicionamos, separadamente, folha, isso, cria, primeira, letra, ampliada, toque, tipográfico, clássico, início, capítulo, eyes, green, cat, vem, pares, escrito, abertura, fechamento, regra, geral, parte, block, sits, own, line, fills, row, 1px, solid, middle, sentence, começa, nova, estende, até, total, pai, agrupar, seções, maiores, flui, ocupa, pode, conter, legalmente, contêineres, genéricos, diferença, tipo, caixa, criam, correspondência, semântica, ferramenta, certa, reflete, esse, semantic, highlight, assistive, tech, understands, just, meaning, conveyed, trechos, parecem, idênticos, iguais, segundo, realmente, comunica, este, mecanismos, busca, precisar, simplesmente, scripting, colorir, palavra, envolver, caractere, efeito, rotular, ícone, aplicar, hora, código, abreviação, importante, forte, enfatizado, isto, adiciona, deve, ser, sempre, adequar, último, recurso, contrário, maioria, dos, ela, nem, tecnologias, assistivas, nada, sua, função, marcar, possa, direcioná, usado, estilizar, manipular, boas, práticas, charset, checked, autoplay, action, accesskey, colspan, defer, autofocus, autocomplete, draggable, download, disabled, coords, controls, contenteditable, content, async, alt, attribute, reference, forms, vídeos, youtube, multimídia, media, obsoletos, attributes, gradiente, radial, lineargradient, sombras, projetadas, efeitos, desfoque, aos, filtros, stroking, path, polyline, polygon, elipse, círculo, retângulo, gradientes, coordenadas, desenhando, xmp, wbr, video, var, track, thead, tfoot, textarea, template, tbody, table, sup, summary, sub, source, small, select, section, script, samp, ruby, rtc, progress, pre, picture, plaintext, param, output, option, optgroup, object, noscript, noframes, nobr, nav, meter, meta, menuitem, menu, marquee, map, main, legend, keygen, kbd, isindex, ins, input, img, iframe, hgroup, header, frameset, frame, form, footer, figure, figcaption, fieldset, embed, dfn, details, del, datalist, colgroup, col, cite, center, caption, blockquote, blink, big, bdo, bdi, basefont, base, audio, aside, article, area, applet, address, acronym, obsoletas, xhtml, tabela, tipos, mime, mensagens, status, métodos, atalhos, teclado, entidades, codificação, utf, códigos, 8859, ascii, conjuntos, caracteres, references, migração, suporte, navegadores, áudio, computercode, caminhos, arquivo, scripts, blocos, tabelas, comentários, cores, listas, links, formatação, títulos, básicas, editores, basics, entrar, pesquisar, formatters, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, cursos,

Text of the page (random words):
tag html span w3docs w3docs livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python cursos quizzes exercícios snippets ferramentas general tools html editor password generator html encoder code diff json beautifier todos os 13 color tools color picker color converter color mixer color hex colors hsl todos os 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder todos os 19 code formatters javascript formatter css formatter html formatter json formatter php formatter pesquisar na w3docs k pt english en deutsch de русский ru français fr español es português pt italiano it entrar aprender html html basics introdução ao html editores e ferramentas elementos html tags básicas do html atributos html títulos html formatação html links html listas html cores em html comentários html tabelas html blocos html scripts html estilos html css caminhos de arquivo html html computercode html templates templates de layout templates de formulários html 5 introdução ao html5 tags html5 elementos semânticos áudio vídeo suporte a navegadores html5 migração para html5 html references conjuntos de caracteres ascii iso 8859 1 códigos de idioma iso codificação utf 8 entidades html atalhos de teclado métodos http imagens html mensagens de status http tipos mime tabela de tags html xhtml html url html tags tags obsoletas atributos globais html atributos de evento tags html doctype a abbr acronym address applet area article aside audio b base basefont bdi bdo big blink blockquote body br button canvas caption center cite code col colgroup data datalist dd del details dfn dialog dir div dl dt em embed fieldset figcaption figure font footer form frame frameset h1 h6 head header hgroup hr html i iframe img input ins isindex kbd keygen label legend li link main map mark marquee menu menuitem meta meter nav nobr noframes noscript object ol optgroup option output p param plaintext picture pre progress q rb rp rt rtc ruby s samp script section select small source spacer span strike strong style sub summary sup svg table tbody td template textarea tfoot th thead time title tr track tt u ul var video wbr xmp canvas tutorial introdução ao canvas desenhando no canvas coordenadas do canvas gradientes no canvas texto no canvas imagens no canvas referência do canvas svg tutorial introdução ao svg svg no html5 retângulo svg círculo svg svg elipse linha svg svg polygon svg polyline svg path svg text svg stroking introdução aos filtros svg efeitos de desfoque svg sombras projetadas svg svg lineargradient gradiente radial svg referência svg html attributes atributos obsoletos atributo class do html atributo id do html html media html multimídia vídeos do youtube em html html forms formulários html html attribute reference alt async accept content contenteditable controls coords disabled download draggable autocomplete autofocus defer dir colspan accesskey action autoplay checked accept charset tag html span a tag html span é um contêiner inline genérico sem significado semântico usado para estilizar ou manipular texto exemplos e boas práticas a tag html span é um contêiner inline genérico para um trecho de texto ou conteúdo ao contrário da maioria dos elementos html ela não carrega nenhum significado semântico não informa ao navegador nem às tecnologias assistivas nada sobre o que o conteúdo é sua única função é marcar um trecho de conteúdo inline para que você possa direcioná lo com css ou javascript como não adiciona nenhum significado span deve ser seu último recurso não o primeiro sempre que um elemento semântico se adequar ao conteúdo prefira o se o texto for use isto não span enfatizado em importante forte strong destacado relevante mark uma abreviação abbr código code uma data ou hora time use span apenas quando nenhum elemento inline semântico se aplicar e você precisar simplesmente de um gancho para estilização ou scripting por exemplo colorir uma única palavra envolver um caractere para um efeito de capitular ou rotular um ícone decorativo prefira elementos semânticos os dois trechos abaixo parecem idênticos no navegador mas não são iguais o primeiro usa um span com estilo inline o segundo usa mark que realmente comunica este texto está destacado por relevância para leitores de tela e mecanismos de busca just visual no meaning conveyed p search results for span style background yellow css span grid p semantic highlight assistive tech understands it p search results for mark css mark grid p copiar quando você precisa apenas de um gancho para estilização e não há correspondência semântica span é a ferramenta certa quando a estilização reflete um significado escolha o elemento que carrega esse significado span vs div span e div são os dois contêineres genéricos sem significado no html a diferença está no tipo de caixa que criam span é inline flui dentro de uma linha de texto e ocupa apenas a largura do seu conteúdo não pode conter elementos de nível de bloco legalmente div é de nível de bloco começa em uma nova linha e se estende até a largura total do seu pai use o para agrupar seções maiores p this sentence has an span style color 8ebf42 inline span span in the middle p div style border 1px solid 8ebf42 this div is a block it sits on its own line and fills the row div copiar regra geral use span para uma parte de uma linha e div para um bloco de conteúdo sintaxe a tag span vem em pares o conteúdo é escrito entre as tags de abertura span e fechamento span no exemplo abaixo aplicamos um estilo diretamente dentro da tag exemplo da tag html span doctype html html head title title of the document title head body p my cat has span style color 8ebf42 green span eyes p body html copiar experimente você mesmo veja outro exemplo em que adicionamos um atributo class à tag e aplicamos os estilos separadamente em uma folha de estilos isso cria uma capitular uma primeira letra ampliada um toque tipográfico clássico para o início de um capítulo exemplo da tag html span com o atributo class doctype html html head title title of the document title style letter color red font size 300 make the first letter much larger position relative position it relative to its normal spot top 7 px nudge it down to align with the text style head body the first letter s is wrapped in a span so we can style it alone p span class letter s span he brought in disgusting disturbing yellow flowers in her hands and these flowers stood out on her black coat p p michael bulgakov p body html copiar experimente você mesmo casos de uso de acessibilidade dois padrões tornam o span genuinamente útil para acessibilidade texto apenas para leitores de tela uma classe visually hidden oculta o texto da tela mas o mantém disponível para leitores de tela esta é a forma padrão de fornecer contexto que usuários com visão obtêm apenas pelo layout a href cart view cart span class visually hidden 3 items span a style visually hidden position absolute width 1 px height 1 px margin 1 px padding 0 overflow hidden clip rect 0 0 0 0 white space nowrap border 0 style copiar rotulação de ícones fontes de ícones e glifos decorativos não têm texto para um leitor de tela anunciar oculte o span decorativo com aria hidden e forneça um nome acessível com aria label no link ou botão button aria label close dialog span aria hidden true span button copiar aqui aria hidden true remove o visual da árvore de acessibilidade enquanto aria label informa à tecnologia assistiva que o botão significa fechar diálogo atributos span não possui atributos próprios na prática estes atributos globais fazem quase todo o trabalho atributo finalidade class conecta o elemento a uma ou mais regras css id fornece um identificador único para direcionamento via css ou javascript style aplica css inline diretamente útil para estilizações pontuais lang marca um trecho de texto como um idioma diferente ex span lang fr a tag também suporta os atributos de evento permitindo reagir a ações do usuário como cliques ou hovers um evento ocorre quando o navegador reage a uma ação do usuário clicar com o mouse reproduzir um vídeo enviar um formulário entre outros prática prática qual é o uso correto da tag span do html qual é o uso correto da tag span do html span this is an example of a span tag span span this is an example of a span tag this is an example of a span tag span html this is a span tag example html verificar prática você deseja destacar um termo de pesquisa para que leitores de tela também entendam que ele é relevante qual elemento é a melhor escolha você deseja destacar um termo de pesquisa para que leitores de tela também entendam que ele é relevante qual elemento é a melhor escolha mark porque marca semanticamente o texto como destacado por relevância span style background yellow porque parece igual no navegador div porque agrupa o conteúdo strong porque o texto precisa de fundo amarelo verificar was this page helpful yes no previous spacer next strike on this page prefira elementos semânticos span vs div sintaxe casos de uso de acessibilidade atributos prática w3docs tutoriais exemplos exercícios snippets e quizzes gratuitos para a web desde 2014 livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python prática exercícios quizzes editor try it ferramentas html editor password generator html encoder code diff json beautifier empresa sobre contato política de privacidade idioma english deutsch русский français español português italiano 2026 w3docs todos os direitos reservados feito para desenvolvedores