{"id":46,"date":"2015-03-03T15:56:17","date_gmt":"2015-03-03T15:56:17","guid":{"rendered":"https:\/\/felizardoandre.wordpress.com\/?p=46"},"modified":"2015-08-28T20:50:59","modified_gmt":"2015-08-28T20:50:59","slug":"a-tag-main","status":"publish","type":"post","link":"https:\/\/www.andrefelizardo.com.br\/blog\/a-tag-main\/","title":{"rendered":"A tag MAIN"},"content":{"rendered":"<p>A tag <strong>MAIN<\/strong> \u00e9 uma tag &#8220;nova&#8221; (lan\u00e7ada em 2013), pouco utilizada e pouco conhecida pela maioria dos <a title=\"Front-end. O que \u00e9?\" href=\"http:\/\/www.andrefelizardo.com.br\/blog\/front-end-o-que-e\/\" target=\"_blank\">front-ends<\/a>. Assim como as outras novas tags do HTML5 (header, nav, footer, aside, article) sua fun\u00e7\u00e3o sem\u00e2ntica \u00e9 importante.<\/p>\n<blockquote><p>A tag\u00a0&lt;main&gt; define o conte\u00fado principal da p\u00e1gina ou da aplica\u00e7\u00e3o.<\/p><\/blockquote>\n<p>Dentro desta tag deve ser colocado o conte\u00fado mais importante da p\u00e1gina. <strong>S\u00f3<\/strong> deve existir <strong>uma<\/strong> tag &lt;main&gt; por p\u00e1gina, por motivos \u00f3bvios.<\/p>\n<p>Sua sem\u00e2ntica define que esta tag <strong>n\u00e3o<\/strong> pode ser filha de nenhuma das tags a seguir:<\/p>\n<ul>\n<li>aside;<\/li>\n<li>article;<\/li>\n<li>footer;<\/li>\n<li>header;<\/li>\n<li>nav.<\/li>\n<\/ul>\n<p>A tag &lt;main&gt; n\u00e3o tem <!--more-->padding, border, margin ou qualquer outro valor padr\u00e3o, por n\u00e3o ser um elemento de se\u00e7\u00e3o de conte\u00fado.<\/p>\n<p>Para facilitar para ledores, e user agents, \u00e9 importante que voc\u00ea coloque o ARIA role=&#8221;main&#8221;.<\/p>\n<p>Um exemplo:<\/p>\n<p><code>&lt;main role=\"main\"&gt;<\/code><\/p>\n<p><code>&lt;p&gt;Conte\u00fado Principal da P\u00e1gina&lt;\/p&gt;<\/code><\/p>\n<p><code>&lt;\/main&gt;<\/code><\/p>\n<p>Atualmente o suporte dos browsers \u00e9 o seguinte:<\/p>\n<p><a href=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/03\/main02.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-49 lazyload\" data-src=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/03\/main02.png\" alt=\"main02\" width=\"612\" height=\"81\" data-srcset=\"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/03\/main02.png 612w, https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/03\/main02-300x40.png 300w\" data-sizes=\"(max-width: 612px) 100vw, 612px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 612px; --smush-placeholder-aspect-ratio: 612\/81;\" \/><\/a><\/p>\n<p>Mesmo o Internet Explorer n\u00e3o dando suporte ainda, \u00e9 interessante que voc\u00ea utilize esta tag, pois este elemento n\u00e3o provoca nenhuma altera\u00e7\u00e3o no layout.<\/p>\n<p><strong>[atualizando]<\/strong> Depois de debates no <a title=\"Andr\u00e9 Felizardo - Facebook\" href=\"http:\/\/facebook.com\/andreluis.felizardo\" target=\"_blank\">Facebook<\/a> e alguns testes, apesar de nativamente o IE realmente n\u00e3o reconhecer a tag, se voc\u00ea colocar no seu CSS um <code>display: block<\/code> ele funciona, para IE 9 e superiores. Para as vers\u00f5es anteriores voc\u00ea vai precisar usar JavaScript,<\/p>\n<pre><span class=\"tag\">&lt;script&gt;<\/span><span class=\"embsrc\"><span class=\"pln\">document<\/span><span class=\"pun\">.<\/span><span class=\"pln\">createElement<\/span><span class=\"pun\">(<\/span><span class=\"str\">'main'<\/span><span class=\"pun\">);<\/span><\/span><span class=\"tag\">&lt;\/script&gt;<\/span><\/pre>\n<p>para criar o elemento manutalmente, ou usar o <a title=\"Modernizr\" href=\"http:\/\/modernizr.com\/\" target=\"_blank\">Modernizr<\/a>, que com certeza ser\u00e1 assunto de outro post.\u00a0<strong>[\/atualizando]<\/strong><\/p>\n<p>Se quiser conferir, aqui est\u00e1 a <a title=\"Tag MAIN - Documenta\u00e7\u00e3o Oficial\" href=\"http:\/\/www.w3.org\/html\/wg\/drafts\/html\/master\/grouping-content.html#the-main-element\" target=\"_blank\">documenta\u00e7\u00e3o oficial<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A tag MAIN \u00e9 uma tag &#8220;nova&#8221; (lan\u00e7ada em 2013), pouco utilizada e pouco conhecida pela maioria dos front-ends. Assim como as outras novas tags do HTML5 (header, nav, footer, aside, article) sua fun\u00e7\u00e3o sem\u00e2ntica \u00e9 importante. A tag\u00a0&lt;main&gt; define o conte\u00fado principal da p\u00e1gina ou da aplica\u00e7\u00e3o. Dentro desta tag deve ser colocado o [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":37,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[5],"tags":[16,52,53,60,61,59],"class_list":["post-46","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tecnologia","tag-dicas","tag-front-end","tag-html","tag-html5","tag-semantica","tag-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>A tag MAIN - Blog do Andr\u00e9 Felizardo<\/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.andrefelizardo.com.br\/blog\/a-tag-main\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A tag MAIN - Blog do Andr\u00e9 Felizardo\" \/>\n<meta property=\"og:description\" content=\"A tag MAIN \u00e9 uma tag &#8220;nova&#8221; (lan\u00e7ada em 2013), pouco utilizada e pouco conhecida pela maioria dos front-ends. Assim como as outras novas tags do HTML5 (header, nav, footer, aside, article) sua fun\u00e7\u00e3o sem\u00e2ntica \u00e9 importante. A tag\u00a0&lt;main&gt; define o conte\u00fado principal da p\u00e1gina ou da aplica\u00e7\u00e3o. Dentro desta tag deve ser colocado o [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.andrefelizardo.com.br\/blog\/a-tag-main\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog do Andr\u00e9 Felizardo\" \/>\n<meta property=\"article:published_time\" content=\"2015-03-03T15:56:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-08-28T20:50:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/01\/front-end-development.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"620\" \/>\n\t<meta property=\"og:image:height\" content=\"413\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Andr\u00e9 Felizardo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andr\u00e9 Felizardo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/a-tag-main\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/a-tag-main\\\/\"},\"author\":{\"name\":\"Andr\u00e9 Felizardo\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/7ffba68b251851fb519600e2e387a02b\"},\"headline\":\"A tag MAIN\",\"datePublished\":\"2015-03-03T15:56:17+00:00\",\"dateModified\":\"2015-08-28T20:50:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/a-tag-main\\\/\"},\"wordCount\":257,\"commentCount\":4,\"image\":{\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/a-tag-main\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/01\\\/front-end-development.jpg\",\"keywords\":[\"dicas\",\"front-end\",\"html\",\"html5\",\"semantica\",\"web\"],\"articleSection\":[\"Tecnologia\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/a-tag-main\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/a-tag-main\\\/\",\"url\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/a-tag-main\\\/\",\"name\":\"A tag MAIN - Blog do Andr\u00e9 Felizardo\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/a-tag-main\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/a-tag-main\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/01\\\/front-end-development.jpg\",\"datePublished\":\"2015-03-03T15:56:17+00:00\",\"dateModified\":\"2015-08-28T20:50:59+00:00\",\"author\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/7ffba68b251851fb519600e2e387a02b\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/a-tag-main\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/a-tag-main\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/a-tag-main\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/01\\\/front-end-development.jpg\",\"contentUrl\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/01\\\/front-end-development.jpg\",\"width\":620,\"height\":413,\"caption\":\"Tag Main\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/a-tag-main\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A tag MAIN\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#website\",\"url\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/\",\"name\":\"Blog do Andr\u00e9 Felizardo\",\"description\":\"Programa\u00e7\u00e3o de dev para dev\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/7ffba68b251851fb519600e2e387a02b\",\"name\":\"Andr\u00e9 Felizardo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/9f9\\\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg\",\"url\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/9f9\\\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg\",\"contentUrl\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/9f9\\\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg\",\"caption\":\"Andr\u00e9 Felizardo\"},\"sameAs\":[\"http:\\\/\\\/www.andrefelizardo.com.br\"],\"url\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/author\\\/andrefelizardo\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"A tag MAIN - Blog do Andr\u00e9 Felizardo","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.andrefelizardo.com.br\/blog\/a-tag-main\/","og_locale":"pt_BR","og_type":"article","og_title":"A tag MAIN - Blog do Andr\u00e9 Felizardo","og_description":"A tag MAIN \u00e9 uma tag &#8220;nova&#8221; (lan\u00e7ada em 2013), pouco utilizada e pouco conhecida pela maioria dos front-ends. Assim como as outras novas tags do HTML5 (header, nav, footer, aside, article) sua fun\u00e7\u00e3o sem\u00e2ntica \u00e9 importante. A tag\u00a0&lt;main&gt; define o conte\u00fado principal da p\u00e1gina ou da aplica\u00e7\u00e3o. Dentro desta tag deve ser colocado o [&hellip;]","og_url":"https:\/\/www.andrefelizardo.com.br\/blog\/a-tag-main\/","og_site_name":"Blog do Andr\u00e9 Felizardo","article_published_time":"2015-03-03T15:56:17+00:00","article_modified_time":"2015-08-28T20:50:59+00:00","og_image":[{"width":620,"height":413,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/01\/front-end-development.jpg","type":"image\/jpeg"}],"author":"Andr\u00e9 Felizardo","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Andr\u00e9 Felizardo","Est. tempo de leitura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.andrefelizardo.com.br\/blog\/a-tag-main\/#article","isPartOf":{"@id":"https:\/\/www.andrefelizardo.com.br\/blog\/a-tag-main\/"},"author":{"name":"Andr\u00e9 Felizardo","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#\/schema\/person\/7ffba68b251851fb519600e2e387a02b"},"headline":"A tag MAIN","datePublished":"2015-03-03T15:56:17+00:00","dateModified":"2015-08-28T20:50:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.andrefelizardo.com.br\/blog\/a-tag-main\/"},"wordCount":257,"commentCount":4,"image":{"@id":"https:\/\/www.andrefelizardo.com.br\/blog\/a-tag-main\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/01\/front-end-development.jpg","keywords":["dicas","front-end","html","html5","semantica","web"],"articleSection":["Tecnologia"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.andrefelizardo.com.br\/blog\/a-tag-main\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.andrefelizardo.com.br\/blog\/a-tag-main\/","url":"https:\/\/www.andrefelizardo.com.br\/blog\/a-tag-main\/","name":"A tag MAIN - Blog do Andr\u00e9 Felizardo","isPartOf":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.andrefelizardo.com.br\/blog\/a-tag-main\/#primaryimage"},"image":{"@id":"https:\/\/www.andrefelizardo.com.br\/blog\/a-tag-main\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/01\/front-end-development.jpg","datePublished":"2015-03-03T15:56:17+00:00","dateModified":"2015-08-28T20:50:59+00:00","author":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#\/schema\/person\/7ffba68b251851fb519600e2e387a02b"},"breadcrumb":{"@id":"https:\/\/www.andrefelizardo.com.br\/blog\/a-tag-main\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.andrefelizardo.com.br\/blog\/a-tag-main\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.andrefelizardo.com.br\/blog\/a-tag-main\/#primaryimage","url":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/01\/front-end-development.jpg","contentUrl":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/01\/front-end-development.jpg","width":620,"height":413,"caption":"Tag Main"},{"@type":"BreadcrumbList","@id":"https:\/\/www.andrefelizardo.com.br\/blog\/a-tag-main\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"http:\/\/www.andrefelizardo.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"A tag MAIN"}]},{"@type":"WebSite","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#website","url":"http:\/\/www.andrefelizardo.com.br\/blog\/","name":"Blog do Andr\u00e9 Felizardo","description":"Programa\u00e7\u00e3o de dev para dev","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.andrefelizardo.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#\/schema\/person\/7ffba68b251851fb519600e2e387a02b","name":"Andr\u00e9 Felizardo","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/wphb-cache\/gravatar\/9f9\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg","url":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/wphb-cache\/gravatar\/9f9\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg","contentUrl":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/wphb-cache\/gravatar\/9f9\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg","caption":"Andr\u00e9 Felizardo"},"sameAs":["http:\/\/www.andrefelizardo.com.br"],"url":"https:\/\/www.andrefelizardo.com.br\/blog\/author\/andrefelizardo\/"}]}},"jetpack_featured_media_url":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/01\/front-end-development.jpg","jetpack_shortlink":"https:\/\/wp.me\/p6EP66-K","jetpack-related-posts":[{"id":338,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/semantica-html\/","url_meta":{"origin":46,"position":0},"title":"Sem\u00e2ntica HTML","author":"Andr\u00e9 Felizardo","date":"3 de mar\u00e7o de 2015","format":false,"excerpt":"Quando penso em Sem\u00e2ntica HTML, diretamente j\u00e1 penso em HTML5. O HTML5 (lan\u00e7ado a partir de 2009) \u00e9 uma vers\u00e3o do HTML ainda n\u00e3o conclu\u00edda, mas que j\u00e1 pode - e deve - ser utilizada por desenvolvedores e navegadores, antes de sua finaliza\u00e7\u00e3o. Antes do lan\u00e7amento dessa vers\u00e3o a sem\u00e2ntica\u2026","rel":"","context":"Em &quot;Tecnologia&quot;","block_context":{"text":"Tecnologia","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/tecnologia\/"},"img":{"alt_text":"Sem\u00e2ntica HTML5","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/03\/html4vshtml52.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":108,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/o-que-evitar-na-seo\/","url_meta":{"origin":46,"position":1},"title":"O que evitar na SEO?","author":"Andr\u00e9 Felizardo","date":"6 de julho de 2015","format":false,"excerpt":"Os buscadores est\u00e3o melhorando continuamente. Ainda assim, eles ainda n\u00e3o indexam todo o tipo de conte\u00fado din\u00e2mico. Portanto, lembre-se, utilizar texto b\u00e1sico e HTML no seu site \u00e9 sempre a melhor op\u00e7\u00e3o do ponto de vista da SEO. Por\u00e9m, caso voc\u00ea tenha que utilizar conte\u00fado din\u00e2mico e tamb\u00e9m se preocupar\u2026","rel":"","context":"Em &quot;Marketing&quot;","block_context":{"text":"Marketing","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/marketing\/"},"img":{"alt_text":"Erros SEO","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/07\/seo.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/07\/seo.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/07\/seo.jpg?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":35,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/front-end-o-que-e\/","url_meta":{"origin":46,"position":2},"title":"Front-end. O que \u00e9?","author":"Andr\u00e9 Felizardo","date":"29 de janeiro de 2015","format":false,"excerpt":"Front-end. Voc\u00ea sabe o que \u00e9? O que ele faz? Alguns anos atr\u00e1s, o termo que mais se ouvia quanto ao profissional que trabalha com o desenvolvimento de sites era WebDesigner. E a fun\u00e7\u00e3o de WebDesigner era meio m\u00edstica, parecia ser um profissional que sabia de tudo um pouco, c\u00f3digos,\u2026","rel":"","context":"Em &quot;Tecnologia&quot;","block_context":{"text":"Tecnologia","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/tecnologia\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/01\/vaga-para-desenvolvedor-front-end-webdesign-agencia-diretriz-digital-marketing-branding.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/01\/vaga-para-desenvolvedor-front-end-webdesign-agencia-diretriz-digital-marketing-branding.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/01\/vaga-para-desenvolvedor-front-end-webdesign-agencia-diretriz-digital-marketing-branding.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":943,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/javascript-comecando-do-jeito-certo\/","url_meta":{"origin":46,"position":3},"title":"JavaScript &#8211; Come\u00e7ando do jeito certo","author":"Andr\u00e9 Felizardo","date":"30 de novembro de 2017","format":false,"excerpt":"O que \u00e9 JavaScript? JavaScript \u00e9 uma linguagem de programa\u00e7\u00e3o, que foi criada originalmente para rodar em navegadores. Na tr\u00edade do Front-end, a linguagem \u00e9 respons\u00e1vel por interagir com o usu\u00e1rio (como mensagens de erro e outros), sem a necessidade das informa\u00e7\u00f5es irem at\u00e9 o servidor. O que \u00e9 JavaScript?\u2026","rel":"","context":"Em &quot;Dev&quot;","block_context":{"text":"Dev","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/dev\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/11\/javascript-comecando_jeito_certo.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/11\/javascript-comecando_jeito_certo.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/11\/javascript-comecando_jeito_certo.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/11\/javascript-comecando_jeito_certo.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":1152,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/web-components-guia-geral\/","url_meta":{"origin":46,"position":4},"title":"Web Components \u2013 Guia Geral","author":"Andr\u00e9 Felizardo","date":"20 de mar\u00e7o de 2020","format":false,"excerpt":"Neste guia veremos o que s\u00e3o web components, quando usar, sua estrutura e tamb\u00e9m um crash course criando um web component do zero que \u00e9 um card Pok\u00e9mon, com v\u00e1rios recursos interessantes. O que s\u00e3o web components Web Components s\u00e3o elementos customizados reutiliz\u00e1veis constru\u00eddos com diferentes tecnologias para serem utilizados\u2026","rel":"","context":"Em &quot;Dev&quot;","block_context":{"text":"Dev","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/dev\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/capa-web-components-1.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/capa-web-components-1.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/capa-web-components-1.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/capa-web-components-1.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/capa-web-components-1.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/capa-web-components-1.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":72,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/acessibilidade-web-parte-i\/","url_meta":{"origin":46,"position":5},"title":"Acessibilidade Web &#8211; Parte I","author":"Andr\u00e9 Felizardo","date":"9 de mar\u00e7o de 2015","format":false,"excerpt":"Acessibilidade Web quer dizer que todos os conte\u00fados ou servi\u00e7os devem estar acess\u00edveis, com f\u00e1cil acesso, da forma mais intuitiva e com o menor esfor\u00e7o, para o maior n\u00famero poss\u00edvel de usu\u00e1rios, independente de sistemas ou dispositivos utilizados, mas sem esquecer que tamb\u00e9m deve ser independente a suas culturas, experi\u00eancias\u2026","rel":"","context":"Em &quot;Tecnologia&quot;","block_context":{"text":"Tecnologia","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/tecnologia\/"},"img":{"alt_text":"Acessibilidade Web","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/03\/acessibilidade_web.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/03\/acessibilidade_web.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/03\/acessibilidade_web.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/posts\/46","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/comments?post=46"}],"version-history":[{"count":0,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/posts\/46\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/media\/37"}],"wp:attachment":[{"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/media?parent=46"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/categories?post=46"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/tags?post=46"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}