Reorganizando elementos estruturais para prototipar layouts alternativos.<\/li><\/ul>\nO DOM atualiza ao vivo com as altera\u00e7\u00f5es feitas na visualiza\u00e7\u00e3o do inspetor. Assim, qualquer ajuste \u00e9 visualizado instantaneamente no navegador e, depois, resetado ao atualizar a p\u00e1gina, tornando os experimentos de baixo risco durante o desenvolvimento.<\/p>\n
4. Testar Responsividade<\/h3>\n Al\u00e9m de editar elementos individuais, as ferramentas de inspe\u00e7\u00e3o tamb\u00e9m oferecem ambientes para testar a responsividade em uma variedade de dispositivos e visualiza\u00e7\u00f5es.<\/p>\n
O Chrome DevTools inclui simula\u00e7\u00e3o em modo dispositivo. Voc\u00ea pode selecionar predefini\u00e7\u00f5es para emular resolu\u00e7\u00f5es padr\u00e3o de telefone ou tablet e capacidades de toque. Ou use as op\u00e7\u00f5es mais avan\u00e7adas para configurar manualmente dimens\u00f5es exatas, rela\u00e7\u00f5es de pixel, limita\u00e7\u00e3o de CPU e outras m\u00e9tricas.<\/p>\n
Isso permite a valida\u00e7\u00e3o r\u00e1pida de aspectos como:<\/b><\/p>\nLayouts em diferentes pontos de quebra.<\/li> Espa\u00e7amento dos alvos de toque para usu\u00e1rios de dispositivos m\u00f3veis.<\/li> Desempenho do site em dispositivos de baixa pot\u00eancia.<\/li> Acessibilidade em diferentes hardwares.<\/li><\/ul>\nA capacidade de visualizar p\u00e1ginas em telas m\u00f3veis simuladas durante o desenvolvimento ajuda a aperfei\u00e7oar a responsividade e a entrega de melhorias progressivas. Testar em um amplo espectro de dispositivos emulados garante suporte abrangente a navegadores e dispositivos.<\/p>\n
Inspecionando Elementos no Firefox<\/h2>\n Firefox oferece suas ferramentas de inspe\u00e7\u00e3o de p\u00e1ginas web que rivalizam com as funcionalidades do Chrome DevTools. Acesse o Inspector do Firefox usando os mesmos atalhos de Inspect Element que no Chrome: Ctrl+Shift+I<\/b> (Windows) e Cmd+Opt+I<\/b> (Mac).<\/b><\/p>\n
Voc\u00ea tamb\u00e9m pode usar o atalho do teclado Ctrl+Shift+C<\/b> (Windows) e Cmd+Opt+C<\/b> (Mac) para abrir o painel de inspecionar elemento, permitindo que voc\u00ea clique em um elemento na p\u00e1gina para acessar o c\u00f3digo diretamente.<\/p>\n1. Visualizar Atributos DOM<\/h3>\n Ao analisar interfaces complexas, os estados de foco e efeitos din\u00e2micos dependem de atributos HTML em vez de CSS. Clique com o bot\u00e3o direito<\/b> em qualquer elemento dentro das visualiza\u00e7\u00f5es do Inspetor e escolha Mostrar Propriedades DOM<\/b>.<\/p>\nIsso exibe todos os atributos nativos associados ao n\u00f3. Voc\u00ea pode editar diretamente os valores aqui para modificar o comportamento do componente atrav\u00e9s do Inspetor, em vez de requerer altera\u00e7\u00f5es no c\u00f3digo.<\/p>\n
Por exemplo, ajustar os incrementos m\u00ednimos\/m\u00e1ximos e de passo do controle deslizante define visualmente os limites, alterar os nomes dos grupos de bot\u00f5es de caixa de sele\u00e7\u00e3o\/r\u00e1dio alterna, sobrescrever as propriedades do conjunto de dados conecta diferentes dados remotos, e a lista continua.<\/p>\n
2. Trabalhe Visualmente com Diagramas de Modelo de Caixa<\/h3>\n Firefox facilita a inspe\u00e7\u00e3o ao mostrar o preenchimento, as bordas e as margens \u00e0 medida que voc\u00ea move o cursor pelo site.<\/p>\nAo clicar em qualquer n\u00f3, o painel do Inspetor alterna entre tr\u00eas estados: geometria desativada, apenas sobreposi\u00e7\u00e3o do modelo de caixa e sobreposi\u00e7\u00e3o mais contornos de marca\u00e7\u00e3o.<\/p>\n
Isso pode ser \u00fatil quando voc\u00ea quer testar se o espa\u00e7amento, preenchimento e margens foram aplicados de maneira adequada aos elementos.<\/p>\n
Isso tamb\u00e9m torna mais simples corrigir quaisquer problemas, pois voc\u00ea pode clicar em elementos espec\u00edficos e ver exatamente quais estiliza\u00e7\u00f5es CSS est\u00e3o afetando-os. A an\u00e1lise geom\u00e9trica aqui pode ajudar os iniciantes a compreenderem rela\u00e7\u00f5es espaciais mais rapidamente.<\/p>\n
3. Edite Cores com um Seletor de Cores<\/h3>\n Dentro do Inspector, clique em qualquer amostra de cor ao lado de qualquer propriedade que aceite cores, como fundo, borda, etc. Ser\u00e1 exibido um controle deslizante de cor, configura\u00e7\u00e3o de alfa e um seletor de cores para capturar cores da sua p\u00e1gina aberta.<\/p>\nVoc\u00ea n\u00e3o precisa mais gastar tempo adivinhando c\u00f3digos de cores ou verificando seus ativos de design para encontrar o c\u00f3digo usado. Escolha-o a partir de elementos existentes ou at\u00e9 mesmo de imagens na p\u00e1gina.<\/p>\n
Inspecionando Elementos no Safari<\/h2>\n O Safari oferece o Inspetor Webkit para inspecionar p\u00e1ginas em sistemas macOS principalmente. No entanto, voc\u00ea precisa ativar o menu de desenvolvimento antes de acess\u00e1-lo.<\/p>\n
Abra o Safari e clique em Safari no Menu<\/b> > Configura\u00e7\u00f5es<\/b> > Avan\u00e7ado<\/b>. Marque a caixa para \u201cMostrar funcionalidades para desenvolvedores web.<\/b>\u201d<\/p>\nAgora voc\u00ea pode visitar qualquer site e clicar com o bot\u00e3o direito<\/b> para ver a op\u00e7\u00e3o \u201cInspeccionar elemento<\/b>\u201d dispon\u00edvel,<\/p>\nVoc\u00ea tamb\u00e9m pode usar o atalho de teclado, Cmd+Opt+C,<\/b> para acessar o recurso Inspect Element.<\/p>\nCronogramas e Velocidade da Rede<\/h3>\n
Assim como a maioria dos outros navegadores, o Safari oferece cronogramas poderosos dentro do Inspetor Safari. A lista de recursos ajuda voc\u00ea a identificar instantaneamente quais arquivos est\u00e3o causando atrasos na renderiza\u00e7\u00e3o e qual pode ser o motivo. Voc\u00ea tamb\u00e9m pode ver quais scripts est\u00e3o bloqueando o carregamento da p\u00e1gina.<\/p>\n
Visualiza\u00e7\u00e3o 3D das Camadas do Site<\/h3>\nSe voc\u00ea deseja analisar as camadas que comp\u00f5em o site, basta acessar a aba de Camadas e voc\u00ea ser\u00e1 apresentado a um modelo 3D completo de todas as camadas<\/p>\n
Formas de Usar o Inspect Element<\/h2>\n Agora que configuramos as ferramentas de inspe\u00e7\u00e3o, vamos discutir algumas maneiras pr\u00e1ticas de us\u00e1-las. Aqui est\u00e3o apenas alguns exemplos comuns de uso:<\/p>\n
Alterar Texto ou Imagens<\/h3>\n Uma funcionalidade \u00fatil \u00e9 a modifica\u00e7\u00e3o de conte\u00fado textual ou de imagens diretamente dentro do editor. Voc\u00ea pode ajustar t\u00edtulos, trocar logotipos, anonimizar detalhes e mais.<\/p>\n
Para editar qualquer texto ou imagem, inspecione primeiro o elemento que deseja alterar, depois d\u00ea um duplo clique dentro dos seus limites no editor de c\u00f3digo para tornar o conte\u00fado edit\u00e1vel.<\/p>\n
Insira o que desejar e pressione enter para aplicar as altera\u00e7\u00f5es (temporariamente).<\/i><\/p>\nAlterar Cores, Fontes e Estilos<\/h3>\n
Ao inspecionar diversos elementos como links, bot\u00f5es, menus ou galerias \u2014 voc\u00ea notar\u00e1 atributos que definem comportamentos associados como URLs de destino href, fontes de dados de visualiza\u00e7\u00e3o de carrossel e mais.<\/p>\n
Assim como editar conte\u00fado textual e propriedades CSS e folhas de estilo, esses tra\u00e7os no n\u00edvel HTML podem ser manipulados diretamente dentro do Inspetor.<\/p>\n
O DOM atualiza essas mudan\u00e7as na hora. Assim, voc\u00ea pode imediatamente ver como as altera\u00e7\u00f5es remodelam a funcionalidade do componente sem programar:<\/p>\n
Modifique o href de links e bot\u00f5es para redirecionar cliques temporariamente.<\/li> Ajuste o papel da aba e as tags aria para testar melhorias de acessibilidade.<\/li> Troque os atributos src das imagens miniatura enquanto monta galerias.<\/li><\/ul>\nAlterar Estado do Elemento<\/h3>\n Al\u00e9m do estilo b\u00e1sico, as ferramentas do Inspetor tamb\u00e9m permitem modificar estados de elementos interativos como hover, focus e active. Clique com o bot\u00e3o direito<\/b> nos elementos e use as op\u00e7\u00f5es de For\u00e7ar estado<\/b> (Google Chrome) para visualizar como os componentes aparecem durante o uso.<\/p>\nPor exemplo, alterne o estado ativo de um bot\u00e3o para garantir que o efeito de pressionado seja vis\u00edvel aos usu\u00e1rios. Verifique as bordas dos campos desativados para ver se oferecem contraste adequado. Valide se os links do menu se destacam adequadamente ao focar durante os testes de navega\u00e7\u00e3o por teclado.<\/p>\n
Ocultar ou Excluir Itens<\/h3>\n Finalmente, tamb\u00e9m \u00e9 poss\u00edvel ocultar ou deletar elementos da p\u00e1gina em massa. Isso pode ajudar a identificar c\u00f3digos desnecess\u00e1rios que aumentam o tamanho da p\u00e1gina, bloquear elementos de serem renderizados corretamente, ou ocultar conte\u00fado desejado dos usu\u00e1rios de forma inesperada.<\/p>\nPara experimentar isso, basta destacar qualquer elemento no c\u00f3digo e pressionar delete para remov\u00ea-lo da visualiza\u00e7\u00e3o renderizada instantaneamente.<\/p>\n
Na captura de tela, exclu\u00edmos o cabe\u00e7alho da p\u00e1gina inicial da DreamHost da nossa visualiza\u00e7\u00e3o. Voc\u00ea pode fazer muito mais com o Inspect Element conforme voc\u00ea o explora.<\/p>\n
Perguntas Frequentes<\/h2>\nVoc\u00ea pode usar o Inspect Element em qualquer site?<\/h3>\n Sim, o Inspect Element funciona universalmente em todos os sites modernos. No entanto, alguns sites processam o c\u00f3digo no lado do servidor e apenas enviam objetos JavaScript para o frontend. Isso geralmente \u00e9 feito para impedir que raspadores da web extraiam dados, e pode se tornar dif\u00edcil para voc\u00ea entender a estrutura do site usando o Inspect Element.<\/p>\n
As altera\u00e7\u00f5es feitas em Inspect Element s\u00e3o salvas permanentemente?<\/h3>\n N\u00e3o. Quaisquer edi\u00e7\u00f5es feitas atrav\u00e9s de ferramentas de inspe\u00e7\u00e3o s\u00e3o renderizadas temporariamente apenas localmente na visualiza\u00e7\u00e3o do seu navegador. Atualizar a p\u00e1gina reverte para o conte\u00fado padr\u00e3o da p\u00e1gina externa. As altera\u00e7\u00f5es n\u00e3o impactar\u00e3o os arquivos fonte de forma alguma.<\/p>\n
Outros usu\u00e1rios podem ver as altera\u00e7\u00f5es ao inspecionar sites?<\/h3>\n As edi\u00e7\u00f5es do Inspect Element n\u00e3o podem ser visualizadas por outros usu\u00e1rios navegando em sites, mesmo ao acessar o mesmo perfil de navegador em v\u00e1rios dispositivos. Pense nas altera\u00e7\u00f5es como exclusivas para a sua m\u00e1quina apenas.<\/p>\n
Existem outras ferramentas para desenvolvedores al\u00e9m de Inspect Element?<\/h3>\n Com certeza. Como mencionado anteriormente, Console, Sources, Network e outras abas de an\u00e1lise tamb\u00e9m se mostram inestim\u00e1veis durante o desenvolvimento. Al\u00e9m disso, extens\u00f5es de navegador ampliam ainda mais as capacidades do DevTools.<\/p>\n
N\u00e3o apenas visualize sites, interaja com o c\u00f3digo<\/h2>\n Brincar com o recurso Inspect Element revela os bastidores do funcionamento dos sites. Permitindo que voc\u00ea espreite o HTML, CSS e JavaScript por baixo de qualquer p\u00e1gina em que voc\u00ea clique pode ajud\u00e1-lo a entender facilmente por que algo parece e se comporta da maneira que faz.<\/p>\n
Ent\u00e3o, enquanto voc\u00ea navega, mantenha a ferramenta Inspect Element \u00e0 m\u00e3o. Deixe a curiosidade guiar voc\u00ea enquanto clica para descobrir o que faz as coisas aparecerem como s\u00e3o. Quem sabe, voc\u00ea pode at\u00e9 aprender novos m\u00e9todos para ajudar a web a se tornar um lugar ainda mais acess\u00edvel e divertido!<\/p>","protected":false},"excerpt":{"rendered":"
Pense na internet como um enorme iceberg. O usu\u00e1rio m\u00e9dio s\u00f3 v\u00ea a ponta da superf\u00edcie: as interfaces dos sites mostradas em nossas telas, mas cada p\u00e1gina da web repousa sobre maci\u00e7as funda\u00e7\u00f5es de c\u00f3digo. Linhas e linhas de HTML, CSS e JavaScript se sintetizam para construir as experi\u00eancias pelas quais navegamos e tocamos diariamente sem pensar. O que [\u2026]<\/p>\n","protected":false},"author":1079,"featured_media":42774,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"","toc_headlines":"[[\"definition\",\"O Que \u00e9 Inspecionar Elemento?\"],[\"reasons\",\"Por que inspecionar sites?\"],[\"how-it-works\",\"Como as Ferramentas de Desenvolvedor do Navegador Funcionam\"],[\"chrome\",\"Inspecionando Elementos no Google Chrome\"],[\"firefox\",\"Inspecionando Elementos no Firefox\"],[\"safari\",\"Inspecionando Elementos no Safari\"],[\"ways\",\"Formas de Usar o Inspect Element\"],[\"faqs\",\"Perguntas Frequentes\"],[\"summary\",\"N\u00e3o apenas visualize sites, interaja com o c\u00f3digo\"]]","hide_toc":false,"footnotes":""},"categories":[14407,14391],"tags":[],"class_list":["post-57340","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-de-sites-pt","category-tutoriais-pt"],"acf":[],"yoast_head":"\n
Como Inspecionar um Site em Qualquer Navegador [Chrome, Safari, Firefox] - DreamHost Blog<\/title>\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\/pt\/como-inspecionar-um-site\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Inspecionar um Site em Qualquer Navegador [Chrome, Safari, Firefox]\" \/>\n<meta property=\"og:description\" content=\"Pense na internet como um enorme iceberg. O usu\u00e1rio m\u00e9dio s\u00f3 v\u00ea a ponta da superf\u00edcie: as interfaces dos sites mostradas em nossas telas, mas cada p\u00e1gina da web repousa sobre maci\u00e7as funda\u00e7\u00f5es de c\u00f3digo. Linhas e linhas de HTML, CSS e JavaScript se sintetizam para construir as experi\u00eancias pelas quais navegamos e tocamos diariamente sem pensar. O que [\u2026]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-inspecionar-um-site\/\" \/>\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=\"2023-12-21T15:00:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-26T19:47:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/12\/How-to-Inspect-a-Web-Page-HERO-Image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Matt Stamp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\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=\"Matt Stamp\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como Inspecionar um Site em Qualquer Navegador [Chrome, Safari, Firefox] - DreamHost Blog","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\/pt\/como-inspecionar-um-site\/","og_locale":"en_US","og_type":"article","og_title":"Como Inspecionar um Site em Qualquer Navegador [Chrome, Safari, Firefox]","og_description":"Pense na internet como um enorme iceberg. O usu\u00e1rio m\u00e9dio s\u00f3 v\u00ea a ponta da superf\u00edcie: as interfaces dos sites mostradas em nossas telas, mas cada p\u00e1gina da web repousa sobre maci\u00e7as funda\u00e7\u00f5es de c\u00f3digo. Linhas e linhas de HTML, CSS e JavaScript se sintetizam para construir as experi\u00eancias pelas quais navegamos e tocamos diariamente sem pensar. O que [\u2026]","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-inspecionar-um-site\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2023-12-21T15:00:57+00:00","article_modified_time":"2025-05-26T19:47:19+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/12\/How-to-Inspect-a-Web-Page-HERO-Image.jpg","type":"image\/jpeg"}],"author":"Matt Stamp","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Matt Stamp","Est. reading time":"19 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-inspecionar-um-site\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-inspecionar-um-site\/"},"author":{"name":"Matt Stamp","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/43673746e4de1ea74d12de479cd1b7e1"},"headline":"Como Inspecionar um Site em Qualquer Navegador [Chrome, Safari, Firefox]","datePublished":"2023-12-21T15:00:57+00:00","dateModified":"2025-05-26T19:47:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-inspecionar-um-site\/"},"wordCount":3820,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-inspecionar-um-site\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/12\/How-to-Inspect-a-Web-Page-HERO-Image.jpg","articleSection":["Design de Sites","Tutoriais"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-inspecionar-um-site\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-inspecionar-um-site\/","name":"Como Inspecionar um Site em Qualquer Navegador [Chrome, Safari, Firefox] - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-inspecionar-um-site\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-inspecionar-um-site\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/12\/How-to-Inspect-a-Web-Page-HERO-Image.jpg","datePublished":"2023-12-21T15:00:57+00:00","dateModified":"2025-05-26T19:47:19+00:00","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-inspecionar-um-site\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-inspecionar-um-site\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-inspecionar-um-site\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/12\/How-to-Inspect-a-Web-Page-HERO-Image.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/12\/How-to-Inspect-a-Web-Page-HERO-Image.jpg","width":1460,"height":1095,"caption":"The Rider webpage in the background with a code snipper foreground from the inspect element"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/como-inspecionar-um-site\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Como Inspecionar um Site em Qualquer Navegador [Chrome, Safari, Firefox]"}]},{"@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\/43673746e4de1ea74d12de479cd1b7e1","name":"Matt Stamp","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/matt-stamp-dreamhost-150x150.jpeg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/matt-stamp-dreamhost-150x150.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/matt-stamp-dreamhost-150x150.jpeg","caption":"Matt Stamp"},"description":"Matt is a DevOps Engineer at DreamHost. He is responsible for infrastructure automation, system monitoring and documentation. In his free time he enjoys 3D printing and camping. Follow Matt on LinkedIn: Lhttps:\/\/www.linkedin.com\/in\/matt-stamp-7a8b3a10a","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/mattstamp\/"}]}},"lang":"pt","translations":{"pt":57340,"es":42796,"en":42764,"uk":52143,"de":57310,"pl":57315,"ru":57352,"it":68735,"fr":71047,"nl":71077},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/57340","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\/1079"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=57340"}],"version-history":[{"count":3,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/57340\/revisions"}],"predecessor-version":[{"id":59508,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/57340\/revisions\/59508"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/42774"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=57340"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=57340"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=57340"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Inspect](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/12\/what-is-navigation.jpg\")
<\/figure>\n![\"P\u00e1gina](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/12\/inspect-element-h1.jpg\")
<\/figure>\n![\"a](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/12\/font-weight-edited.jpg\")
<\/figure>\n![\"a](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/12\/font-family-edited.jpg\")
<\/figure>\n