{"id":1778,"date":"2024-04-19T22:00:38","date_gmt":"2024-04-20T01:00:38","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=1778"},"modified":"2025-11-06T00:14:23","modified_gmt":"2025-11-06T03:14:23","slug":"imagens-no-html-parte-2","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/imagens-no-html-parte-2\/","title":{"rendered":"Imagens no HTML parte 2"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Tempo de leitura: <\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">minutos<\/span><\/span>\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Mais imagens no HTML<\/strong>: Na primeira parte, dominamos a tag <code>&lt;img><\/code> e as t\u00e9cnicas de otimiza\u00e7\u00e3o (<code>loading<\/code>, <code>srcset<\/code>, <code>&lt;picture><\/code>). Agora, vamos explorar tags HTML que adicionam <strong>estrutura e interatividade<\/strong> \u00e0s imagens e m\u00eddias, garantindo uma sem\u00e2ntica rica e acess\u00edvel.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Focaremos em dois elementos que cumprem pap\u00e9is muito distintos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong><code>&lt;figure><\/code>:<\/strong> Para agrupar m\u00eddias com legendas e dar sem\u00e2ntica de <em>ilustra\u00e7\u00e3o<\/em>.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong><code>&lt;map><\/code>:<\/strong> Para criar \u00e1reas clic\u00e1veis em uma \u00fanica imagem.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">1. O Elemento <code>&lt;figure&gt;<\/code>: Agrupando M\u00eddia e Legenda<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">O elemento <code>&lt;figure&gt;<\/code> \u00e9 usado para agrupar conte\u00fado que \u00e9 referenciado a partir do texto principal, mas que poderia ser movido para outro local sem afetar o fluxo do documento. \u00c9 a melhor forma de criar uma <strong>ilustra\u00e7\u00e3o com contexto<\/strong>.<\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Sintaxe e Componentes<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">O elemento <code>&lt;figure&gt;<\/code> geralmente cont\u00e9m a m\u00eddia e a tag de legenda:<\/p>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Tag<\/strong><\/td><td><strong>Fun\u00e7\u00e3o<\/strong><\/td><td><strong>Import\u00e2ncia Sem\u00e2ntica<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong><code>&lt;figure&gt;<\/code><\/strong><\/td><td><strong>Cont\u00eainer da Figura:<\/strong> Agrupa a m\u00eddia e sua legenda (ou outras legendas).<\/td><td>Indica aos mecanismos de busca e leitores de tela que este conte\u00fado \u00e9 uma <strong>ilustra\u00e7\u00e3o de apoio<\/strong>.<\/td><\/tr><tr><td><strong><code>&lt;figcaption&gt;<\/code><\/strong><\/td><td><strong>Legenda da Figura:<\/strong> Cont\u00e9m a descri\u00e7\u00e3o ou t\u00edtulo da figura.<\/td><td>Fornece uma descri\u00e7\u00e3o vis\u00edvel, complementando o <code>alt<\/code> da imagem.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Exemplo Pr\u00e1tico (Imagem e Legenda):<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">HTML<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;figure>\n  &lt;img src=\"paisagem.jpg\" alt=\"Foto de um vale ao p\u00f4r do sol.\" width=\"600\" height=\"400\">\n  &lt;figcaption>Figura 1.1: Uma vista deslumbrante da natureza capturada na viagem.&lt;\/figcaption>\n&lt;\/figure><\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-medium-font-size wp-block-paragraph\">\ud83d\udca1 <strong>Uso Avan\u00e7ado:<\/strong> O <code>&lt;figure&gt;<\/code> n\u00e3o se limita a imagens. \u00c9 ideal para agrupar <strong>blocos de c\u00f3digo<\/strong>, gr\u00e1ficos, diagramas ou cita\u00e7\u00f5es que precisam de uma legenda ou cr\u00e9dito.<\/p>\n<\/blockquote>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Exemplo (Figura com C\u00f3digo):<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">HTML<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;figure>\n  &lt;pre>\n    &lt;code>function soma(a, b) { return a + b; }&lt;\/code>\n  &lt;\/pre>\n  &lt;figcaption>Exemplo 2.5: Fun\u00e7\u00e3o JavaScript para somar dois n\u00fameros.&lt;\/figcaption>\n&lt;\/figure><\/code><\/pre>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure>\n  <pre>\n    <code>function soma(a, b) { return a + b; }<\/code>\n  <\/pre>\n  <figcaption>Fun\u00e7\u00e3o JavaScript para somar dois n\u00fameros.<\/figcaption>\n<\/figure>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">2. O Elemento <code>&lt;map&gt;<\/code>: Criando Mapas de Imagem Clic\u00e1veis<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">A tag <code>&lt;map&gt;<\/code> permite definir \u00e1reas clic\u00e1veis (hotspots) em uma \u00fanica imagem, transformando a imagem em uma interface interativa.<\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Sintaxe e Componentes<\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Imagem:<\/strong> A tag <code>&lt;img><\/code> precisa do atributo <code>usemap<\/code> que aponta para o <code>name<\/code> do mapa (usando <code>#<\/code>).<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Mapa:<\/strong> A tag <code>&lt;map><\/code> precisa de um atributo <code>name<\/code> correspondente ao <code>usemap<\/code>.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>\u00c1reas:<\/strong> O elemento <code>&lt;area><\/code> define cada regi\u00e3o clic\u00e1vel.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Atributo &lt;area&gt;<\/strong><\/td><td><strong>Fun\u00e7\u00e3o<\/strong><\/td><td><strong>Exemplo<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong><code>shape<\/code><\/strong><\/td><td>Define a forma da \u00e1rea clic\u00e1vel.<\/td><td><code>rect<\/code> (Ret\u00e2ngulo), <code>circle<\/code> (C\u00edrculo), <code>poly<\/code> (Pol\u00edgono), <code>default<\/code> (A imagem inteira).<\/td><\/tr><tr><td><strong><code>coords<\/code><\/strong><\/td><td>Coordenadas da forma (eixo X e Y), medidas a partir do canto superior esquerdo (0,0).<\/td><td><code>rect=\"x1,y1,x2,y2\"<\/code> (Canto Superior Esquerdo, Canto Inferior Direito).<\/td><\/tr><tr><td><strong><code>href<\/code><\/strong><\/td><td>O destino do link para aquela \u00e1rea.<\/td><td><code>href=\"pagina-detalhe.html\"<\/code><\/td><\/tr><tr><td><strong><code>alt<\/code><\/strong><\/td><td><strong>Crucial:<\/strong> Texto alternativo para a \u00e1rea clic\u00e1vel.<\/td><td><code>alt=\"Link para o Produto X\"<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Exemplo Pr\u00e1tico (Ret\u00e2ngulo e C\u00edrculo):<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">HTML<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"mapa-regioes.png\" usemap=\"#mapa-vendas\" alt=\"Mapa com \u00e1reas de vendas\"&gt;\n\n&lt;map name=\"mapa-vendas\"&gt;\n  &lt;area shape=\"rect\" coords=\"0,0,100,100\" href=\"regiao-norte.html\" alt=\"Vendas Regi\u00e3o Norte\"&gt;\n  \n  &lt;area shape=\"circle\" coords=\"200,50,30\" href=\"promocao.html\" alt=\"Promo\u00e7\u00e3o do M\u00eas\"&gt;\n&lt;\/map&gt;\n<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-medium-font-size wp-block-paragraph\">\u26a0\ufe0f <strong>Nota sobre <code>&lt;map&gt;<\/code>:<\/strong> Embora seja v\u00e1lido, o uso de mapas de imagem est\u00e1 em decl\u00ednio. Para intera\u00e7\u00f5es complexas, a maioria dos desenvolvedores prefere sobrepor links transparentes usando <strong>CSS<\/strong> (o que \u00e9 mais f\u00e1cil de tornar <strong>responsivo<\/strong>).<\/p>\n<\/blockquote>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">\ud83d\ude80 A Import\u00e2ncia da Sem\u00e2ntica para Acessibilidade<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Ambas as tags contribuem significativamente para a acessibilidade:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong><code>&lt;figure><\/code>:<\/strong> Ajuda usu\u00e1rios de leitores de tela a entender que o conte\u00fado (imagem, c\u00f3digo, etc.) \u00e9 uma ilustra\u00e7\u00e3o e, se for movido, o fluxo de leitura do texto principal n\u00e3o ser\u00e1 interrompido.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong><code>&lt;area><\/code> e <code>alt<\/code>:<\/strong> Sem o <code>alt<\/code> em cada <code>&lt;area><\/code>, usu\u00e1rios que n\u00e3o enxergam n\u00e3o teriam ideia de onde cada clique os levaria em um mapa de imagem. \u00c9 obrigat\u00f3rio para a acessibilidade.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u2705 Conclus\u00e3o<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">As tags <code>&lt;figure&gt;<\/code> e <code>&lt;map&gt;<\/code> s\u00e3o ferramentas especializadas para gerenciar a complexidade da m\u00eddia em HTML. O <strong><code>&lt;figure&gt;<\/code><\/strong> \u00e9 uma <strong>melhor pr\u00e1tica sem\u00e2ntica<\/strong> para qualquer ilustra\u00e7\u00e3o ou bloco de c\u00f3digo com legenda. J\u00e1 o <strong><code>&lt;map&gt;<\/code><\/strong> oferece uma solu\u00e7\u00e3o nativa para interatividade dentro de imagens. Ao combin\u00e1-las com a otimiza\u00e7\u00e3o da tag <code>&lt;img&gt;<\/code>, voc\u00ea cria p\u00e1ginas que s\u00e3o ricas visualmente, altamente acess\u00edveis e bem estruturadas.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Toda jornada tem um in\u00edcio, e o in\u00edcio para se tornar um desenvolvedor web \u00e9 dominar as seguintes tecnologias, que voc\u00ea encontra aqui mesmo:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/html\"><img decoding=\"async\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.png\" alt=\"HTML\" class=\"wp-image-600\"\/><\/a><figcaption class=\"wp-element-caption\">HTML<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/css\"><img decoding=\"async\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.png\" alt=\"CSS\" class=\"wp-image-702\"\/><\/a><figcaption class=\"wp-element-caption\">CSS<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/javascript\"><img decoding=\"async\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/javascript.png\" alt=\"Javascript\" class=\"wp-image-804\"\/><\/a><figcaption class=\"wp-element-caption\">JavaScript<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">E se voc\u00ea gosta do nosso conte\u00fado, n\u00e3o deixe de contribuir adquirindo os servi\u00e7os e produtos dos nossos apoiadores e empresas que somos associados:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/hostinger.com.br\/?REFERRALCODE=1THIAGO62\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"250\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/03\/hostinger.png\" alt=\"Hospedagem Hostinger\" class=\"wp-image-92\"\/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/amzn.to\/3SNDYlc\"><img decoding=\"async\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/08\/ofertas-amazon.png\" alt=\"Ofertas Amazon\" class=\"wp-image-1308\"\/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/amzn.to\/3SNKmt0\"><img decoding=\"async\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/08\/amazonprime.png\" alt=\"Amazon Prime\" class=\"wp-image-1307\"\/><\/a><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Tempo de leitura: <\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">minutos<\/span><\/span>Mais imagens no HTML: Na primeira parte, dominamos a tag &lt;img> e as t\u00e9cnicas de&#8230;<\/p>\n","protected":false},"author":1,"featured_media":600,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-1778","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","wpcat-6-id"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Imagens no HTML parte 2 - BLOG THIAGO ROSSI<\/title>\n<meta name=\"description\" content=\"Mais imagens no HTML: Neste artigo, vamos explorar as tags e , que nos permitem criar mapas de imagem interativos e agrupar imagens com ...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thiagorossi.com.br\/blog\/imagens-no-html-parte-2\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Imagens no HTML parte 2 - BLOG THIAGO ROSSI\" \/>\n<meta property=\"og:description\" content=\"Mais imagens no HTML: Neste artigo, vamos explorar as tags e , que nos permitem criar mapas de imagem interativos e agrupar imagens com ...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thiagorossi.com.br\/blog\/imagens-no-html-parte-2\/\" \/>\n<meta property=\"og:site_name\" content=\"BLOG THIAGO ROSSI\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-20T01:00:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-06T03:14:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"758\" \/>\n\t<meta property=\"og:image:height\" content=\"426\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Thiago Rossi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thiago Rossi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/imagens-no-html-parte-2\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/imagens-no-html-parte-2\\\/\"},\"author\":{\"name\":\"Thiago Rossi\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\"},\"headline\":\"Imagens no HTML parte 2\",\"datePublished\":\"2024-04-20T01:00:38+00:00\",\"dateModified\":\"2025-11-06T03:14:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/imagens-no-html-parte-2\\\/\"},\"wordCount\":626,\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/imagens-no-html-parte-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/html.webp\",\"articleSection\":[\"HTML\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/imagens-no-html-parte-2\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/imagens-no-html-parte-2\\\/\",\"name\":\"Imagens no HTML parte 2 - BLOG THIAGO ROSSI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/imagens-no-html-parte-2\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/imagens-no-html-parte-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/html.webp\",\"datePublished\":\"2024-04-20T01:00:38+00:00\",\"dateModified\":\"2025-11-06T03:14:23+00:00\",\"description\":\"Mais imagens no HTML: Neste artigo, vamos explorar as tags e , que nos permitem criar mapas de imagem interativos e agrupar imagens com ...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/imagens-no-html-parte-2\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/imagens-no-html-parte-2\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/imagens-no-html-parte-2\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/html.webp\",\"contentUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/html.webp\",\"width\":758,\"height\":426,\"caption\":\"HTML\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/imagens-no-html-parte-2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Imagens no HTML parte 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\",\"name\":\"THIAGO ROSSI\",\"description\":\"Mais de 20 anos de experi\u00eancia no mercado de TI!\",\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"alternateName\":\"TR | CURSO WEB DEV\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\",\"name\":\"THIAGO ROSSI\",\"alternateName\":\"TR | CURSO WEB DEV\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/new-logo.webp\",\"contentUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/new-logo.webp\",\"width\":300,\"height\":300,\"caption\":\"THIAGO ROSSI\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/linkedin.com\\\/in\\\/thiagox86\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\",\"name\":\"Thiago Rossi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"caption\":\"Thiago Rossi\"},\"description\":\"Com mais de 20 anos de jornada na tecnologia, minha trajet\u00f3ria evoluiu do ensino t\u00e9cnico \u00e0 arquitetura de sistemas complexos. Hoje, foco minha expertise no desenvolvimento de solu\u00e7\u00f5es de Intelig\u00eancia Artificial nativa e an\u00e1lise de dados p\u00fablicos, utilizando o ecossistema PHP para transformar dados brutos em transpar\u00eancia e efici\u00eancia. Como autor e desenvolvedor, acredito na democratiza\u00e7\u00e3o do conhecimento. Essa vis\u00e3o resultou em uma biblioteca de mais de 530 artigos gratuitos, cobrindo desde a base do WebDev e Infraestrutura at\u00e9 os bastidores da ind\u00fastria de Jogos e IA. No universo de Game Design, sou autor do livro \\\"GDD \u2013 O Guia Definitivo\\\" e documento ativamente meus processos atrav\u00e9s de DevLogs, unindo rigor t\u00e9cnico e criatividade em projetos desenvolvidos com GDevelop 5. Meu compromisso \u00e9 conectar engenharia de ponta com as reais oportunidades do mercado de tecnologia.\",\"sameAs\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\",\"https:\\\/\\\/instagram.com\\\/thiagorossix86\",\"https:\\\/\\\/linkedin.com\\\/in\\\/thiagox86\"],\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/author\\\/thiagorossi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Imagens no HTML parte 2 - BLOG THIAGO ROSSI","description":"Mais imagens no HTML: Neste artigo, vamos explorar as tags e , que nos permitem criar mapas de imagem interativos e agrupar imagens com ...","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:\/\/thiagorossi.com.br\/blog\/imagens-no-html-parte-2\/","og_locale":"pt_BR","og_type":"article","og_title":"Imagens no HTML parte 2 - BLOG THIAGO ROSSI","og_description":"Mais imagens no HTML: Neste artigo, vamos explorar as tags e , que nos permitem criar mapas de imagem interativos e agrupar imagens com ...","og_url":"https:\/\/thiagorossi.com.br\/blog\/imagens-no-html-parte-2\/","og_site_name":"BLOG THIAGO ROSSI","article_published_time":"2024-04-20T01:00:38+00:00","article_modified_time":"2025-11-06T03:14:23+00:00","og_image":[{"width":758,"height":426,"url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp","type":"image\/webp"}],"author":"Thiago Rossi","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Thiago Rossi","Est. tempo de leitura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thiagorossi.com.br\/blog\/imagens-no-html-parte-2\/#article","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/imagens-no-html-parte-2\/"},"author":{"name":"Thiago Rossi","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87"},"headline":"Imagens no HTML parte 2","datePublished":"2024-04-20T01:00:38+00:00","dateModified":"2025-11-06T03:14:23+00:00","mainEntityOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/imagens-no-html-parte-2\/"},"wordCount":626,"publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/imagens-no-html-parte-2\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp","articleSection":["HTML"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/thiagorossi.com.br\/blog\/imagens-no-html-parte-2\/","url":"https:\/\/thiagorossi.com.br\/blog\/imagens-no-html-parte-2\/","name":"Imagens no HTML parte 2 - BLOG THIAGO ROSSI","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/imagens-no-html-parte-2\/#primaryimage"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/imagens-no-html-parte-2\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp","datePublished":"2024-04-20T01:00:38+00:00","dateModified":"2025-11-06T03:14:23+00:00","description":"Mais imagens no HTML: Neste artigo, vamos explorar as tags e , que nos permitem criar mapas de imagem interativos e agrupar imagens com ...","breadcrumb":{"@id":"https:\/\/thiagorossi.com.br\/blog\/imagens-no-html-parte-2\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thiagorossi.com.br\/blog\/imagens-no-html-parte-2\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/imagens-no-html-parte-2\/#primaryimage","url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp","contentUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp","width":758,"height":426,"caption":"HTML"},{"@type":"BreadcrumbList","@id":"https:\/\/thiagorossi.com.br\/blog\/imagens-no-html-parte-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thiagorossi.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Imagens no HTML parte 2"}]},{"@type":"WebSite","@id":"https:\/\/thiagorossi.com.br\/blog\/#website","url":"https:\/\/thiagorossi.com.br\/blog\/","name":"THIAGO ROSSI","description":"Mais de 20 anos de experi\u00eancia no mercado de TI!","publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"alternateName":"TR | CURSO WEB DEV","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thiagorossi.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/thiagorossi.com.br\/blog\/#organization","name":"THIAGO ROSSI","alternateName":"TR | CURSO WEB DEV","url":"https:\/\/thiagorossi.com.br\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/new-logo.webp","contentUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/new-logo.webp","width":300,"height":300,"caption":"THIAGO ROSSI"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/linkedin.com\/in\/thiagox86"]},{"@type":"Person","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87","name":"Thiago Rossi","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","caption":"Thiago Rossi"},"description":"Com mais de 20 anos de jornada na tecnologia, minha trajet\u00f3ria evoluiu do ensino t\u00e9cnico \u00e0 arquitetura de sistemas complexos. Hoje, foco minha expertise no desenvolvimento de solu\u00e7\u00f5es de Intelig\u00eancia Artificial nativa e an\u00e1lise de dados p\u00fablicos, utilizando o ecossistema PHP para transformar dados brutos em transpar\u00eancia e efici\u00eancia. Como autor e desenvolvedor, acredito na democratiza\u00e7\u00e3o do conhecimento. Essa vis\u00e3o resultou em uma biblioteca de mais de 530 artigos gratuitos, cobrindo desde a base do WebDev e Infraestrutura at\u00e9 os bastidores da ind\u00fastria de Jogos e IA. No universo de Game Design, sou autor do livro \"GDD \u2013 O Guia Definitivo\" e documento ativamente meus processos atrav\u00e9s de DevLogs, unindo rigor t\u00e9cnico e criatividade em projetos desenvolvidos com GDevelop 5. Meu compromisso \u00e9 conectar engenharia de ponta com as reais oportunidades do mercado de tecnologia.","sameAs":["https:\/\/thiagorossi.com.br\/blog","https:\/\/instagram.com\/thiagorossix86","https:\/\/linkedin.com\/in\/thiagox86"],"url":"https:\/\/thiagorossi.com.br\/blog\/author\/thiagorossi\/"}]}},"_links":{"self":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/1778","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/comments?post=1778"}],"version-history":[{"count":1,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/1778\/revisions"}],"predecessor-version":[{"id":4342,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/1778\/revisions\/4342"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/media\/600"}],"wp:attachment":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/media?parent=1778"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/categories?post=1778"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/tags?post=1778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}