{"id":338,"date":"2015-03-03T19:28:35","date_gmt":"2015-03-03T19:28:35","guid":{"rendered":"https:\/\/felizardoandre.wordpress.com\/?p=58"},"modified":"2015-08-28T19:52:36","modified_gmt":"2015-08-28T19:52:36","slug":"semantica-html","status":"publish","type":"post","link":"https:\/\/www.andrefelizardo.com.br\/blog\/semantica-html\/","title":{"rendered":"Sem\u00e2ntica HTML"},"content":{"rendered":"

Quando penso em Sem\u00e2ntica HTML, diretamente j\u00e1 penso em HTML5.<\/p>\n

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.<\/p>\n

Antes do lan\u00e7amento dessa vers\u00e3o a sem\u00e2ntica do HTML era quase nenhuma, quase nenhuma mesmo. N\u00e3o tinha como, por exemplo, o rob\u00f4 do Google ou um ledor identificar e entender para que servia cada \u00e1rea do site, apenas atrav\u00e9s do c\u00f3digo HTML.<\/p>\n

J\u00e1 com o HTML5, foram inseridas novas TAGS, onde a sem\u00e2ntica ficou simples.<\/p>\n

Veja a imagem com o comparativo do HTML anterior e do atual:<\/p>\n

\"Sem\u00e2ntica<\/a><\/p>\n

Perceba que antes era tudo div<\/code>, ent\u00e3o como o navegador iria conseguir diferenciar? Pois \u00e9, n\u00e3o ia (nem mesmo com aquelas IDs ali).<\/p>\n

\u00a0A sem\u00e2ntica dos novos elementos<\/p><\/blockquote>\n

    \n
  1. header<\/a><\/li>\n
  2. main<\/a><\/li>\n
  3. footer<\/a><\/li>\n
  4. nav<\/a><\/li>\n
  5. section<\/a><\/li>\n
  6. article<\/a><\/li>\n
  7. aside<\/a><\/li>\n<\/ol>\n
    \n

    <\/a>Header<\/h2>\n<\/blockquote>\n

    <header><\/code> \u00e9 o cabe\u00e7alho do site, ou de uma \u00e1rea dele. Nele normalmente s\u00e3o inseridos elementos h1<\/code> at\u00e9 h6<\/code> (t\u00edtulos), elementos de navega\u00e7\u00e3o, a logo. O elemento <header><\/code> pode ser utilizado v\u00e1rias vezes dentro de uma mesma p\u00e1gina.<\/p>\n

    <header><\/code> n\u00e3o pode ser filho de outro <header><\/code> ou <footer><\/code> ou ainda <address><\/code>.<\/p>\n

    \n

    <\/a>\u00a0Main<\/h2>\n<\/blockquote>\n

    <main><\/code> demarca onde deve estar o conte\u00fado principal da p\u00e1gina. Diferentemente do <header><\/code>, s\u00f3 pode existir uma <main><\/code> por p\u00e1gina. Esta tag ainda n\u00e3o \u00e9 compat\u00edvel com todos os navegadores, mas mesmo assim j\u00e1 deve ser utilizada. Veja mais sobre\u00a0a\u00a0tag main aqui<\/a>.<\/p>\n

    \n

    <\/a>Footer<\/h2>\n<\/blockquote>\n

    <footer><\/code> \u00e9 rodap\u00e9 do site, ou de uma \u00e1rea dele. Normalmente nele ficam informa\u00e7\u00f5es de autoria, contato, Copyright e outros. Podem existir v\u00e1rios footers na mesma p\u00e1gina.<\/p>\n

    \n

    <\/a>Nav<\/h2>\n<\/blockquote>\n

    <nav><\/code> marca uma se\u00e7\u00e3o do documento que agrupa links, sejam eles externos ou internos. A <nav><\/code> pode estar no cabe\u00e7alho, no rodap\u00e9 ou em outras se\u00e7\u00f5es do documento, se relacionando assim com a navega\u00e7\u00e3o prim\u00e1ria ou global. Mas atente-se, nem todo link deve estar dentro de nav, dentro desta tag devem estar conjuntos de links.<\/p>\n

    \n

    <\/a>Section<\/h2>\n<\/blockquote>\n

    Entre todos estes elementos estruturais que estou tratando aqui, <section><\/code> \u00e9 o mais gen\u00e9rico. Dentro dele podemos colocar <header><\/code>, <article><\/code> e <footer><\/code>. Sua principal fun\u00e7\u00e3o \u00e9 dividir o conte\u00fado em grandes blocos, se\u00e7\u00f5es<\/em>.<\/p>\n

    \n

    <\/a>Article<\/h2>\n<\/blockquote>\n

    Representa um artigo<\/em>, um conte\u00fado independente e bastante relevante, que pode ser um artigo, post ou bloco de texto. Tamb\u00e9m pode ser utilizado em widgets<\/em>. O conte\u00fado de um <article><\/code> deve poder ser distribu\u00eddo de forma independente do resto do site.<\/p>\n

    \n

    <\/a>Aside<\/h2>\n<\/blockquote>\n

    <aside><\/code> define um conte\u00fado que faz alguma refer\u00eancia ao conte\u00fado principal que est\u00e1 a sua volta. Normalmente em uma barra lateral exibindo informa\u00e7\u00f5es contextuais, assuntos relacionados, publicidade, ou navega\u00e7\u00e3o secund\u00e1ria.<\/p>\n

    Na constru\u00e7\u00e3o de sites institucionais, por exemplo, voc\u00ea vai usar principalmente <header><\/code>, <main><\/code>, <nav><\/code> e <footer><\/code>.<\/p>\n

    Lembrando que todas as tags que abordei foram implementadas no HTML5.<\/p>\n","protected":false},"excerpt":{"rendered":"

    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 do HTML era quase nenhuma, […]<\/p>\n","protected":false},"author":1,"featured_media":362,"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,59],"class_list":["post-338","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tecnologia","tag-dicas","tag-front-end","tag-html","tag-html5","tag-web"],"yoast_head":"\nSem\u00e2ntica HTML - 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\/semantica-html\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sem\u00e2ntica HTML - Blog do Andr\u00e9 Felizardo\" \/>\n<meta property=\"og:description\" content=\"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 do HTML era quase nenhuma, […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.andrefelizardo.com.br\/blog\/semantica-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog do Andr\u00e9 Felizardo\" \/>\n<meta property=\"article:published_time\" content=\"2015-03-03T19:28:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-08-28T19:52:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/03\/html4vshtml52.png\" \/>\n\t<meta property=\"og:image:width\" content=\"484\" \/>\n\t<meta property=\"og:image:height\" content=\"256\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/semantica-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/semantica-html\\\/\"},\"author\":{\"name\":\"Andr\u00e9 Felizardo\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/7ffba68b251851fb519600e2e387a02b\"},\"headline\":\"Sem\u00e2ntica HTML\",\"datePublished\":\"2015-03-03T19:28:35+00:00\",\"dateModified\":\"2015-08-28T19:52:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/semantica-html\\\/\"},\"wordCount\":481,\"commentCount\":9,\"image\":{\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/semantica-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/03\\\/html4vshtml52.png\",\"keywords\":[\"dicas\",\"front-end\",\"html\",\"html5\",\"web\"],\"articleSection\":[\"Tecnologia\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/semantica-html\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/semantica-html\\\/\",\"url\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/semantica-html\\\/\",\"name\":\"Sem\u00e2ntica HTML - Blog do Andr\u00e9 Felizardo\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/semantica-html\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/semantica-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/03\\\/html4vshtml52.png\",\"datePublished\":\"2015-03-03T19:28:35+00:00\",\"dateModified\":\"2015-08-28T19:52:36+00:00\",\"author\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/7ffba68b251851fb519600e2e387a02b\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/semantica-html\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/semantica-html\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/semantica-html\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/03\\\/html4vshtml52.png\",\"contentUrl\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/03\\\/html4vshtml52.png\",\"width\":484,\"height\":256,\"caption\":\"Sem\u00e2ntica HTML5\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/semantica-html\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sem\u00e2ntica HTML\"}]},{\"@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":"Sem\u00e2ntica HTML - 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\/semantica-html\/","og_locale":"pt_BR","og_type":"article","og_title":"Sem\u00e2ntica HTML - Blog do Andr\u00e9 Felizardo","og_description":"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 do HTML era quase nenhuma, […]","og_url":"https:\/\/www.andrefelizardo.com.br\/blog\/semantica-html\/","og_site_name":"Blog do Andr\u00e9 Felizardo","article_published_time":"2015-03-03T19:28:35+00:00","article_modified_time":"2015-08-28T19:52:36+00:00","og_image":[{"width":484,"height":256,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/03\/html4vshtml52.png","type":"image\/png"}],"author":"Andr\u00e9 Felizardo","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Andr\u00e9 Felizardo","Est. tempo de leitura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.andrefelizardo.com.br\/blog\/semantica-html\/#article","isPartOf":{"@id":"https:\/\/www.andrefelizardo.com.br\/blog\/semantica-html\/"},"author":{"name":"Andr\u00e9 Felizardo","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#\/schema\/person\/7ffba68b251851fb519600e2e387a02b"},"headline":"Sem\u00e2ntica HTML","datePublished":"2015-03-03T19:28:35+00:00","dateModified":"2015-08-28T19:52:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.andrefelizardo.com.br\/blog\/semantica-html\/"},"wordCount":481,"commentCount":9,"image":{"@id":"https:\/\/www.andrefelizardo.com.br\/blog\/semantica-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/03\/html4vshtml52.png","keywords":["dicas","front-end","html","html5","web"],"articleSection":["Tecnologia"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.andrefelizardo.com.br\/blog\/semantica-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.andrefelizardo.com.br\/blog\/semantica-html\/","url":"https:\/\/www.andrefelizardo.com.br\/blog\/semantica-html\/","name":"Sem\u00e2ntica HTML - Blog do Andr\u00e9 Felizardo","isPartOf":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.andrefelizardo.com.br\/blog\/semantica-html\/#primaryimage"},"image":{"@id":"https:\/\/www.andrefelizardo.com.br\/blog\/semantica-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/03\/html4vshtml52.png","datePublished":"2015-03-03T19:28:35+00:00","dateModified":"2015-08-28T19:52:36+00:00","author":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#\/schema\/person\/7ffba68b251851fb519600e2e387a02b"},"breadcrumb":{"@id":"https:\/\/www.andrefelizardo.com.br\/blog\/semantica-html\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.andrefelizardo.com.br\/blog\/semantica-html\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.andrefelizardo.com.br\/blog\/semantica-html\/#primaryimage","url":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/03\/html4vshtml52.png","contentUrl":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/03\/html4vshtml52.png","width":484,"height":256,"caption":"Sem\u00e2ntica HTML5"},{"@type":"BreadcrumbList","@id":"https:\/\/www.andrefelizardo.com.br\/blog\/semantica-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"http:\/\/www.andrefelizardo.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Sem\u00e2ntica HTML"}]},{"@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\/03\/html4vshtml52.png","jetpack_shortlink":"https:\/\/wp.me\/p6EP66-5s","jetpack-related-posts":[{"id":46,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/a-tag-main\/","url_meta":{"origin":338,"position":0},"title":"A tag MAIN","author":"Andr\u00e9 Felizardo","date":"3 de mar\u00e7o de 2015","format":false,"excerpt":"A tag MAIN \u00e9 uma tag \"nova\" (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<main> define o conte\u00fado principal da p\u00e1gina ou da aplica\u00e7\u00e3o. Dentro desta\u2026","rel":"","context":"Em "Tecnologia"","block_context":{"text":"Tecnologia","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/tecnologia\/"},"img":{"alt_text":"Tag Main","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/01\/front-end-development.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/01\/front-end-development.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/01\/front-end-development.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":338,"position":1},"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 "Tecnologia"","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":338,"position":2},"title":"JavaScript – 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 "Dev"","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":799,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/angular-2-nao-continuacao-do-angular-1\/","url_meta":{"origin":338,"position":3},"title":"Angular 2 – A n\u00e3o continua\u00e7\u00e3o do Angular 1","author":"Andr\u00e9 Felizardo","date":"15 de janeiro de 2017","format":false,"excerpt":"T\u00e1 estudando Angular 2? N\u00e3o? Fica ligado que a gente j\u00e1 est\u00e1 no Angular 4 beta 3! Angular 2 foi oficialmente lan\u00e7ado em setembro de 2016. Mas tamb\u00e9m n\u00e3o precisa ficar t\u00e3o preocupado. De qualquer forma vamos colocar os pingos nos is\u00a0pra voc\u00ea entender de uma vez por toda o\u2026","rel":"","context":"Em "Dev"","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\/01\/angular2.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/01\/angular2.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/01\/angular2.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/01\/angular2.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":72,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/acessibilidade-web-parte-i\/","url_meta":{"origin":338,"position":4},"title":"Acessibilidade Web – 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 "Tecnologia"","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":[]},{"id":683,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/criando-pagina-com-rolagem-por-secao-html-css-jquery\/","url_meta":{"origin":338,"position":5},"title":"Criando p\u00e1gina com rolagem por se\u00e7\u00e3o – HTML, CSS, jQuery","author":"Andr\u00e9 Felizardo","date":"2 de outubro de 2016","format":false,"excerpt":"Continuando a ajuda a meus brothers, depois de manipular os elementos com JavaScript, o meu mesmo amigo queria fazer um site com se\u00e7\u00f5es, onde toda vez que clicasse em algum bot\u00e3o, ele rolaria para a pr\u00f3xima se\u00e7\u00e3o. A ideia inicial dele era fazer com \u00e2ncoras, e sem JavaScript ou jQuery,\u2026","rel":"","context":"Em "Curiosidades"","block_context":{"text":"Curiosidades","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/curiosidades\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/10\/html-css-jquery.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/posts\/338","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=338"}],"version-history":[{"count":0,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/posts\/338\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/media\/362"}],"wp:attachment":[{"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/media?parent=338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/categories?post=338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/tags?post=338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}