Meta tags:
description=Todos os elementos HTML são divididos em dois grupos: elementos block e inline. Veja a lista completa de cada tipo.;

Headings (most frequently used words):

block, inline, de, elementos, exemplo, um, elemento, html, alterando, exibição, com, css, regra, aninhamento, dentro, não, permitido, div, vs, span, contêineres, genéricos, prática, display,

Text of the page (most frequently used words):
html (73), block (52), inline (48), span (31), div (28), elementos (27), #elemento (22), svg (19), como (18), uma (17), aprender (15), #dentro (13), display (12), linha (12), para (11), css (10), canvas (10), texto (9), body (9), head (9), conteúdo (8), copiar (8), class (8), são (8), não (7), this (7), html5 (7), element (7), color (7), title (7), width (6), pode (6), você (6), que (6), style (6), tags (6), w3docs (5), todos (5), prática (5), regra (5), página (5), ser (5), quando (5), text (5), doctype (5), largura (5), introdução (5), formatter (5), code (4), generator (4), com (4), contêiner (4), propriedade (4), está (4), exemplo (4), btn (4), dos (4), nova (4), the (4), atributos (4), sobre (3), json (3), encoder (3), editor (3), ferramentas (3), quizzes (3), exercícios (3), php (3), javascript (3), genéricos (3), aninhamento (3), height (3), genérico (3), sem (3), inválido (3), renderizado (3), apenas (3), strong (3), section (3), aleq (3), use (3), layout (3), dois (3), por (3), podem (3), cada (3), comportamento (3), padding (3), href (3), background (3), lado (3), outros (3), fluxo (3), img (3), tipo (3), padrão (3), templates (3), string (3), tools (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), idioma (2), beautifier (2), diff (2), password (2), python (2), java (2), git (2), livros (2), snippets (2), desde (2), contêineres (2), permitido (2), alterando (2), exibição (2), page (2), scripts (2), tabelas (2), agrupar (2), seções (2), colocado (2), controlado (2), pela (2), qual (2), afirmação (2), correta (2), semântico (2), ele (2), seu (2), nada (2), mais (2), nav (2), article (2), card (2), escolha (2), execução (2), barra (2), links (2), caso (2), envolver (2), here (2), inside (2), not (2), deve (2), isso (2), navegadores (2), link (2), ainda (2), horizontalmente (2), center (2), margin (2), horizontal (2), mas (2), flui (2), também (2), behaving (2), forçado (2), renderizar (2), começa (2), ocupa (2), total (2), fica (2), usar (2), time (2), script (2), output (2), kbd (2), data (2), font (2), frase (2), experimente (2), mesmo (2), alt (2), photo (2), document (2), ocupam (2), pre (2), noscript (2), footer (2), address (2), level (2), starts (2), new (2), line (2), toda (2), disponível (2), blocos (2), lista (2), completa (2), importante (2), tag (2), veja (2), categorias (2), caixas (2), accept (2), dir (2), formulários (2), atributo (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, exemplos, gratuitos, web, 2014, next, previous, yes, was, helpful, verificar, definir, remove, capacidade, respeitar, usado, grandes, produzir, alterado, prefira, descrever, recorra, significativo, aplicar, username, hello, welcome, groups, simples, agrupando, partes, inteiras, marcando, fragmento, selecionar, trecho, pequeno, colorir, única, palavra, adicionar, tooltip, maiores, estilização, lateral, nenhum, existente, encaixa, oferece, wrapper, significado, usará, constantemente, direção, inversa, sempre, permitida, precisar, observação, especial, belongs, valid, nested, válido, manter, must, invalid, put, fundamental, fazer, produz, corrigir, marcação, maneiras, inesperadas, mantém, sua, alinha, contact, about, home, fff, 2196f3, align, 120, uso, clássico, navegação, fileira, botões, precisam, preenchimento, definidos, devem, ficar, existe, terceiro, valor, útil, junto, conteúdos, respeita, superior, inferior, melhor, mundos, after, before, like, ffecb3, e0f7fa, abaixo, comportamentos, renderização, alterná, los, este, motivos, comuns, estilizado, permanece, quebra, including, tax, red, weight, bold, price, ver, claramente, coloque, meio, continua, mesma, afetado, 185, 200, https, placehold, 200x185, src, heading, aqui, parágrafo, quebrar, geralmente, contêm, vazios, contrário, começam, eles, surgem, necessária, incluídos, parte, principal, another, also, and, takes, full, usados, corpo, documento, conter, pai, esse, cria, parágrafos, divisões, maioria, esta, explica, apresenta, mostra, permite, alterar, aborda, indica, vez, saber, elas, descrevem, moderno, agrupa, fraseado, etc, enquanto, versus, significa, qualquer, substituído, comportar, conceito, fixas, todo, visível, pelo, navegador, caixa, empilham, verticalmente, fluem, palavras, numa, entender, essa, distinção, essencial, controlar, divididos, grupos, charset, checked, autoplay, action, accesskey, colspan, defer, autofocus, autocomplete, draggable, download, disabled, coords, controls, contenteditable, content, async, 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, strike, spacer, source, small, select, samp, ruby, rtc, progress, picture, plaintext, param, option, optgroup, object, noframes, nobr, meter, meta, menuitem, menu, marquee, mark, map, main, legend, label, keygen, isindex, ins, input, iframe, hgroup, header, frameset, frame, form, figure, figcaption, fieldset, embed, dialog, dfn, details, del, datalist, colgroup, col, cite, caption, button, blockquote, blink, big, bdo, bdi, basefont, base, audio, aside, area, applet, acronym, abbr, evento, globais, 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, áudio, vídeo, semânticos, computercode, caminhos, arquivo, estilos, comentários, cores, listas, 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):
elementos html block e inline 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 elementos html block e inline todos os elementos html são divididos em dois grupos elementos block e inline veja a lista completa de cada tipo todo elemento html visível é renderizado pelo navegador como uma caixa block ou inline caixas block empilham verticalmente e ocupam toda a largura disponível caixas inline fluem horizontalmente dentro de uma linha de texto como palavras numa frase entender essa distinção é essencial para controlar o layout da página é importante saber que block e inline não são categorias fixas do html elas descrevem como um elemento é renderizado por padrão o html5 moderno agrupa os elementos por categorias de conteúdo conteúdo de fluxo conteúdo de fraseado etc enquanto block versus inline é na prática um conceito css controlado pela propriedade display isso significa que o comportamento padrão de qualquer elemento pode ser substituído um span pode se comportar como block e um div como inline veja também propriedade css display tag div tag span esta página explica o que são elementos block e inline apresenta a lista completa de cada tipo mostra como o display permite alterar o padrão aborda a importante regra de aninhamento e indica quando usar div em vez de span elementos block um elemento block é um elemento html que começa em uma nova linha e ocupa toda a largura horizontal disponível do seu elemento pai esse tipo de elemento cria blocos de conteúdo parágrafos divisões de página a maioria dos elementos html são elementos block elementos block são usados dentro do corpo de um documento html e podem conter elementos inline ou outros elementos block exemplo de um elemento block doctype html html head title title of the document title head body div this is a block level element it starts on a new line and takes up the full width div p this is another block level element it also starts on a new line p body html copiar experimente você mesmo elementos block address canvas dt footer hr noscript pre ul elementos inline ao contrário dos elementos block os elementos inline não começam em uma nova linha eles surgem dentro de uma linha e ocupam apenas a largura necessária elementos inline são incluídos como parte do texto principal elementos inline geralmente contêm outros elementos inline ou podem ser vazios exemplo de um elemento inline aqui um img fica ao lado de um parágrafo e um elemento a inline flui dentro do texto sem quebrar a linha doctype html html head title title of the document title head body h1 heading h1 p this is aleq s photo p img src https placehold co 200x185 text photo alt aleq width 200 height 185 body html copiar experimente você mesmo para ver o fluxo inline claramente coloque um span no meio de uma frase como span é inline o texto continua na mesma linha e apenas o conteúdo do span é afetado p the total price is span style color red font weight bold 49 99 span including tax p copiar o 49 99 estilizado permanece na linha do texto em execução nada quebra para uma nova linha elementos inline a br data i kbd output script strong time alterando a exibição com css como block e inline são comportamentos de renderização você pode alterná los com a propriedade css display este é um dos motivos mais comuns para usar display no exemplo abaixo um span é forçado a renderizar como block começa em uma nova linha e ocupa a largura total e um div é forçado a renderizar como inline fica no fluxo do texto doctype html html head style span as block display block background e0f7fa div as inline display inline background ffecb3 style head body span class as block i am a span behaving like a block span p text before div class as inline a div behaving inline div text after p body html copiar display inline block existe um terceiro valor útil display inline block ele flui junto com outros conteúdos como um elemento inline mas também respeita width height e margin padding superior inferior como um elemento block o melhor dos dois mundos um caso de uso clássico é uma barra de navegação horizontal ou uma fileira de botões que precisam de largura e preenchimento definidos mas ainda devem ficar lado a lado doctype html html head style btn display inline block width 120 px padding 10 px 0 margin 4 px text align center background 2196f3 color fff style head body a class btn href home a a class btn href about a a class btn href contact a body html copiar cada link mantém sua width e padding comportamento block e ainda se alinha horizontalmente comportamento inline regra de aninhamento block dentro de inline não é permitido uma regra fundamental do html um elemento block não deve ser colocado dentro de um elemento inline por exemplo um span inline não deve envolver um div block fazer isso produz html inválido e os navegadores podem corrigir a marcação de maneiras inesperadas inválido um div block dentro de um span inline invalid do not put a block element inside an inline element span div this block must not be here div span copiar válido manter o span inline dentro do div block valid an inline element nested inside a block element div span this inline element belongs here span div copiar a direção inversa inline dentro de block é sempre permitida quando você precisar de um contêiner block use um elemento block como div não span observação links são um caso especial desde o html5 um elemento a pode envolver conteúdo block div vs span contêineres genéricos quando nenhum elemento existente se encaixa o html oferece dois elementos wrapper genéricos e sem significado semântico que você usará constantemente div um contêiner genérico block use o para agrupar seções maiores de conteúdo para layout ou estilização um card uma barra lateral uma linha span um contêiner genérico inline use o para selecionar um trecho pequeno de texto dentro de uma linha como colorir uma única palavra ou adicionar um tooltip uma regra simples se você está agrupando partes inteiras da página escolha div se está marcando um fragmento dentro do texto em execução escolha span div groups a block section div class card h2 welcome h2 p hello span class username aleq span p div copiar prefira um elemento semântico section article nav strong em quando ele descrever seu conteúdo recorra a div span apenas quando nada mais significativo se aplicar prática prática qual afirmação sobre elementos html block e inline está correta qual afirmação sobre elementos html block e inline está correta se um elemento é renderizado como block ou inline é controlado pela propriedade css display e pode ser alterado um elemento block como div pode ser colocado dentro de um span inline sem produzir html inválido o elemento span é um contêiner genérico block usado para agrupar grandes seções de uma página definir display como inline block remove a capacidade do elemento de respeitar width e height verificar was this page helpful yes no previous tabelas html next scripts html on this page elementos block elementos inline alterando a exibição com css regra de aninhamento block dentro de inline não é permitido div vs span contêineres genéricos 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